/* Sirtaki — small refinements not expressible in theme.json. */

/* Editorial nav: uppercase, generous tracking. */
.wp-block-navigation .wp-block-navigation-item__content {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8125rem;
	font-weight: 600;
}

/* Hero cover: ensure a tall, immersive viewport on the front page. */
.sirtaki-hero.wp-block-cover {
	min-height: 78vh;
}

/* Eyebrow label used above headings in patterns. */
.sirtaki-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-size: 0.8125rem;
	font-weight: 600;
}

/* Subtle entrance for hero copy. */
@media (prefers-reduced-motion: no-preference) {
	.sirtaki-hero .wp-block-cover__inner-container > * {
		animation: sirtaki-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
	}
	.sirtaki-hero .wp-block-cover__inner-container > *:nth-child(2) { animation-delay: 0.08s; }
	.sirtaki-hero .wp-block-cover__inner-container > *:nth-child(3) { animation-delay: 0.16s; }
}

@keyframes sirtaki-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Menu-section heading links read as titles (off-white), not body links. */
.wp-block-heading a {
	color: inherit;
	text-decoration: none;
	transition: color 0.18s ease;
}
.wp-block-heading a:hover,
.wp-block-heading a:focus {
	color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   Reservation booking form — editorial dark styling.
   The plugin renders structural BEM markup (.sirtaki-res-form); the theme
   owns all brand colour, type and spacing here, scoped to the slot wrapper.
   ========================================================================== */
.sirtaki-reservation-slot .sirtaki-res-form {
	--res-line: var(--wp--preset--color--secondary);
	--res-panel: var(--wp--preset--color--primary);
	--res-accent: var(--wp--preset--color--accent);
	--res-accent-soft: var(--wp--preset--color--accent-soft);
	--res-text: var(--wp--preset--color--base);
	--res-muted: var(--wp--preset--color--base-2);
	gap: 2rem;
	color: var(--res-text);
}

/* Section labels: uppercase editorial eyebrows. */
.sirtaki-reservation-slot .sirtaki-res-form__label,
.sirtaki-reservation-slot .sirtaki-res-form__legend {
	font-family: var(--wp--preset--font-family--body);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--res-muted);
}

/* Inputs: minimal, underline-forward, lots of air. */
.sirtaki-reservation-slot .sirtaki-res-form__input {
	padding: 0.85rem 0.95rem;
	border: 1px solid var(--res-line);
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.02);
	color: var(--res-text);
	font-family: var(--wp--preset--font-family--body);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.sirtaki-reservation-slot .sirtaki-res-form__input::placeholder {
	color: var(--res-muted);
	opacity: 0.7;
}
.sirtaki-reservation-slot .sirtaki-res-form__input:focus {
	outline: none;
	border-color: var(--res-accent);
	box-shadow: 0 0 0 2px rgba(232, 118, 43, 0.25);
}
/* Make the native date control legible on the dark panel. */
.sirtaki-reservation-slot .sirtaki-res-form__date::-webkit-calendar-picker-indicator {
	filter: invert(1);
	opacity: 0.7;
	cursor: pointer;
}
.sirtaki-reservation-slot .sirtaki-res-form__date {
	color-scheme: dark;
}

/* Party stepper. */
.sirtaki-reservation-slot .sirtaki-res-form__stepper {
	padding: 0.4rem 0.5rem;
	border: 1px solid var(--res-line);
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.02);
}
.sirtaki-reservation-slot .sirtaki-res-form__step-btn {
	border: 1px solid var(--res-line);
	background: transparent;
	color: var(--res-text);
	transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.sirtaki-reservation-slot .sirtaki-res-form__step-btn:not(:disabled):hover {
	border-color: var(--res-accent);
	color: var(--res-accent);
}
/* The number/select reads as one tappable surface in the centre of the stepper.
   It is a real <select>, so tapping it opens the native wheel/list picker on
   mobile; on desktop a caret signals it is a dropdown. */
.sirtaki-reservation-slot .sirtaki-res-form__step-value {
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0.7rem;
	border-radius: 2px;
	transition: background 0.18s ease, box-shadow 0.18s ease;
}
.sirtaki-reservation-slot .sirtaki-res-form__step-value:hover {
	background: rgba(232, 118, 43, 0.1);
}
.sirtaki-reservation-slot .sirtaki-res-form__step-value:focus-within {
	box-shadow: 0 0 0 2px rgba(232, 118, 43, 0.45);
}
.sirtaki-reservation-slot .sirtaki-res-form__party-select {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.1;
	color: var(--res-text);
	/* Caret drawn as an inline SVG in the brand orange, right of the number. */
	padding-right: 1.25rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23e8762b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.1rem center;
	transition: color 0.18s ease;
}
.sirtaki-reservation-slot .sirtaki-res-form__step-value:hover .sirtaki-res-form__party-select {
	color: var(--res-accent);
}
.sirtaki-reservation-slot .sirtaki-res-form__party-select:focus {
	outline: none;
}
/* Native option list (where the OS lets us): keep it on-brand on desktop. */
.sirtaki-reservation-slot .sirtaki-res-form__party-select option {
	background: var(--wp--preset--color--primary);
	color: var(--res-text);
}
.sirtaki-reservation-slot .sirtaki-res-form__step-unit {
	color: var(--res-muted);
	text-transform: lowercase;
	letter-spacing: 0;
	font-size: 0.85rem;
}

/* Inline calendar — dark editorial month grid. */
.sirtaki-reservation-slot .sirtaki-res-form__calendar {
	border: 1px solid var(--res-line);
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.02);
	padding: 1rem 1.1rem 1.15rem;
}
.sirtaki-reservation-slot .sirtaki-res-form__cal-head {
	margin-bottom: 0.9rem;
}
.sirtaki-reservation-slot .sirtaki-res-form__cal-month {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.3rem;
	font-weight: 500;
	color: var(--res-text);
	letter-spacing: 0.01em;
}
.sirtaki-reservation-slot .sirtaki-res-form__cal-nav {
	border: 1px solid var(--res-line);
	background: transparent;
	color: var(--res-text);
	transition: border-color 0.18s ease, color 0.18s ease;
}
.sirtaki-reservation-slot .sirtaki-res-form__cal-nav:not(:disabled):hover {
	border-color: var(--res-accent);
	color: var(--res-accent);
}
.sirtaki-reservation-slot .sirtaki-res-form__cal-weekday {
	color: var(--res-muted);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.66rem;
	font-weight: 600;
}
.sirtaki-reservation-slot .sirtaki-res-form__cal-grid {
	gap: 0.3rem;
}
.sirtaki-reservation-slot .sirtaki-res-form__cal-day {
	border: 1px solid transparent;
	border-radius: 2px;
	color: var(--res-text);
	font-size: 0.95rem;
	transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}
.sirtaki-reservation-slot .sirtaki-res-form__cal-day:not(:disabled):not(.is-selected):hover {
	border-color: var(--res-accent);
}
.sirtaki-reservation-slot .sirtaki-res-form__cal-day.is-disabled,
.sirtaki-reservation-slot .sirtaki-res-form__cal-day:disabled {
	color: var(--res-muted);
	opacity: 0.4;
}
.sirtaki-reservation-slot .sirtaki-res-form__cal-day.is-closed {
	text-decoration: line-through;
}
.sirtaki-reservation-slot .sirtaki-res-form__cal-day.is-full .sirtaki-res-form__cal-dot {
	background: var(--res-accent-soft);
	opacity: 1;
}
.sirtaki-reservation-slot .sirtaki-res-form__cal-day.is-selected {
	background: var(--res-accent);
	border-color: var(--res-accent);
	color: var(--wp--preset--color--contrast);
}
.sirtaki-reservation-slot .sirtaki-res-form__cal-day.is-selected .sirtaki-res-form__cal-dot {
	background: var(--wp--preset--color--contrast);
}
.sirtaki-reservation-slot .sirtaki-res-form__cal-day:focus-visible {
	outline: 2px solid var(--res-accent);
	outline-offset: 1px;
}

/* Time slot chips. */
.sirtaki-reservation-slot .sirtaki-res-form__slot-grid {
	grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
	gap: 0.6rem;
}
.sirtaki-reservation-slot .sirtaki-res-form__slot {
	padding: 0.7rem 0.4rem;
	border: 1px solid var(--res-line);
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.02);
	color: var(--res-text);
	transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.sirtaki-reservation-slot .sirtaki-res-form__slot-time {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 1rem;
}
.sirtaki-reservation-slot .sirtaki-res-form__slot-note {
	color: var(--res-muted);
}
.sirtaki-reservation-slot .sirtaki-res-form__slot:not(:disabled):hover {
	border-color: var(--res-accent);
	transform: translateY(-1px);
}
.sirtaki-reservation-slot .sirtaki-res-form__slot.is-few {
	border-color: var(--res-accent-soft);
}
.sirtaki-reservation-slot .sirtaki-res-form__slot.is-few .sirtaki-res-form__slot-note {
	color: var(--res-accent-soft);
}
.sirtaki-reservation-slot .sirtaki-res-form__slot.is-selected {
	background: var(--res-accent);
	border-color: var(--res-accent);
	color: var(--wp--preset--color--contrast);
}
.sirtaki-reservation-slot .sirtaki-res-form__slot.is-selected .sirtaki-res-form__slot-note {
	color: var(--wp--preset--color--contrast);
	opacity: 0.75;
}
.sirtaki-reservation-slot .sirtaki-res-form__slot.is-full {
	opacity: 0.35;
}
.sirtaki-reservation-slot .sirtaki-res-form__waitlist {
	border: 1px dashed var(--res-accent-soft);
	border-radius: 2px;
	background: transparent;
	color: var(--res-accent-soft);
	padding: 0.7rem 1.1rem;
	transition: background 0.18s ease, color 0.18s ease;
}
.sirtaki-reservation-slot .sirtaki-res-form__waitlist:hover,
.sirtaki-reservation-slot .sirtaki-res-form__waitlist.is-selected {
	background: var(--res-accent-soft);
	color: var(--wp--preset--color--contrast);
}
.sirtaki-reservation-slot .sirtaki-res-form__hint {
	color: var(--res-muted);
}

/* Guest details: separated by a hairline, fades in when enabled. */
.sirtaki-reservation-slot .sirtaki-res-form__details {
	gap: 1.1rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--res-line);
	transition: opacity 0.25s ease;
}
.sirtaki-reservation-slot .sirtaki-res-form__details[disabled] {
	opacity: 0.4;
}

/* Submit: confident orange button with ink text (AA: 6.22). */
.sirtaki-reservation-slot .sirtaki-res-form__submit {
	padding: 0.95rem 2.2rem;
	border-radius: 2px;
	background: var(--res-accent);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	letter-spacing: 0.02em;
	transition: background 0.18s ease;
}
.sirtaki-reservation-slot .sirtaki-res-form__submit:not(:disabled):hover {
	background: var(--res-accent-soft);
}

/* Feedback message. */
.sirtaki-reservation-slot .sirtaki-res-form__message {
	margin: 0;
	font-size: 0.95rem;
}
.sirtaki-reservation-slot .sirtaki-res-form__message.is-success {
	color: var(--res-accent-soft);
}
.sirtaki-reservation-slot .sirtaki-res-form__message.is-error {
	color: #f08a7a;
}