/*
Theme Name: Mazari
Theme URI: https://novagirl.net
Author: Elle Mazari
Description: Black canvas, white tablets, masonry feed. Tablet by default.
Version: 1.1.1
Requires at least: 6.0
Requires PHP: 8.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mazari
*/

/* ---------------------------------------------------------------
   Tokens

   Every size on the site is fixed: identical on phone and desktop.
   The only thing that changes with screen width is the number of
   feed columns. If something ever needs to differ, it gets its own
   deliberate rule, not a clamp() tucked into a token.
   --------------------------------------------------------------- */

:root {
	--black:      #000;
	--tablet:     #fff;
	--ink:        #111;
	--ink-soft:   #55575c;
	--rule:       #e3e3e0;

	--gap:        12px;
	--radius:     14px;
	--radius-sm:  10px;
	--measure:    52rem;

	--sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mono: "Courier New", Courier, monospace;
}

/* ---------------------------------------------------------------
   Reset
   --------------------------------------------------------------- */

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

html {
	background: var(--black);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100dvh;
	background: var(--black);
	color: #eee;
	font: 16px/1.5 var(--sans);
}

/* max-width is a ceiling, not a size: an image never overflows its
   container and is otherwise left at exactly the size it was given.
   Iframes get the ceiling but keep their own height — height:auto
   on an iframe ignores its height attribute and collapses it to
   150px, which flattened every embed. */
img, video, svg, canvas, iframe {
	max-width: 100%;
	display: block;
}

img, video, svg, canvas { height: auto; }

a { color: inherit; }

button, input, select, textarea {
	font: inherit;
	color: inherit;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote {
	margin: 0;
}

/* ---------------------------------------------------------------
   Safe-area utilities — opt-in, never on body.
   --------------------------------------------------------------- */

.inset        { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.inset-top    { padding-top: env(safe-area-inset-top); }
.inset-right  { padding-right: env(safe-area-inset-right); }
.inset-bottom { padding-bottom: env(safe-area-inset-bottom); }
.inset-left   { padding-left: env(safe-area-inset-left); }

/* ---------------------------------------------------------------
   Accessibility
   --------------------------------------------------------------- */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

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

/* ---------------------------------------------------------------
   Shared components
   The white tablet and the search form appear on tablet pages, the
   404, and the archive and search heads above the feed, so they live
   here once rather than in any one layout's file.
   --------------------------------------------------------------- */

.tablet {
	--pad: 1rem;

	background: var(--tablet);
	color: var(--ink);
	border-radius: var(--radius);

	/* Tighter at the top than the sides: the first line of copy
	   wants to start close to the edge. */
	padding: calc(var(--pad) * 0.7) var(--pad) var(--pad);
	overflow: hidden;
}

.tablet-title {
	font-size: 1.75rem;
	line-height: 1.1;
	font-weight: 600;
	letter-spacing: -0.025em;
	color: var(--ink);
}

/* Title straight onto body copy, where there is no .tablet-head
   (archive and search heads, the 404). */
.tablet-title + .tablet-body { margin-top: 1rem; }

.searchform {
	display: flex;
	gap: 0.5rem;
}

.searchform input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--rule);
	border-radius: 999px;
	background: #fafaf8;
	color: var(--ink);
}

.searchform button {
	padding: 0.6rem 1.25rem;
	border: 0;
	border-radius: 999px;
	background: var(--black);
	color: #fff;
	cursor: pointer;
}

/* ---------------------------------------------------------------
   WordPress core alignments
   --------------------------------------------------------------- */

.aligncenter { clear: both; display: block; margin-inline: auto; }
.alignleft   { float: left;  margin-right: var(--gap); margin-bottom: var(--gap); }
.alignright  { float: right; margin-left: var(--gap);  margin-bottom: var(--gap); }

/* ---------------------------------------------------------------
   Video centering
   --------------------------------------------------------------- */

.wp-video {
	margin-inline: auto;
	max-width: 100%;
}

.wp-video video,
.wp-video .mejs-container {
	max-width: 100%;
}


/* ==============================================================
   CAPTIONS — THE ONLY CAPTION SYSTEM ON THE SITE

   This lives in style.css, which loads on every page, so captions
   behave the same way on posts, pages, archives, search and 404.

   Nothing else on the site styles captions. Do not move this,
   do not duplicate it, and do not add caption rules elsewhere.

   The rules:
   - A frame exists only to hold a caption. No caption, no frame.
   - The frame is always the opposite of what it sits on.
     On the black canvas (default template): one white card.
     Inside the white tablet (Tablet template, posts): a black
     frame with a white tablet for the caption, as before.
   ============================================================== */


/* --------------------------------------------------------------
   THE FIVE NUMBERS YOU CHANGE

   All caption tuning happens here. Nothing below needs editing.
   -------------------------------------------------------------- */

:root {
	--cap-radius:      10px;      /* roundness of the frame / card */
	--cap-radius-in:   8px;       /* roundness of the inner white tablet (Tablet template only) */
	--cap-sliver:      10px;      /* border showing around the image */
	--cap-gap:         10px;      /* space between image and caption */
	--cap-ink:         #6c757d;   /* caption text colour */
}


/* --------------------------------------------------------------
   The frame — white card by default (black canvas)

   width:fit-content sizes it to its contents — see the figcaption
   rule below for why the caption doesn't get a vote.

   !important because WordPress writes an inline style="width:Npx"
   onto .wp-caption, measured from the image and ignorant of the
   padding added here. An inline style outranks any stylesheet rule
   and this is the only way to take sizing back.
   -------------------------------------------------------------- */

figure:has(figcaption),
.wp-caption:has(.wp-caption-text) {
	background: var(--tablet);
	border-radius: var(--cap-radius);
	padding: var(--cap-sliver);

	display: flex;
	flex-direction: column;
	gap: var(--cap-gap);

	width: fit-content !important;
	max-width: 100%;
	margin: 2em auto;
}

/* Centred if the picture is narrower than the frame. */
figure:has(figcaption) img,
.wp-caption:has(.wp-caption-text) img {
	margin-inline: auto;
}


/* --------------------------------------------------------------
   The caption text — sits straight on the white card

   width:0 with min-width:100% is the whole trick, and it is worth
   understanding before touching it.

   fit-content on the frame above measures every child and takes
   the widest. Left alone, a caption's natural width is the entire
   sentence on one unbroken line — so a long caption dragged the
   frame out to full width while a short one didn't, and identical
   images ended up in different-sized boxes depending on how many
   words were typed underneath.

   width:0 removes the caption from that measurement entirely, so
   the frame is sized by the image and nothing else. min-width:100%
   then renders the caption across the full frame regardless, and
   the text wraps to as many lines as it needs.
   -------------------------------------------------------------- */

figcaption,
.wp-caption-text {
	width: 0;
	min-width: 100%;

	background: none;
	color: var(--cap-ink);
	padding: 0 5px;
	margin: 0;
	font-family: var(--mono);
	font-size: 1.1rem;
	line-height: 1.1;
	text-align: center;
}


/* --------------------------------------------------------------
   Inside the white tablet — the opposite

   On a white background a white card would vanish, so here the
   frame turns black and the caption gets its own white tablet.
   -------------------------------------------------------------- */

.tablet-body figure:has(figcaption),
.tablet-body .wp-caption:has(.wp-caption-text) {
	background: var(--black);
}

.tablet-body figcaption,
.tablet-body .wp-caption-text {
	background: var(--tablet);
	border-radius: var(--cap-radius-in);
	padding: 10px 5px;
}


/* --------------------------------------------------------------
   Galleries

   A gallery is a figure full of figures. The inner ones must not
   each grab their own frame stacked inside the outer one.
   -------------------------------------------------------------- */

figure figure {
	margin: 0;
	padding: 0;
	background: none;
	max-width: 100%;
}


/* ---------------------------------------------------------------
   Space between paragraphs on the Blank template (template-blank.php).
   The reset above zeroes paragraph margins; this puts a gap back
   below each paragraph only, never above, so the top stays flush.
   --------------------------------------------------------------- */

.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content blockquote {
	margin: 0 0 1.25em;
}