/*
Theme Name: Devika
Description: A news and magazine theme built around Devika Elements. Fast, no framework, no jQuery, no webfont.
Version: 0.2.0
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: devika
*/

/*
 * ## No webfont, and that is a decision rather than an omission
 *
 * A webfont is two more requests, 60–120 KB, and either a flash of invisible
 * text or a reflow when it lands — on a site whose whole argument is that it
 * loads fast, and whose readers are on Indian mobile networks.
 *
 * The stack below names the system's own face on every platform and adds
 * `Noto Sans Devanagari` / `Noto Serif Devanagari`, which is installed on
 * Android and Windows. Hindi renders in a face designed for it, and it costs
 * nothing.
 *
 * A client who wants a specific face can add it. Nothing here prevents that;
 * it is simply not the default, because the default is what every site pays.
 *
 * ## Colours are declared once, as tokens
 *
 * `theme.json` owns the palette, so the editor and the front end cannot
 * disagree about what "accent" is. This file reads its custom properties and
 * never restates a hex code.
 *
 * ## Dark mode has three states, not two
 *
 * `data-theme` set by the toggle wins in both directions; with no attribute,
 * `prefers-color-scheme` decides. A design that only handles the media query
 * cannot be switched back to light on a device set to dark.
 */

:root {
	--ink:    var(--wp--preset--color--ink);
	--body:   var(--wp--preset--color--body);
	--muted:  var(--wp--preset--color--muted);
	--line:   var(--wp--preset--color--line);
	--wash:   var(--wp--preset--color--wash);
	--page:   var(--wp--preset--color--page);
	--accent: var(--wp--preset--color--accent);
	--link:   var(--wp--preset--color--link);

	--gap:  var(--wp--preset--spacing--30);
	--gap2: var(--wp--preset--spacing--40);
	--gap3: var(--wp--preset--spacing--50);
	--wrap: 72rem;
	--read: 42rem;
	--radius: 4px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--ink:   #f2f4f6;
		--body:  #cdd4db;
		--muted: #8b96a2;
		--line:  #2a3138;
		--wash:  #171b1f;
		--page:  #0f1215;
		--link:  #7ab3f5;
		--accent:#ff4d70;
	}
}
:root[data-theme="dark"] {
	--ink:   #f2f4f6;
	--body:  #cdd4db;
	--muted: #8b96a2;
	--line:  #2a3138;
	--wash:  #171b1f;
	--page:  #0f1215;
	--link:  #7ab3f5;
	--accent:#ff4d70;
}

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

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

body {
	margin: 0;
	background: var(--page);
	color: var(--body);
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.65;
	/* The theme is painted before the toggle's script runs; without this the
	   page flashes light for one frame on a dark device. */
	transition: none;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--wp--preset--font-family--head);
	color: var(--ink);
	line-height: 1.2;
	margin: 0 0 var(--gap);
	text-wrap: balance;
}
h1 { font-size: var(--wp--preset--font-size--3xl); }
h2 { font-size: var(--wp--preset--font-size--2xl); }
h3 { font-size: var(--wp--preset--font-size--xl); }

p, ul, ol, blockquote, figure, table { margin: 0 0 var(--gap2); }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

/* Every interactive thing shows where the keyboard is. A theme that hides this
   is unusable without a mouse, and it is the single most common failure. */
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

img, video, iframe { max-width: 100%; height: auto; }
picture { display: contents; }

/* ---------- layout ---------- */

.devika-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gap2); }

.devika-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gap3);
	padding: var(--gap3) 0;
}
@media (min-width: 62rem) {
	.devika-layout { grid-template-columns: minmax(0, 1fr) 18rem; }
}

.devika-content { min-width: 0; }
.devika-article .devika-body { max-width: var(--read); }

.devika-skip {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--page); color: var(--ink);
	padding: var(--gap) var(--gap2); border: 2px solid var(--accent);
}
.devika-skip:focus { left: 0; }

/* ---------- header ---------- */

.devika-header { border-bottom: 1px solid var(--line); background: var(--page); }
.devika-header .devika-wrap {
	display: flex; align-items: center; gap: var(--gap2);
	min-height: 4rem; flex-wrap: wrap;
}

.devika-brand { margin: 0; font-family: var(--wp--preset--font-family--head); font-size: 1.5rem; font-weight: 700; }
.devika-brand a { color: var(--ink); text-decoration: none; }

.devika-tools { margin-left: auto; display: flex; align-items: center; gap: var(--gap); }

.devika-nav { border-bottom: 1px solid var(--line); background: var(--page); }
.devika-nav ul {
	list-style: none; margin: 0; padding: 0;
	display: flex; gap: var(--gap2); overflow-x: auto;
	scrollbar-width: none;
}
.devika-nav ul::-webkit-scrollbar { display: none; }
.devika-nav li { flex: 0 0 auto; }
.devika-nav a {
	display: block; padding: .7rem 0; color: var(--ink);
	text-decoration: none; font-size: var(--wp--preset--font-size--sm);
	font-weight: 600; letter-spacing: .01em; white-space: nowrap;
	border-bottom: 2px solid transparent;
}
.devika-nav a:hover, .devika-nav .current-menu-item > a { border-bottom-color: var(--accent); }

.devika-btn {
	background: none; border: 1px solid var(--line); color: var(--body);
	border-radius: var(--radius); padding: .35rem .6rem;
	font: inherit; font-size: var(--wp--preset--font-size--sm);
	cursor: pointer; line-height: 1;
}
.devika-btn:hover { border-color: var(--muted); }

.devika-langs { display: flex; gap: .4rem; font-size: var(--wp--preset--font-size--sm); }
.devika-langs a { color: var(--muted); text-decoration: none; }
.devika-langs a[aria-current] { color: var(--ink); font-weight: 700; }

/* ---------- listings ---------- */

.devika-section { margin: 0 0 var(--gap3); }
.devika-section-head {
	display: flex; align-items: baseline; gap: var(--gap);
	border-bottom: 2px solid var(--ink); margin: 0 0 var(--gap2); padding-bottom: .35rem;
}
.devika-section-head h2 { margin: 0; font-size: var(--wp--preset--font-size--xl); }
.devika-section-head a { margin-left: auto; font-size: var(--wp--preset--font-size--sm); }

.devika-grid { display: grid; gap: var(--gap2); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.devika-list { display: grid; gap: var(--gap2); }

.devika-card { margin: 0; }
.devika-card h2, .devika-card h3 { font-size: var(--wp--preset--font-size--lg); margin: 0 0 .3rem; }
.devika-card a { color: var(--ink); text-decoration: none; }
.devika-card a:hover { color: var(--link); text-decoration: underline; }
.devika-card p { margin: 0; color: var(--muted); font-size: var(--wp--preset--font-size--sm); }

/* The ratio is on the wrapper, so the space is held before the image arrives.
   Without it every card jumps as its picture loads. */
.devika-thumb {
	display: block; margin: 0 0 .6rem;
	aspect-ratio: 16 / 9; background: var(--wash);
	border-radius: var(--radius); overflow: hidden;
}
.devika-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.devika-meta {
	font-size: var(--wp--preset--font-size--xs); color: var(--muted);
	display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
}
.devika-kicker {
	color: var(--accent); font-weight: 700; text-transform: uppercase;
	letter-spacing: .05em; font-size: var(--wp--preset--font-size--xs);
	text-decoration: none;
}

/* The lead story: bigger, and only where there is room for it to be bigger. */
.devika-lead .devika-thumb { aspect-ratio: 2 / 1; }
.devika-lead h2 { font-size: var(--wp--preset--font-size--2xl); }
@media (min-width: 48rem) {
	.devika-lead h2 { font-size: var(--wp--preset--font-size--3xl); }
}

/* ---------- article ---------- */

.devika-article h1 { margin-bottom: var(--gap); }
.devika-byline {
	display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
	color: var(--muted); font-size: var(--wp--preset--font-size--sm);
	margin: 0 0 var(--gap2); padding-bottom: var(--gap);
	border-bottom: 1px solid var(--line);
}
.devika-body { font-size: var(--wp--preset--font-size--lg); }
.devika-body h2 { margin-top: var(--gap3); }
.devika-body h3 { margin-top: var(--gap2); }
.devika-body img { border-radius: var(--radius); }
.devika-body blockquote {
	border-left: 3px solid var(--accent); margin-left: 0;
	padding: .2rem 0 .2rem var(--gap2); color: var(--ink);
}
.devika-body figcaption { font-size: var(--wp--preset--font-size--xs); color: var(--muted); margin-top: .4rem; }
.devika-body pre {
	background: var(--wash); padding: var(--gap2); border-radius: var(--radius);
	overflow-x: auto; font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--sm);
}
.devika-body table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.devika-body th, .devika-body td { border: 1px solid var(--line); padding: .5rem .7rem; text-align: left; }

.devika-author-box {
	display: flex; gap: var(--gap2); align-items: flex-start;
	background: var(--wash); padding: var(--gap2); border-radius: var(--radius);
	margin: var(--gap3) 0;
}
.devika-author-box img { border-radius: 50%; flex: 0 0 auto; }

/* ---------- sidebar ---------- */

.devika-sidebar { min-width: 0; }
.devika-widget { margin: 0 0 var(--gap3); }
.devika-widget-title {
	font-size: var(--wp--preset--font-size--sm); text-transform: uppercase;
	letter-spacing: .06em; border-bottom: 2px solid var(--ink);
	padding-bottom: .3rem; margin: 0 0 var(--gap);
}
.devika-widget ul { list-style: none; padding: 0; margin: 0; }
.devika-widget li { padding: .45rem 0; border-bottom: 1px solid var(--line); }
.devika-sticky { position: sticky; top: var(--gap2); }

/* ---------- footer ---------- */

.devika-footer {
	border-top: 1px solid var(--line); background: var(--wash);
	margin-top: var(--gap3); padding: var(--gap3) 0;
	font-size: var(--wp--preset--font-size--sm); color: var(--muted);
}
.devika-footer ul { list-style: none; display: flex; gap: var(--gap2); flex-wrap: wrap; padding: 0; margin: 0 0 var(--gap); }
.devika-footer a { color: var(--body); }

/* ---------- pagination, search, forms ---------- */

.wp-block-query-pagination, .devika-pagination, .nav-links {
	display: flex; gap: .4rem; flex-wrap: wrap; margin: var(--gap3) 0;
}
.nav-links .page-numbers {
	display: inline-block; padding: .4rem .7rem; border: 1px solid var(--line);
	border-radius: var(--radius); text-decoration: none; color: var(--body);
}
.nav-links .page-numbers.current { background: var(--ink); color: var(--page); border-color: var(--ink); }

input[type="search"], input[type="text"], input[type="email"], input[type="url"], textarea, select {
	font: inherit; color: var(--body); background: var(--page);
	border: 1px solid var(--line); border-radius: var(--radius); padding: .45rem .6rem;
	max-width: 100%;
}
.search-form { display: flex; gap: .4rem; }
.search-form label { flex: 1 1 auto; }
.search-form input[type="search"] { width: 100%; }
.search-form input[type="submit"] {
	font: inherit; cursor: pointer; padding: .45rem .8rem;
	background: var(--ink); color: var(--page); border: 0; border-radius: var(--radius);
}

/* ---------- Elements ---------- */

.devika-element { margin: var(--gap2) 0; }
.devika-element--sticky_bottom {
	position: sticky; bottom: 0; z-index: 40;
	background: var(--page); border-top: 1px solid var(--line);
	margin: 0; padding: var(--gap) 0;
}
.devika-element--before_header, .devika-element--after_footer { margin: 0; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}