/* ==========================================================================
   AMARTANGAIL.COM — main stylesheet
   Fonts, design tokens, base styles, layout primitives.
   Mobile-first: base rules target 360px; wider layouts are added upward.
   Components (header, footer, cards, search …) are in components.css.

   Contents
   1. Fonts            5. Layout primitives     9. Skip link, brand
   2. Design tokens    6. Surfaces
   3. Base             7. Buttons              11. Entries
   4. Forms            8. Prose                12. Utilities and motion
   ========================================================================== */

/* 1. Fonts ----------------------------------------------------------------
   Self-hosted, subset WOFF2 (TD-007). The unicode-range means a browser
   downloads a file only when the page contains characters from that script:
   Bangla text pulls Hind Siliguri, Latin text pulls Inter. */
@font-face {
	font-family: "Hind Siliguri";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/hind-siliguri-bengali-regular.woff2") format("woff2");
	unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F2-A8F3;
}

@font-face {
	font-family: "Hind Siliguri";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/hind-siliguri-bengali-semibold.woff2") format("woff2");
	unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F2-A8F3;
}

@font-face {
	font-family: "Hind Siliguri";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/hind-siliguri-bengali-bold.woff2") format("woff2");
	unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F2-A8F3;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/inter-latin-variable.woff2") format("woff2");
	unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2010-2015, U+2018-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2190-2193, U+2212, U+2215;
}

/* 2. Design tokens --------------------------------------------------------
   Palette, type and layout values from CMS-1.0 sections 33–34, plus the
   colours the homepage design adds (TD-035). Contrast figures are against
   white unless stated; see docs/DESIGN-SYSTEM.md. */
:root {
	/* Brand palette (CMS-1.0) */
	--at-navy: #102A43;
	--at-green: #1F6F5C;         /* 6.0:1 — links, primary buttons */
	--at-gold: #C89B3C;          /* 2.6:1 — never for text on light surfaces */
	--at-bg: #F7F8FA;
	--at-bg-base: #FBF8F0;       /* the picture's own paper colour */
	--at-bg-veil-rgb: 251 248 240;
	--at-bg-veil: 0.9;           /* strength of the light veil over the site background, 0 to 1; the picture shows at 1 minus this */
	--at-white: #FFFFFF;
	--at-text: #1F2933;          /* 14.8:1 */
	--at-muted: #627D98;         /* 4.3:1 — large text, icons and rules only */
	--at-border: #D9E2EC;
	--at-success: #2F855A;
	--at-warning: #D69E2E;
	--at-error: #C53030;

	/* From the homepage design */
	--at-green-deep: #003832;    /* 13.0:1 — headings, utility bar, footer */
	--at-parchment: #F5EBDC;     /* timeline band */

	/* Accessible ink variants of palette colours that fail as small text */
	--at-text-muted: #2F4962;    /* small secondary text; 4.5:1 or better even over the darkest part of the veiled site background */
	--at-gold-ink: #7A5C14;      /* 6.2:1; gold-toned text on light surfaces */
	--at-on-deep-muted: #B7CDC8; /* 7.8:1 on --at-green-deep */

	/* Roles */
	--at-heading: var(--at-green-deep);
	--at-link: #0F4F40;          /* links in text; darker than --at-green so they stay readable over the site background */
	--at-link-hover: var(--at-green-deep);
	--at-focus: var(--at-green-deep);

	/* Typography */
	--at-font-body: "Hind Siliguri", "Inter", "Noto Sans Bengali", "Nirmala UI", "Kohinoor Bangla", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--at-font-en: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--at-text-xs: 0.8125rem;
	--at-text-sm: 0.9375rem;
	--at-text-base: 1.0625rem;
	--at-text-lg: 1.1875rem;
	--at-text-xl: clamp(1.3125rem, 1.2rem + 0.5vw, 1.5rem);
	--at-text-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
	--at-text-3xl: clamp(1.75rem, 1.4rem + 1.8vw, 2.5rem);
	--at-text-4xl: clamp(2.125rem, 1.5rem + 3.2vw, 3.5rem);

	--at-leading-body: 1.7;     /* Bangla conjuncts and matras need generous leading. */
	--at-leading-heading: 1.3;

	/* Spacing: a 4px base */
	--at-space-1: 4px;
	--at-space-2: 8px;
	--at-space-3: 12px;
	--at-space-4: 16px;
	--at-space-5: 24px;
	--at-space-6: 32px;
	--at-space-7: 48px;
	--at-space-8: 64px;
	--at-space-9: 96px;
	--at-section-space: clamp(40px, 6vw, 80px);

	/* Layout */
	--at-width-standard: 1280px;
	--at-width-wide: 1440px;
	--at-width-reading: 790px;
	--at-gutter: 20px;

	/* Shape */
	--at-radius-card: 14px;
	--at-radius-card-lg: 18px;
	--at-radius-button: 9px;
	--at-radius-pill: 999px;
	--at-shadow-card: 0 1px 2px rgba(0, 56, 50, 0.06), 0 6px 20px rgba(0, 56, 50, 0.06);
	--at-control-height: 44px;  /* Minimum touch target. */
}

@media (min-width: 768px) {
	:root { --at-gutter: 32px; }
}

@media (min-width: 1024px) {
	:root { --at-gutter: 48px; }
}

/* 3. Base ----------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	/* A page shorter than the screen still ends with the footer at the bottom. */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0;
	/* The colour shows while the image loads, and if it fails to load. */
	background: var(--at-bg-base);
	color: var(--at-text);
	font-family: var(--at-font-body);
	font-size: var(--at-text-base);
	line-height: var(--at-leading-body);
	overflow-wrap: break-word;
}

/*
 * Site background: one watercolour of Tangail behind every page, fixed in
 * place while the page scrolls and always covering the whole screen.
 *
 * It is painted on a fixed layer rather than with background-attachment:
 * fixed, which phones ignore or redraw badly. Over the picture lies a light
 * veil (--at-bg-veil): without it, text that scrolls across the dark parts
 * of the picture cannot be read. Raise the veil for more contrast, lower it
 * for a stronger picture. At 0.9 the picture shows at 10% strength. Body
 * text, secondary text and links keep 4.5:1 or better over its darkest
 * part down to about 0.7; below that secondary text and links no longer do.
 */
body::before {
	content: "";
	position: fixed;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	/* The largest the screen can be on a phone, so no strip is left bare when its toolbar hides. */
	height: 100lvh;
	background-color: var(--at-bg-base);
	background-image:
		linear-gradient(rgb(var(--at-bg-veil-rgb) / var(--at-bg-veil)), rgb(var(--at-bg-veil-rgb) / var(--at-bg-veil))),
		url("../images/background/tangail-watercolor-background-960.webp");
	background-repeat: no-repeat;
	/* On a tall, narrow screen only a slice of the picture fits: show the side with the mosque and the flowers, not the empty middle. */
	background-position: 10% center;
	background-size: cover;
	pointer-events: none;
}

@media (min-width: 800px) {
	body::before {
		background-position: center;
		background-image:
			linear-gradient(rgb(var(--at-bg-veil-rgb) / var(--at-bg-veil)), rgb(var(--at-bg-veil-rgb) / var(--at-bg-veil))),
			url("../images/background/tangail-watercolor-background.webp");
	}
}

/* Printing: paper stays white. */
@media print {
	body::before {
		display: none;
	}
}

.at-main {
	flex: 1 0 auto;
}

/* The skip link moves focus here; the whole page body needs no ring. */
.at-main:focus {
	outline: none;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

img {
	vertical-align: middle;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 0.5em;
	color: var(--at-heading);
	font-weight: 700;
	line-height: var(--at-leading-heading);
	text-wrap: balance;
}

h1 { font-size: var(--at-text-3xl); }
h2 { font-size: var(--at-text-2xl); }
h3 { font-size: var(--at-text-xl); }
h4 { font-size: var(--at-text-lg); }

p {
	margin: 0 0 1em;
}

a {
	color: var(--at-link);
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--at-link-hover);
}

:focus-visible {
	outline: 3px solid var(--at-focus);
	outline-offset: 2px;
}

::selection {
	background: var(--at-green-deep);
	color: var(--at-white);
}

hr {
	height: 1px;
	margin: var(--at-space-6) 0;
	border: 0;
	background: var(--at-border);
}

/* 4. Forms ---------------------------------------------------------------- */
button,
input,
select,
textarea {
	color: inherit;
	font: inherit;
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
select,
textarea {
	width: 100%;
	min-height: var(--at-control-height);
	padding: 8px 14px;
	border: 1px solid var(--at-muted); /* 4.3:1 against white: a visible boundary. */
	border-radius: var(--at-radius-button);
	background: var(--at-white);
}

textarea {
	min-height: 120px;
	resize: vertical;
}

label {
	display: inline-block;
	margin-bottom: var(--at-space-1);
	font-weight: 600;
}

/* 5. Layout primitives ---------------------------------------------------- */
.at-container {
	width: 100%;
	max-width: calc(var(--at-width-standard) + 2 * var(--at-gutter));
	margin-inline: auto;
	padding-inline: var(--at-gutter);
}

.at-container--wide {
	max-width: calc(var(--at-width-wide) + 2 * var(--at-gutter));
}

.at-container--reading {
	max-width: calc(var(--at-width-reading) + 2 * var(--at-gutter));
}

.at-section {
	padding-block: var(--at-section-space);
}

/* Vertical rhythm between direct children. */
.at-stack > * + * {
	margin-block-start: var(--at-stack-space, var(--at-space-5));
}

/* Items in a row that wrap, such as buttons or filter pills. */
.at-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--at-cluster-space, var(--at-space-3));
}

/* Responsive card grid: as many columns as fit, never narrower than the minimum. */
.at-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(var(--at-grid-min, 240px), 100%), 1fr));
	gap: var(--at-grid-gap, var(--at-space-5));
}

/* Two regions side by side on wide screens, stacked on narrow ones. */
.at-split {
	display: grid;
	gap: var(--at-space-7) var(--at-space-6);
}

@media (min-width: 1024px) {
	.at-split {
		grid-template-columns: minmax(0, var(--at-split-main, 3fr)) minmax(0, var(--at-split-side, 2fr));
	}
}

/* 6. Surfaces ------------------------------------------------------------- */
/* Light bands let the site background show through; cards on them stay solid. */
.at-surface--white {
	background: rgb(255 255 255 / 55%);
}

.at-surface--parchment {
	background: rgb(245 235 220 / 60%);
}

.at-surface--deep {
	--at-heading: var(--at-white);
	--at-link: var(--at-white);
	--at-link-hover: var(--at-gold);
	--at-focus: var(--at-gold);

	background: var(--at-green-deep);
	color: var(--at-white);
}

/* 7. Buttons -------------------------------------------------------------- */
.at-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--at-space-2);
	min-height: var(--at-control-height);
	padding: 8px 20px;
	border: 2px solid transparent;
	border-radius: var(--at-radius-button);
	background: var(--at-green);
	color: var(--at-white);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
}

.at-button:hover {
	background: var(--at-green-deep);
	color: var(--at-white);
}

.at-button--gold {
	background: var(--at-gold);
	color: var(--at-green-deep); /* 5.1:1 */
}

.at-button--gold:hover {
	background: var(--at-white);
	color: var(--at-green-deep);
	border-color: var(--at-gold);
}

.at-button--outline {
	border-color: currentColor;
	background: transparent;
	color: var(--at-green);
}

.at-button--outline:hover {
	background: var(--at-green);
	border-color: var(--at-green);
	color: var(--at-white);
}

.at-surface--deep .at-button--outline {
	color: var(--at-white);
}

.at-surface--deep .at-button--outline:hover {
	background: var(--at-white);
	border-color: var(--at-white);
	color: var(--at-green-deep);
}

/* 8. Prose: long-form text from the editor -------------------------------- */
.at-prose {
	max-width: var(--at-width-reading);
}

.at-prose > * + * {
	margin-block-start: 1em;
}

.at-prose h2,
.at-prose h3,
.at-prose h4 {
	margin-block-start: 1.6em;
}

.at-prose ul,
.at-prose ol {
	padding-inline-start: 1.4em;
}

.at-prose li + li {
	margin-block-start: 0.35em;
}

.at-prose blockquote {
	margin-inline: 0;
	padding: var(--at-space-2) var(--at-space-5);
	border-inline-start: 4px solid var(--at-gold);
	color: var(--at-green-deep);
	font-size: var(--at-text-lg);
}

.at-prose figure {
	margin-inline: 0;
}

.at-prose figcaption {
	margin-block-start: var(--at-space-2);
	color: var(--at-text-muted);
	font-size: var(--at-text-sm);
}

.at-prose img {
	border-radius: var(--at-radius-card);
}

/* Wide tables scroll inside themselves instead of widening the page. */
.at-prose table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

.at-prose th,
.at-prose td {
	padding: var(--at-space-2) var(--at-space-3);
	border: 1px solid var(--at-border);
	text-align: start;
	vertical-align: top;
}

.at-prose th {
	background: var(--at-white);
	color: var(--at-green-deep);
}

/* 9. Skip link and brand lockup ------------------------------------------- */
.at-skip-link {
	position: absolute;
	left: 8px;
	top: -100px;
	z-index: 1000;
	padding: 10px 16px;
	border-radius: var(--at-radius-button);
	background: var(--at-green-deep);
	color: var(--at-white);
}

.at-skip-link:focus {
	top: 8px;
	color: var(--at-white);
	outline-color: var(--at-gold);
}

/* Brand lockup: official logo + live-text title and subtitle. */
.at-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border-radius: var(--at-radius-button);
	color: var(--at-green-deep);
	text-decoration: none;
}

.at-brand:hover {
	color: var(--at-green);
}

.at-brand__logo {
	display: block;
	flex: none;
}

.at-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.at-brand__title {
	font-size: 1.375rem;
	font-weight: 700;
	white-space: nowrap;
}

.at-brand__subtitle {
	margin-top: 3px;
	color: var(--at-text-muted);
	font-family: var(--at-font-en);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
}

/*
 * On the narrowest screens (320 px: a small phone, or a larger screen
 * zoomed to 400%) the name and the two header buttons did not fit and the
 * page scrolled sideways. The name is set a little smaller and the Latin
 * line under it is tightened.
 */
@media (max-width: 359px) {
	.at-header .at-brand {
		gap: 6px;
		min-width: 0;
	}

	.at-header .at-brand__logo {
		width: 44px;
		height: 44px;
	}

	.at-header .at-brand__title {
		font-size: 1.125rem;
	}

	.at-header .at-brand__subtitle {
		font-size: 0.5625rem;
		letter-spacing: 0.08em;
	}
}

/* 11. Entries ------------------------------------------------------------- */
.at-entry {
	margin-bottom: var(--at-space-7);
}

.at-entry__title a {
	color: inherit;
	text-decoration: none;
}

.at-entry__title a:hover {
	color: var(--at-green);
}

.at-empty {
	color: var(--at-text-muted);
}

/* 12. Utilities and motion ------------------------------------------------ */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

.at-text-muted {
	color: var(--at-text-muted);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}