/* ==========================================================================
   Anand Karaj Calendar - frontend styles

   Single big month view (with prev/next paging), auto-height rather than
   forced into a fixed aspect-ratio box - this embeds inside arbitrary
   WordPress themes/layouts (desktop content column, narrow sidebar widget,
   or a mobile viewport), not a dedicated fullscreen kiosk, so there's no
   "must fit one fixed screen" constraint to design around anymore. The
   component scales itself off its OWN width via CSS container query units
   (cqw) - see `container-type: inline-size` below - and every font-size/
   touch-target uses clamp() so it stays readable/usable at both a ~300px
   mobile width and a wide desktop column, not just whatever width it was
   eyeballed at.

   Layout follows a conventional calendar-app pattern: a toolbar (current
   month + Today/prev/next) above a bordered day-number grid with the date
   in each cell's corner, rather than the earlier rounded-chip cells with a
   centered number. Day cells are sized with plain `aspect-ratio` (a bit
   wider than tall - see --cal-cell-ratio) on a `repeat(7, 1fr)` grid rather
   than JS-measured pixel dimensions - with only 7 columns (one month, not
   a 4-wide multi-month grid) this is enough for CSS alone to keep cells
   uniformly sized on any container width, no JS involved. Grid lines
   between cells are the classic `gap` + container `background-color`
   trick (the gap is filled with --cal-border, cells paint over everything
   except that 1px seam), not per-cell borders, which would double up
   between adjacent cells.

   All class names are prefixed akc- and nothing relies on element IDs, so
   more than one instance can safely exist on the same page. Colors are all
   CSS custom properties, defaulted here to the original "Walnut & Gold"
   palette - the plugin's settings page/shortcode attributes override these
   per-site or per-instance via a scoped inline <style> block, never by
   editing this file.
   ========================================================================== */

.anand-karaj-calendar {
	--cal-bg-page: #150e08;
	--cal-bg: #20160e;
	--cal-bg-2: #241a11;
	--cal-border: #3a2c1c;
	--cal-border-soft: #2a2015;
	--cal-cell-bg: #2a1f14;
	--cal-cell-bg-hover: #382a1a;
	--cal-text-muted: #7d6f5c;
	--cal-text-parchment: #c9baa3;
	--cal-text-dark: #f2e8d5;
	--cal-accent: #d1a24a;
	--cal-accent-hover: #e9c983;
	--cal-accent-dim: #8a6f3f;
	--cal-accent-ink: #2a1a06;
	--cal-title-font: "Fraunces", Georgia, "Times New Roman", serif;
	--cal-body-font: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--cal-gm-font: "Noto Sans Gurmukhi", "Work Sans", system-ui, sans-serif;
	/* Caps how wide the calendar can grow - everything below scales off
	   the container's own width (cqw/clamp), so on a genuinely wide
	   embed (a full-width page template with no narrow content column to
	   naturally constrain it) it would otherwise keep growing to fill
	   that space, producing absurdly oversized day cells/text. A single
	   custom property so it's one obvious place to override (from theme
	   CSS, or a future shortcode attribute) rather than a magic number
	   buried in a width declaration. */
	--cal-max-width: 60rem;
	/* Day-cell width:height ratio. 1 (perfectly square) makes the overall
	   card noticeably taller than wide once the header/instructions and
	   bottom bar are stacked on top of 6 rows of cells - a bigger-than-1
	   ratio (cells a bit wider than tall) trims that accumulated height
	   without touching the card's width, landing on a more conventional
	   landscape rectangle instead of a tall, narrow block. */
	--cal-cell-ratio: 1.3;

	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	/* !important is deliberate, not a specificity shortcut taken out of
	   laziness: modern WP themes' block "constrained layout" feature
	   injects a same-page rule like
	   `.entry-content.is-layout-constrained > :where(...)`  targeting
	   direct children of the content area with the theme's own content
	   width (which can be 1800px+ on a full-width/alignfull block) - that
	   selector's two classes (specificity 0,2,0) beat this single-class
	   rule (0,1,0) regardless of stylesheet load order, silently
	   stretching the calendar to the theme's width instead of this
	   component's own intentional cap. */
	max-width: var(--cal-max-width) !important;
	margin-inline: auto;
	/* Query container for the cqw units used throughout - inline-size
	   (width-only) containment is deliberate: height follows content
	   naturally rather than being forced into a fixed ratio, which is what
	   makes this mobile-safe (a narrow phone width just produces a
	   naturally shorter component, nothing gets clipped or overlaps).
	   Supported in all evergreen browsers since 2023 (Chrome/Edge 105+,
	   Safari 16+, Firefox 110+). */
	container-type: inline-size;
	container-name: akc;
	background:
		radial-gradient(circle at 15% 0%, var(--cal-bg-2) 0%, transparent 45%),
		radial-gradient(circle at 85% 100%, #201509 0%, transparent 45%),
		var(--cal-bg-page);
	font-family: var(--cal-body-font);
	color: var(--cal-text-dark);
	border-radius: clamp(6px, 1cqw, 12px);
	padding-bottom: clamp(0.75rem, 2cqw, 1.25rem);
}

.anand-karaj-calendar *,
.anand-karaj-calendar *::before,
.anand-karaj-calendar *::after {
	box-sizing: border-box;
}

/* ---- Last-updated corner label ----------------------------------------- */
.akc-last-updated {
	position: absolute;
	top: 0.6rem;
	right: 1cqw;
	font-size: clamp(0.6rem, 1.4cqw, 0.75rem);
	letter-spacing: 0.04em;
	color: var(--cal-text-muted);
	z-index: 6;
}

/* ---- Header: eyebrow + title + bilingual instructions ------------------ */
.akc-header {
	flex: 0 0 auto;
	text-align: center;
	padding: clamp(0.8rem, 2.2cqw, 1.3rem) clamp(1rem, 4cqw, 2.5rem) clamp(0.5rem, 1.2cqw, 0.8rem);
	border-bottom: 1px solid var(--cal-border-soft);
}

.akc-eyebrow {
	font-size: clamp(0.55rem, 1.4cqw, 0.75rem);
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--cal-accent-dim);
	margin-bottom: 0.4rem;
}

.akc-title {
	font-family: var(--cal-title-font);
	font-weight: 500;
	font-size: clamp(1.2rem, 4.4cqw, 1.9rem);
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: var(--cal-accent-hover);
}

.akc-title .akc-i18n,
.akc-instructions .akc-i18n {
	font-family: var(--cal-gm-font);
}

.akc-instructions {
	max-width: 46rem;
	margin: 0.5rem auto 0;
	font-size: clamp(0.8rem, 2.1cqw, 1.05rem);
	line-height: 1.5;
	color: var(--cal-text-parchment);
}

.akc-instructions .akc-i18n {
	display: block;
	opacity: 0.85;
	margin-top: 0.2rem;
}

/* ---- Toolbar: current month/range + Today/prev/next --------------------
   flex-wrap so a narrow embed drops the controls to their own row under
   the month name instead of squeezing both onto one cramped line. */
.akc-toolbar {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	padding: clamp(0.6rem, 1.5cqw, 1rem) clamp(1rem, 3cqw, 2rem);
}

.akc-current-range {
	font-family: var(--cal-title-font);
	font-weight: 500;
	font-size: clamp(1.1rem, 3cqw, 1.5rem);
	color: var(--cal-accent-hover);
}

.akc-toolbar-controls {
	display: flex;
	align-items: center;
	gap: clamp(0.5rem, 1.5cqw, 1rem);
}

/* ---- Month grid wrapper ------------------------------------------------- */
.akc-cal-wrap {
	padding: clamp(0.4rem, 1.2cqw, 0.75rem) clamp(1rem, 3cqw, 2rem);
}

.akc-month-grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(var(--akc-cols, 1), minmax(0, 1fr));
	gap: clamp(0.75rem, 2.5cqw, 1.5rem);
}

.akc-month-tile {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--cal-border);
	border-radius: clamp(6px, 1cqw, 10px);
	overflow: hidden;
}

.akc-month-tile.akc-empty-tile {
	border-color: transparent;
}

/* Only present for a multi-month configuration (months-per-page > 1) -
   the default single-month view shows its month name in the shared
   .akc-toolbar above instead (see calendar.js _buildMonthTile). */
.akc-month-tile-header {
	flex: 0 0 auto;
	text-align: center;
	font-family: var(--cal-title-font);
	font-weight: 500;
	font-size: clamp(1rem, 3.4cqw, 1.4rem);
	letter-spacing: 0.03em;
	color: var(--cal-accent-hover);
	padding: 0.6rem;
	background: var(--cal-bg-2);
	border-bottom: 1px solid var(--cal-border);
}

.akc-month-tile-weekdays {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	background: var(--cal-border-soft);
}

.akc-month-tile-weekdays span {
	text-align: center;
	padding: 0.5rem 0;
	font-size: clamp(0.6rem, 1.5cqw, 0.85rem);
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--cal-text-muted);
}

/* Grid lines between cells are the classic gap + background-color trick:
   this element's own background (--cal-border) shows through the 1px gap
   as a seam, while each cell paints over everything else - avoids the
   double-thick lines individual per-cell borders would produce where two
   cells are adjacent. */
.akc-month-tile-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 1px;
	background: var(--cal-border);
}

.akc-day-cell {
	aspect-ratio: var(--cal-cell-ratio);
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	padding: clamp(0.3rem, 1cqw, 0.6rem);
	background: var(--cal-cell-bg);
	color: var(--cal-text-parchment);
	font-size: clamp(0.75rem, 2.2cqw, 1.05rem);
	font-weight: 500;
	transition: background 0.15s ease;
}

.akc-day-cell.akc-empty {
	background: var(--cal-bg);
}

.akc-day-cell.akc-available:not(.akc-unavailable):hover {
	background: var(--cal-cell-bg-hover);
}

.akc-day-cell.akc-booked {
	background: radial-gradient(circle at 22% 18%, var(--cal-accent-hover), var(--cal-accent) 70%);
	color: var(--cal-accent-ink);
	font-weight: 700;
}

.akc-day-cell.akc-today {
	box-shadow: 0 0 0 2px var(--cal-accent-dim) inset;
}

.akc-day-cell.akc-past,
.akc-day-cell.akc-unavailable {
	opacity: 0.45;
}

/* ---- Bottom bar: legend + contact -----------------------------------
   Prev/next/Today live in the toolbar above the grid now, not down here -
   this row is just the color-key legend and the office contact line,
   space-between so they land at opposite ends on a wide card and stack
   below the akc-narrow breakpoint. */
.akc-bottom-bar {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(0.5rem, 2cqw, 1.5rem);
	padding: clamp(0.6rem, 1.5cqw, 1rem) clamp(1rem, 3cqw, 2rem) 0;
	margin-top: clamp(0.4rem, 1cqw, 0.75rem);
	border-top: 1px solid var(--cal-border-soft);
}

.akc-legend {
	display: flex;
	gap: clamp(0.75rem, 2cqw, 1.5rem);
	font-size: clamp(0.7rem, 1.8cqw, 0.9rem);
	color: var(--cal-text-parchment);
}

.akc-contact {
	text-align: center;
	font-size: clamp(0.72rem, 1.9cqw, 0.95rem);
	color: var(--cal-text-parchment);
}

.akc-contact b {
	color: var(--cal-accent-hover);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.akc-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.akc-legend .akc-dot {
	width: 0.65rem;
	height: 0.65rem;
	border-radius: 50%;
	display: inline-block;
	flex: 0 0 auto;
}

.akc-legend .akc-dot.akc-booked {
	background: radial-gradient(circle at 32% 28%, var(--cal-accent-hover), var(--cal-accent) 70%);
}

.akc-legend .akc-dot.akc-available {
	background: var(--cal-cell-bg);
	border: 1px solid var(--cal-border);
}

.akc-pager-btn {
	font-family: var(--cal-body-font);
	cursor: pointer;
	border: 1px solid var(--cal-border);
	border-radius: 999px;
	background: var(--cal-bg-2);
	color: var(--cal-text-parchment);
	transition: border-color 0.15s ease, opacity 0.15s ease;
}

.akc-pager-btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.akc-jump-btn {
	font-size: clamp(0.72rem, 1.8cqw, 0.9rem);
	font-weight: 500;
	/* Generous tap target on touch devices, not just readable text. */
	padding: 0.65rem 1.1rem;
}

.akc-jump-btn:hover:not(:disabled) {
	border-color: var(--cal-accent);
}

.akc-arrow-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(1.1rem, 2.4cqw, 1.5rem);
	line-height: 1;
	/* 44px is the standard minimum recommended touch-target size (Apple/
	   Google HIG); clamp() floors here regardless of how narrow the
	   container gets, then scales up modestly on wide desktop embeds. */
	width: clamp(2.75rem, 6cqw, 3.25rem);
	height: clamp(2.75rem, 6cqw, 3.25rem);
	padding: 0;
	background: radial-gradient(circle at 32% 28%, var(--cal-accent-hover), var(--cal-accent) 70%);
	color: var(--cal-accent-ink);
	border: none;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

.akc-arrow-btn:hover:not(:disabled) {
	background: radial-gradient(circle at 32% 28%, var(--cal-accent-hover), var(--cal-accent-hover) 70%);
}

.akc-arrow-btn:active:not(:disabled) {
	transform: scale(0.94);
}

.akc-arrow-btn:disabled {
	background: var(--cal-bg-2);
	color: var(--cal-text-muted);
	box-shadow: none;
}

/* Continuous soft ring pulse - a standing "this is tappable" affordance. */
.akc-arrow-btn:not(:disabled)::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--cal-accent);
	opacity: 0.6;
	animation: akc-arrow-pulse 2.6s ease-out infinite;
	pointer-events: none;
}

.akc-pager-btn[data-action="next"]:not(:disabled)::after {
	animation-delay: 1.3s;
}

@keyframes akc-arrow-pulse {
	0% {
		transform: scale(1);
		opacity: 0.6;
	}
	70% {
		transform: scale(1.4);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

/* ---- Narrow-container layout ---------------------------------------------
   Triggered by THIS component's own rendered width (container query, not a
   viewport media query) - fires equally correctly in an actual mobile
   browser, a narrow desktop sidebar widget, or a half-width block layout.
   Centers the legend/contact bottom bar and the toolbar once there's no
   longer room for them side-by-side on a phone-width embed. */
@container akc (max-width: 480px) {
	.akc-bottom-bar,
	.akc-toolbar {
		justify-content: center;
		text-align: center;
	}
}