/*
Theme Name: Astro First Light
Theme URI: https://github.com/bs-dev-repo/Yudh
Author: Baibhav Singh
Description: A theme that gets out of the way. One column, no sidebar, no menu, no widgets — the reading is the page. Built for the astro plugins so their styles are not fighting a magazine theme for control of every button.
Version: 0.1.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astro-first-light
Tags: one-column, full-width-template, translation-ready
*/

/**
 * ---------------------------------------------------------------------------
 * Why this theme exists.
 *
 * The site ran on a magazine theme, and a magazine theme has opinions. It
 * painted every button on the page white — `.aft-default-mode button { color:
 * #fff }` — which turned the whole control surface of the app white on white,
 * and it forced `height: 38px` on buttons, which turned a round send button
 * into a wide pill. The plugins now defend themselves against that, but
 * defending is not the same as not being attacked: every new control is one
 * more thing to check against a stylesheet nobody here wrote.
 *
 * This theme has no header image, no menu, no sidebar, no widget areas, no
 * comments and no archive design, because the site is four landing pages, some
 * legal pages, and an app. Everything it does style, it styles inside
 * `:where()`, which contributes no specificity — so a plugin's own rules win
 * without needing a single `!important` on either side.
 * ---------------------------------------------------------------------------
 */

:root {
	--astro-paper: #faf7f2;
	--astro-card: #ffffff;
	--astro-ink: #252a44;
	--astro-ink-2: #4d5271;
	--astro-muted: #63687f;
	--astro-line: #e7dfd2;
	--astro-accent: #a4551f;
	--astro-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
	--astro-serif: Georgia, "Noto Serif", "Noto Serif Devanagari", "Times New Roman", serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--astro-paper);
	color: var(--astro-ink);
	font-family: var(--astro-sans);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

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

.astro-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.astro-site__main { flex: 1 0 auto; }

/* ---------- Masthead ---------- */

.astro-masthead {
	max-width: 1240px;
	margin: 0 auto;
	padding: 18px 16px 6px;
}

.astro-masthead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}

.astro-masthead__brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
	color: var(--astro-ink);
}

.astro-masthead__mark { color: var(--astro-accent); flex: 0 0 auto; }

.astro-masthead__text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.astro-masthead__name {
	font-family: var(--astro-serif);
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* The line that says what the site is. A name on its own tells a first-time
   visitor nothing, and this is the first thing on the page. */
.astro-masthead__tag {
	font-size: 0.78rem;
	color: var(--astro-muted);
}

/* ---------- Header links ---------- */

.astro-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.astro-nav__list :where(a) {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid var(--astro-line);
	border-radius: 999px;
	background: var(--astro-card);
	color: var(--astro-ink-2);
	font-size: 0.85rem;
	text-decoration: none;
}

.astro-nav__list :where(a:hover),
.astro-nav__list :where(.current-menu-item > a) {
	border-color: var(--astro-accent);
	color: var(--astro-accent);
}

@media (max-width: 600px) {
	.astro-masthead { padding-bottom: 10px; }
	.astro-nav__list { width: 100%; }
	.astro-nav__list :where(a) { padding: 5px 10px; font-size: 0.8rem; }
}

/* ---------- Prose pages ----------
   The legal pages and anything else written as ordinary content. Narrow
   measure, serif body, because these are read rather than skimmed. Everything
   is inside :where() so a plugin's own styles take precedence without a
   specificity fight. */

.astro-prose {
	max-width: 46rem;
	margin: 0 auto;
	padding: 24px 16px 48px;
}

.astro-prose__title {
	margin: 0 0 18px;
	font-family: var(--astro-serif);
	font-size: 1.7rem;
	font-weight: 600;
	line-height: 1.25;
}

.astro-prose :where(p, li) {
	color: var(--astro-ink-2);
	font-family: var(--astro-serif);
	font-size: 1.02rem;
}

.astro-prose :where(h2) {
	margin: 30px 0 10px;
	font-family: var(--astro-serif);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--astro-ink);
}

.astro-prose :where(h3) {
	margin: 22px 0 8px;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--astro-ink);
}

.astro-prose :where(a) { color: var(--astro-accent); }

.astro-prose :where(table) {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0;
	font-size: 0.95rem;
}

.astro-prose :where(th, td) {
	border: 1px solid var(--astro-line);
	padding: 9px 11px;
	text-align: left;
	vertical-align: top;
}

.astro-prose :where(th) { background: var(--astro-card); font-weight: 600; }

/* A landing page is the app plus its own sections; it brings its own width and
   padding, so the theme adds none. */
.astro-page--app { padding: 0; max-width: none; }

/* ---------- Footer ---------- */

.astro-footer {
	flex: 0 0 auto;
	border-top: 1px solid var(--astro-line);
	margin-top: 20px;
	padding: 18px 16px 26px;
	text-align: center;
	font-size: 0.85rem;
	color: var(--astro-muted);
}

.astro-footer :where(a) { color: var(--astro-muted); }

.astro-footer :where(a:hover) { color: var(--astro-accent); }

.astro-footer__line { margin: 0 0 6px; }

/* Visible only to a screen reader, and to anyone tabbing to the skip link. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;
	display: inline-block;
	padding: 10px 14px;
	background: var(--astro-card);
	color: var(--astro-ink);
}

@media (prefers-color-scheme: dark) {
	:root {
		--astro-paper: #15161d;
		--astro-card: #1e2029;
		--astro-ink: #ece7de;
		--astro-ink-2: #c7c1b6;
		--astro-muted: #9a958c;
		--astro-line: #33363f;
		--astro-accent: #e8a35f;
	}
}

/* ---------- Sign in, and the reader's own account ----------
   A visitor who paid needs one tap to check that the payment arrived and what
   is left of it; not finding that is the most common reason somebody who would
   have paid again asks for a refund instead. */

.astro-masthead__side {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin-left: auto;
}

.astro-masthead :where(.astro-masthead__signin, .astro-masthead__account) {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--astro-ink);
	border-radius: 999px;
	background: var(--astro-ink);
	color: var(--astro-paper);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.astro-masthead :where(.astro-masthead__signin:hover, .astro-masthead__account:hover) {
	background: transparent;
	color: var(--astro-ink);
}

.astro-masthead__signout {
	font-size: 0.82rem;
	color: var(--astro-muted);
	text-decoration: none;
}

.astro-masthead__signout:hover { color: var(--astro-accent); }

@media (max-width: 600px) {
	.astro-masthead__side { width: 100%; }
	.astro-masthead :where(.astro-masthead__signin, .astro-masthead__account) {
		padding: 7px 14px;
		font-size: 0.82rem;
	}
}