/* ==========================================================================
   Gertrudes — section title system (2026-08-23)
   --------------------------------------------------------------------------
   ONE branded treatment for every heading that opens a block of content, so
   the storefront stops mixing four sizes of Prata with a grey sans fallback.

   THREE LEVELS, AND ONLY THREE:

     1. PAGE   var(--gt-title-page)     Prata  clamp(26px, 3.2vw, 36px)
               One per page — the h1 that names it. Page head, search
               results, and the home welcome heading.

     2. SECTION var(--gt-title-section) Prata  clamp(22px, 2.4vw, 28px)
               Opens a band inside a page: product carousels, featured
               categories, testimonials, related products, delivery areas.

     3. CARD   var(--gt-title-card)     sans   17px / 700
               Inside a card or column. Deliberately NOT Prata — a serif at
               17px next to a serif at 28px reads as one level, not two.

   WHY THIS FILE EXISTS AT ALL
   `.block-title .title` (stylesheet.css:388) styles every module heading the
   theme ships, and it does so entirely through var(--heading-font),
   var(--heading-color) and var(--heading-font-weight). Those tokens live in
   plaza/theme_font.css, which is linked ONLY from the phone header — so on
   desktop all three lookups fail, the whole declaration is dropped, and those
   titles render as light-grey #888888 Open Sans at weight 400. That is why the
   home page reads as cluttered: custom blocks show large dark Prata titles,
   and the carousels between them show small grey sans ones.

   This file owns `.block-title` outright with literal values, so it renders
   identically on both headers regardless of whether theme_font.css loaded.

   LOAD ORDER
   Linked in common/header.twig and header_mobile.twig AFTER theme.css, so it
   beats stylesheet.css at equal specificity without needing !important.
   The `--gt-title-*` tokens are declared on :root here; sheets that load later
   (gtr-delivery.css and gtr-contact.css are body-<link>ed, gertrudes-info.css
   is addStyle-injected) consume them by name, so their own rules stay
   self-describing and no rule depends on source order to win.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */

:root {
	--gt-title-face: Prata, Georgia, "Times New Roman", serif;

	--gt-title-page: clamp(26px, 3.2vw, 36px);
	--gt-title-section: clamp(22px, 2.4vw, 28px);
	--gt-title-card: 17px;

	/* Warm near-black. Matches --gt-ink / --gtr-ink / --gd-ink, which the
	   section sheets each define locally; kept as its own name so a future
	   change to title colour cannot drag body copy along with it. */
	--gt-title-ink: #2f2a26;
	/* Eyebrow uses brand-strong, never --gt-brand (#e85224 fails AA at 12px). */
	--gt-title-eyebrow: #c73e12;
	--gt-title-lead: #6f6862;

	--gt-title-lh: 1.2;
	/* Prata is high-contrast; above ~26px it opens up and needs tightening. */
	--gt-title-ls: -0.01em;
}

/* 2. The shared component — .block-title ----------------------------------
   Markup the theme already ships (ptproducts, ptfeaturedcate, pttestimonial,
   ptblog, product.twig related). Structure, all three parts optional except
   the title:

       <div class="block-title">
         <p class="sub-title">EYEBROW</p>
         <div class="title"><span>Section Title</span></div>
         <p>Supporting sentence.</p>
       </div>

   Same shape as .gt-info__head in the custom welcome block, which is why the
   two can share one treatment.
   ------------------------------------------------------------------------- */

.block-title p.sub-title {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--gt-title-eyebrow);
}

/* Overrides stylesheet.css:388, which sets font-family/color/font-weight from
   the theme_font.css tokens that never resolve on desktop. Display and
   positioning are left alone — only the type is restated here. */
.block-title .title {
	margin: 0 0 6px;
	font-family: var(--gt-title-face);
	font-size: var(--gt-title-section);
	font-weight: 400;
	line-height: var(--gt-title-lh);
	letter-spacing: var(--gt-title-ls);
	/* was `capitalize`: it fought titles typed in sentence case in admin. */
	text-transform: none;
	color: var(--gt-title-ink);
}

.block-title .title + p {
	max-width: 62ch;
	margin: 0 auto;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--gt-title-lead);
}

/* .list-module and .nav-style-2 left-align their block titles (stylesheet.css
   :392, :432). Keep the lead flush with the title there rather than centred. */
.list-module .block-title .title + p,
.nav-style-2 .block-title .title + p {
	margin-left: 0;
	margin-right: 0;
}