/* Day/time picker inside the kogemusnõustaja dialog.
   Plain CSS, loaded only on the kogemustoetamine page — the theme's Tailwind
   build does not scan for these because they belong to one component. */

/* 🚨 Oma klass, mitte WordPressi `.screen-reader-text`.
   Eeldasin, et teema defineerib selle — ei defineeri, ja `dist/main.css` on
   ainult Tailwind. Tulemus: iga päevanupu peitetekst („esmaspäev, 26. oktoober
   — 7 vaba aega") renderdus NÄHTAVALT kalendri peale ja ruudustik oli loetamatu.
   Seda ei näidanud ükski struktuurikontroll — ainult pilt. */
.onk-ajad__sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.onk-ajad { margin-top: 1.5rem; }
.onk-ajad__intro { font-size: 0.95rem; opacity: 0.8; margin: 0 0 0.9rem; }

.onk-ajad__months { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.onk-ajad__month { flex: 0 0 auto; }
.onk-ajad__month-name {
	font-size: 0.95rem; font-weight: 700; margin: 0 0 0.5rem; color: #34115D;
}
/* Once the script pages the months, the nav carries the month name and the
   per-month heading would say it twice. Unscripted, every month shows with its
   own heading — which is why this is scoped to the enhanced state. */
.onk-ajad--paged .onk-ajad__month-name { display: none; }

.onk-ajad__nav {
	display: flex; align-items: center; justify-content: space-between;
	gap: 0.5rem; margin-bottom: 0.6rem; max-width: 17rem;
}
.onk-ajad__nav-label { font-size: 0.95rem; font-weight: 700; color: #34115D; }
.onk-ajad__arrow {
	width: 2.25rem; height: 2.25rem; min-width: 2.25rem;
	display: flex; align-items: center; justify-content: center;
	border-radius: 0.5rem; border: 1px solid rgba(141, 68, 226, 0.3);
	background: #fff; color: #4a0f90; font-size: 1.25rem; line-height: 1;
	cursor: pointer; padding: 0;
}
.onk-ajad__arrow:hover:not(:disabled) { background: #F3E8FF; }
.onk-ajad__arrow:disabled { opacity: 0.3; cursor: default; }
.onk-ajad__arrow:focus-visible { outline: 2px solid #8d44E2; outline-offset: 2px; }

.onk-ajad__grid {
	display: grid;
	grid-template-columns: repeat(7, 2.25rem);
	gap: 0.25rem;
}
.onk-ajad__dow {
	font-size: 0.7rem; text-align: center; opacity: 0.55; padding-bottom: 0.2rem;
}
.onk-ajad__pad { height: 2.25rem; }

.onk-ajad__day {
	height: 2.25rem; width: 2.25rem;
	display: flex; align-items: center; justify-content: center;
	border-radius: 0.5rem;
	font-size: 0.9rem;
	border: 1px solid transparent;
	background: transparent;
	padding: 0;
}
/* A day with nothing free: visibly not a thing to press. */
.onk-ajad__day--empty { color: #34115D; opacity: 0.25; }
.onk-ajad__day--open {
	background: #F3E8FF; color: #4a0f90; font-weight: 600; cursor: pointer;
	border-color: rgba(141, 68, 226, 0.25);
}
.onk-ajad__day--open:hover { background: #e6d4fb; }
.onk-ajad__day--open.is-chosen { background: #8d44E2; color: #fff; border-color: #8d44E2; }
.onk-ajad__day--open:focus-visible { outline: 2px solid #8d44E2; outline-offset: 2px; }
.onk-ajad__day.is-today { text-decoration: underline; text-underline-offset: 2px; }

.onk-ajad__panels { margin-top: 1.1rem; }
.onk-ajad__panel + .onk-ajad__panel { margin-top: 1.1rem; }
.onk-ajad__panel-title { font-size: 0.95rem; font-weight: 700; margin: 0 0 0.5rem; }

.onk-ajad__times { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.onk-ajad__time {
	display: inline-flex; flex-direction: column; gap: 0.1rem;
	padding: 0.5rem 0.85rem;
	border-radius: 0.5rem;
	background: #fff;
	border: 1px solid rgba(141, 68, 226, 0.3);
	text-decoration: none; color: #34115D;
	min-height: 44px; /* a thumb target, not a link in a paragraph */
	justify-content: center;
}
.onk-ajad__time:hover { background: #8d44E2; color: #fff; border-color: #8d44E2; }
.onk-ajad__time:hover .onk-ajad__place { color: #fff; opacity: 0.9; }
.onk-ajad__clock { font-weight: 700; font-size: 1rem; }
.onk-ajad__place { font-size: 0.75rem; opacity: 0.7; }

@media (max-width: 480px) {
	.onk-ajad__months { gap: 1rem; }
	.onk-ajad__grid { grid-template-columns: repeat(7, 2rem); }
	.onk-ajad__day, .onk-ajad__pad { height: 2rem; width: 2rem; }
}