/* ============================================================
   GMA Blog Blocks — design tokens and named layouts
   ============================================================

   Loaded before every block stylesheet. Two jobs:

   1. Carry the site's design decisions as tokens, so a block never names a
      raw hex or font stack. The values are not invented here — they are the
      ones the rest of gmajewellers.lk is already built on, read out of the
      Elementor kit (post 3415) and the home page's compiled CSS:
      black, cream #FFFAED, gold #DFAF00, and Montserrat.

      Before this file the blocks asked for 'Plus Jakarta Sans' and 'Poppins',
      neither of which the site loads at all, so every heading and label fell
      back to a system sans — the single biggest reason the blog did not look
      like the rest of the site. They also used #b08d57, a muted bronze that
      appears nowhere else on the site, where the brand gold is #DFAF00.

   2. Own the page width in ONE place. `.article-wrapper` and
      `.article-hero__content-overlay` each retyped
      `width: 90vw; max-width: var(--theme-normal-container-max-width, 1400px)`,
      which is exactly how two containers drift apart without anything looking
      broken. Markup now asks for `.gma-container` by name instead.
   ============================================================ */

:root {
	/* ---- Palette ------------------------------------------ */
	--gma-ink: #000000;
	--gma-ink-soft: #555555;
	--gma-ink-muted: #8a8a8a;

	--gma-cream: #fffaed;
	/* One step down from cream, for surfaces that must read as raised against it. */
	--gma-cream-deep: #f6efdc;

	--gma-gold: #dfaf00;
	/* The site uses #DFAF00BA (~73% alpha) over dark; this is that, flattened,
	   for hover states where a translucent fill would muddy the text under it. */
	--gma-gold-deep: #a88500;

	--gma-white: #ffffff;
	--gma-border: rgba(0, 0, 0, 0.08);
	--gma-border-strong: rgba(0, 0, 0, 0.14);

	/* The dark panel the CTA sits on — black, warmed toward the gold so it
	   belongs to this palette rather than reading as a neutral grey box. */
	--gma-panel: linear-gradient(131.75deg, #000000 0%, #2a2112 100%);

	/* ---- Type --------------------------------------------- */
	/* Montserrat is already enqueued site-wide by the theme, at 400/500/600/700 —
	   this file deliberately does NOT load a second copy. */
	--gma-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	/*
	 * The scale below is NOT invented. It is Blocksy's own typography settings,
	 * read out of uploads/blocksy/css/global.css — the same rules that govern
	 * every other page on the site, including the body of these very articles.
	 * Matching it is the whole point: the blocks were using a scale of their own
	 * (700/800 weights, 11-13px labels, tight line-heights) that belonged to no
	 * other page.
	 *
	 * Theme values, for reference:
	 *   root  Montserrat 400 / 16px / 1.65 / no transform / 0 tracking
	 *   h1-h6 Montserrat 500 / 40 35 30 25 20 16px / 1.5
	 *   meta  600 / 12px / 1.65 / UPPERCASE
	 *   crumb 500 / 14px / no transform
	 *
	 * These --gma-h* values are kept for reference and for anything that should sit
	 * on the theme's own ladder, but note that the ARTICLE headings no longer use
	 * them: the theme's 35px h2 and 30px h3 came out larger than the 25px hero
	 * title above them, so the page had no hierarchy. Headings are on the home
	 * page's display ladder instead — see --gma-display-* below.
	 */
	--gma-weight-heading: 500;
	--gma-weight-meta: 600;

	--gma-lh-heading: 1.5;
	--gma-lh-body: 1.65;
	--gma-lh-tight: 1.3;

	--gma-h1: 40px;
	--gma-h4: 25px;
	--gma-h5: 20px;
	--gma-h6: 16px;

	--gma-text: 16px;
	--gma-text-sm: 14px;
	--gma-text-meta: 12px;

	/*
	 * Display headings — the home page's section-heading treatment, lifted from
	 * post-3072.css: 25px / 400 / UPPERCASE / 3.4px tracking / 35px leading,
	 * stepping down to 22px then 18px at its breakpoints. The clamp reproduces
	 * that curve continuously.
	 *
	 * This is a DISPLAY style, not the theme h1 — deliberately smaller and
	 * wider-tracked than a normal heading. It governs the hero headings here and,
	 * via --gma-display-size-2/-3 below, the article's own H2s and H3s too.
	 */
	--gma-display-size: clamp(18px, 1.8vw, 25px);
	--gma-display-weight: 400;
	--gma-display-tracking: 3.4px;
	--gma-display-lh: 1.4;

	/*
	 * The two steps below the hero, for the article's own section headings.
	 * The theme gives these 35px and 30px, which next to a 25px hero title is
	 * both out of order and far heavier than anything on the home page — that is
	 * the "too big" everyone sees.
	 *
	 * The home page's own secondary steps are 22px and 18px, with tracking
	 * easing off as the size drops (3.4px -> 2px). Weight rises as size falls
	 * (400 -> 500) so an H3 still reads as a heading at 18px without needing to
	 * be large.
	 */
	--gma-display-size-2: clamp(18px, 1.6vw, 22px);
	--gma-display-size-3: clamp(16px, 1.2vw, 18px);
	--gma-display-weight-3: 500;
	--gma-display-tracking-sm: 2px;

	/* Meta labels carry the site's only standing tracking — the theme's own
	   entry-meta rule. Buttons borrow it so they read as site furniture. */
	--gma-tracking-meta: 0.06em;

	/* ---- Layout ------------------------------------------- */
	/* Deferred to Blocksy so the blocks line up with every other section on the
	   site, and move if the theme setting moves. */
	--gma-width-page: var(--theme-normal-container-max-width, 1400px);

	/* max() rather than clamp(): below the page width this reproduces the old
	   90vw exactly, and it still guarantees a real gutter on a narrow phone. */
	--gma-gutter: max(20px, 5vw);

	/* Reading measure for running prose. Headlines do NOT use this — they should
	   fill their column; a hard px cap on a headline is how a title ends up
	   wrapping an extra time the moment the type scale changes. */
	--gma-measure-prose: 58ch;

	--gma-sidebar-width: 300px;
	--gma-column-gap: 40px;
	--gma-section-gap: 48px;

	/* How far below the viewport top a sticky sidebar parks, and how much room a
	   heading leaves for it when the TOC jumps to it. Kept together because they
	   are the same measurement seen from two directions — if one changes without
	   the other, anchors land under the header. */
	--gma-sticky-offset: 120px;
	--gma-scroll-offset: 100px;

	/* ---- Corners ------------------------------------------ */
	/* Squared off throughout, by decision on 2026-10-19. These stay as tokens
	   rather than being deleted from the call sites so the whole system can be
	   given its corners back from here, in one edit, instead of hunting fifteen
	   declarations across seven stylesheets.
	   Previous values, if that is ever wanted: 14px / 20px / 100px / 50%. */
	--gma-radius: 0;
	--gma-radius-lg: 0;
	/* Was a pill; a 100px radius on a short label reads as a capsule. */
	--gma-radius-pill: 0;
	/* Was a circle, on the author avatar and its placeholder. */
	--gma-radius-round: 0;
	/* Small incidentals: the related-articles thumbnail, the TOC dot. */
	--gma-radius-sm: 0;

	/* The article hero's floor. Its image column is absolutely positioned and so
	   contributes no height, which means without this the hero is only as tall as
	   its text and there is no space to centre that text in. */
	--gma-hero-min-height: 520px;
}

/* ============================================================
   Named layouts
   ============================================================ */

/*
 * The page container. Everything full-width on an article asks for this by name
 * rather than restating a width and a gutter.
 *
 * `width: min(100% - gutter*2, page)` instead of max-width plus padding, so the
 * content reaches its full measure as soon as the viewport can afford the
 * gutters, rather than the padding eating into it at every size.
 */
.gma-container {
	width: min(100% - var(--gma-gutter) * 2, var(--gma-width-page));
	margin-inline: auto;
	box-sizing: border-box;
}

/* ============================================================
   Shared primitives
   ============================================================ */

/*
 * The site's label style: 12px, 600, uppercase. This is the theme's entry-meta
 * rule, which is what dates, categories and tags already look like on every
 * archive and post card — so a date in our hero now matches a date in a
 * Blocksy listing instead of being a slightly different small grey text.
 */
.gma-meta {
	font-family: var(--gma-font);
	font-size: var(--gma-text-meta);
	font-weight: var(--gma-weight-meta);
	text-transform: uppercase;
	letter-spacing: var(--gma-tracking-meta);
	line-height: var(--gma-lh-tight);
}

/*
 * The home page's section-heading treatment. Hero headings ask for this by name
 * so the blog's display type is the same object as the home page's, not a second
 * copy of its values that can drift.
 */
.gma-display {
	font-family: var(--gma-font);
	font-size: var(--gma-display-size);
	font-weight: var(--gma-display-weight);
	text-transform: uppercase;
	letter-spacing: var(--gma-display-tracking);
	line-height: var(--gma-display-lh);
	/* The full shorthand, not just margin-right: the block rules declare
	   `margin: 0` and load after this file, so a lone margin-right here would be
	   silently reset by their shorthand. Owning all four sides avoids that.
	   The negative right pulls back the trailing gap tracking leaves after the
	   last glyph, which otherwise reads as a mis-aligned line. */
	margin: 0 calc(var(--gma-display-tracking) * -1) 0 0;
}

/* The pill used for a category on the hero and a tag in listings. */
.gma-pill {
	display: inline-block;
	width: fit-content;
	white-space: nowrap;
	padding: 5px 16px;
	border-radius: var(--gma-radius-pill);
}

/* A card surface: cream, hairline border, square corners. The border does more
   work now that there is no radius to separate the card from the page. */
.gma-card {
	background: var(--gma-cream);
	border: 1px solid var(--gma-border);
	border-radius: var(--gma-radius);
	padding: 24px;
	box-sizing: border-box;
}

/* The heading that opens a card, with its rule underneath. Theme h6: 16px/500. */
.gma-card__heading {
	font-family: var(--gma-font);
	font-size: var(--gma-h6);
	font-weight: var(--gma-weight-heading);
	color: var(--gma-ink);
	margin: 0 0 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--gma-border);
	line-height: var(--gma-lh-heading);
}