/*
Theme Name: Lombardo Lettering (Elementor)
Theme URI: https://lombardolettering.com/
Author: Vibe Local Marketing
Author URI: https://www.vibelocalmarketing.com/
Description: Slim companion theme for the Lombardo Lettering Elementor build. Carries the header, footer, navigation and blog templates that free Elementor cannot own (there is no Theme Builder without Pro), the brand colour/type presets in theme.json, and the ll-* component layer. Every colour and font is read from the Elementor Kit's global CSS variables, so Site Settings restyles the header and footer too.
Version: 1.17.1
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lombardo-lettering
Tags: business, custom-menu, custom-logo, full-width-template
*/

/*
   Colours and type come from the Elementor Kit, never from literals here.
   Elementor prints --e-global-color-<id> / --e-global-typography-<id>-* on
   every page; the fallbacks after the comma only apply if Elementor is
   deactivated, so the site degrades to readable rather than to unstyled.

   Changing a brand colour = Elementor > Site Settings > Global Colors.
   Nothing in this file needs editing to restyle the site.
*/

/*
 * Declared on body as well as :root: Elementor defines the Kit variables on
 * body (.elementor-kit-N), and a var() is resolved where it is declared — on
 * :root alone every token silently fell back to its literal, so Site Settings
 * never restyled the header, footer, blog or forms.
 */
:root, body {
  /*
   * Each variable reads the Elementor Kit global first (so Site Settings >
   * Global Colors restyles the header and footer too), then the theme.json
   * preset of the same colour, then a literal as the last resort. The Kit ids
   * are the theme.json slugs; the four system slots are primary (ink),
   * secondary (accent), text (text-mid) and accent (gold).
   */
  --ll-ink: var(--e-global-color-primary, var(--wp--preset--color--ink, #101113));
  --ll-accent: var(--e-global-color-secondary, var(--wp--preset--color--accent, #8B98CD));
  --ll-body: var(--e-global-color-primary, var(--wp--preset--color--ink, #101113));
  --ll-gold: var(--e-global-color-accent, var(--wp--preset--color--gold, #E8C547));
  --ll-page: var(--e-global-color-paper, var(--wp--preset--color--paper, #F2F2F3));
  --ll-card: var(--e-global-color-ink-text, var(--wp--preset--color--ink-text, #22242A));
  --ll-deep: var(--e-global-color-ink-soft, var(--wp--preset--color--ink-soft, #17191C));
  --ll-white: var(--e-global-color-white, var(--wp--preset--color--white, #FFFFFF));
  --ll-border: var(--e-global-color-ink-line, var(--wp--preset--color--ink-line, #2A2E34));
  --ll-steel: var(--e-global-color-text, var(--wp--preset--color--text-mid, #4A4D55));
  --ll-on-dark: var(--e-global-color-text-invert, var(--wp--preset--color--text-invert, #D4D5D8));
  --ll-muted-dark: var(--e-global-color-text-invert-muted, var(--wp--preset--color--text-invert-muted, #B3B4B8));
  --ll-muted: var(--e-global-color-text-muted, var(--wp--preset--color--text-muted, #56575C));
  --ll-nav: var(--e-global-color-cream, var(--wp--preset--color--cream, #E9E6E1));
  --ll-link: var(--e-global-color-accent-deep, var(--wp--preset--color--accent-deep, #414D8A));
  --ll-outline: var(--e-global-color-steel, var(--wp--preset--color--steel, #6B7078));
  --ll-border-lt: var(--e-global-color-line, var(--wp--preset--color--line, #DCDCDF));

  --ll-display: var(--e-global-typography-primary-font-family, "Oswald"), sans-serif;
  --ll-text:    var(--e-global-typography-text-font-family, "Barlow"), system-ui, sans-serif;

  --ll-radius: 3px;
  --ll-wrap: 1200px;
}

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

html, body { margin: 0; padding: 0; }

body {
  background: var(--ll-page);
  color: var(--ll-body);
  font-family: var(--ll-text);
  /* The "medium" step, which follows its Global Font through the Kit bridge. */
  font-size: var(--wp--preset--font-size--medium, 17px);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

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

h1, h2, h3, h4, h5, h6 { color: var(--ll-ink); }

a { color: var(--ll-link); text-decoration: none; }
a:hover { color: var(--ll-accent); }

input, select, textarea, button { font-family: var(--ll-text); }

/* Elementor owns the width of everything inside <main>. */
.ll-main { display: block; width: 100%; }

.ll-wrap { max-width: var(--ll-wrap); margin: 0 auto; padding: 0 18px; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.ll-skip:focus {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  background: var(--ll-accent); color: var(--ll-ink);
  padding: 10px 16px; border-radius: var(--ll-radius);
  width: auto; height: auto; clip: auto;
}

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

.ll-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--ll-ink);
  box-shadow: 0 1px 0 var(--ll-border);
}

.ll-announce {
  background: var(--ll-accent);
  color: var(--ll-ink);
  padding: 7px 18px;
  display: flex; justify-content: center; align-items: center;
  gap: 14px; flex-wrap: wrap;
  font-weight: 700; font-size: 12.5px;
  letter-spacing: .08em; text-transform: uppercase;
}
.ll-announce .sep { opacity: .45; }

.ll-headbar {
  max-width: var(--ll-wrap); margin: 0 auto;
  padding: 12px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

.ll-brand { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; }
.ll-brand img { height: 52px; width: auto; background: var(--ll-white); border-radius: var(--ll-radius); display: block; }
.ll-brand-name {
  display: block; font-family: var(--ll-display); font-weight: 600;
  font-size: 19px; color: var(--ll-white); text-transform: uppercase; line-height: 1.1;
}
.ll-brand-slogan {
  display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ll-gold); font-weight: 600; margin-top: 3px;
}

.ll-nav ul {
  list-style: none; display: flex; align-items: center; gap: 6px;
  margin: 0; padding: 0;
  font-family: var(--ll-display); font-size: 14.5px;
  letter-spacing: .06em; text-transform: uppercase; font-weight: 500;
}
.ll-nav a { color: var(--ll-nav); padding: 9px 11px; border-radius: var(--ll-radius); display: block; }
.ll-nav a:hover, .ll-nav a:focus-visible { color: var(--ll-gold); background: var(--ll-card); }
.ll-nav .current-menu-item > a { color: var(--ll-gold); }

.ll-nav li.menu-item-has-children { position: relative; }
.ll-nav .sub-menu {
  display: none; position: absolute; left: 0; top: 100%;
  margin: 0; padding: 10px 0 0; min-width: 270px; z-index: 70;
  text-transform: none; letter-spacing: .02em;
}
.ll-nav li.menu-item-has-children:hover > .sub-menu,
.ll-nav li.menu-item-has-children:focus-within > .sub-menu { display: block; }
.ll-nav .sub-menu li { background: var(--ll-deep); border-bottom: 1px solid var(--ll-border); list-style: none; }
.ll-nav .sub-menu li:first-child { background: var(--ll-ink); }
.ll-nav .sub-menu a { color: var(--ll-nav); font-size: 13.5px; padding: 11px 14px; }
.ll-nav .sub-menu a:hover { background: var(--ll-accent); color: var(--ll-ink); }

.ll-callbox {
  display: flex; flex-direction: column;
  background: var(--ll-card); border: 1px solid var(--ll-steel);
  color: var(--ll-white); padding: 7px 13px; line-height: 1.15;
  border-radius: var(--ll-radius); text-decoration: none;
}
.ll-callbox span { font-size: 10.5px; letter-spacing: .14em; color: var(--ll-gold); }
.ll-callbox strong { font-size: 16px; font-weight: 600; }
.ll-callbox:hover { border-color: var(--ll-accent); color: var(--ll-white); }

.ll-headcta { display: flex; align-items: center; gap: 10px; flex: none; }
@media (max-width: 1100px) { .ll-headcta { display: none; } }

/* Dropdown indicator on menu items that have a submenu. */
.ll-nav li.menu-item-has-children > a::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg); opacity: .7;
}

.ll-quotebtn {
  background: var(--ll-accent); color: var(--ll-ink);
  padding: 11px 16px; font-weight: 600; border-radius: var(--ll-radius);
  font-family: var(--ll-display); text-transform: uppercase; letter-spacing: .06em;
}
.ll-quotebtn:hover { background: var(--ll-white); color: var(--ll-ink); }

.ll-burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 48px; height: 48px; background: var(--ll-card);
  border: 1px solid var(--ll-steel); border-radius: var(--ll-radius);
  padding: 0 12px; cursor: pointer;
}
.ll-burger span { display: block; height: 2px; background: var(--ll-accent); }

.ll-mobnav {
  background: var(--ll-deep); border-top: 1px solid var(--ll-border);
  /* nav.js replaces this with the room actually left above the call bar. */
  max-height: 72vh; overflow: auto; padding: 12px 18px 22px;
  /* The list is longer than the panel. A soft edge says "there is more below"
     so the row at the fold reads as scrollable rather than chopped off. */
  box-shadow: inset 0 -22px 20px -20px rgba(0, 0, 0, .85);
}
.ll-mobnav[hidden] { display: none; }
.ll-mobnav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ll-mobnav .sub-menu { margin-top: 2px; padding-left: 12px; }
.ll-mobnav a {
  display: block; color: var(--ll-nav); padding: 14px 12px;
  border-radius: var(--ll-radius); background: var(--ll-card);
  font-family: var(--ll-display); text-transform: uppercase;
  letter-spacing: .05em; font-size: 15px; min-height: 48px;
}

@media (max-width: 1100px) {
  .ll-headbar > .ll-nav { display: none; }
  .ll-headbar > .ll-burger { display: flex; }
}

/* Elementor "Site Header" template (the fallback above uses the same look). */
.ll-header .ll-hdr-sep { opacity: .45; }
/* Header text lines take their own line height, not the body's. */
.ll-header .elementor-widget-heading .elementor-heading-title { display: block; }
.ll-header .ll-hdr-brand { text-decoration: none; min-width: 0; }
.ll-header .ll-hdr-logo img { width: auto; max-width: none; display: block; }
.elementor-widget-ll-nav-menu { min-width: 0; }
.ll-navw { display: flex; align-items: center; justify-content: var(--ll-nav-align, center); }
.ll-navw-empty { color: var(--ll-on-dark); font-size: 13px; margin: 0; }
.ll-header .ll-hdr-callbox { text-decoration: none; }
@media (max-width: 1100px) { .ll-header .ll-hdr-cta { display: none; } }
@media (max-width: 480px) {
  .ll-header .ll-hdr-logo img { height: 44px; }
}

/* Phone readability (client feedback, 19 Sep 2026): the theme's own small
   text — blog cards, post meta, the form note and the footer's fallback
   columns — is raised on handsets, matching the Global Fonts floor the
   Elementor content now uses. */
@media (max-width: 767px) {
  .ll-card p, .ll-footcols ul, .ll-footbrand p, .ll-footmeta { font-size: 16px; }
  .ll-card .meta, .ll-single .meta, .wpcf7 .ll-note { font-size: 14px; }
  .ll-card .more, .ll-legal, .ll-navw-empty { font-size: 14.5px; }
  .wpcf7 label { font-size: 15.5px; }
}

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

.ll-footer { background: var(--ll-ink); color: var(--ll-muted-dark); padding: 46px 0 0; }
.ll-footer a { color: var(--ll-on-dark); }
.ll-footer a:hover { color: var(--ll-gold); }
.ll-footcols {
  max-width: var(--ll-wrap); margin: 0 auto; padding: 0 18px 34px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px;
}
.ll-footcols h2 {
  font-family: var(--ll-display); font-size: 13px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--ll-white); margin: 0 0 12px;
}
.ll-footcols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 14.5px; }
.ll-footbrand img { height: 54px; width: auto; background: var(--ll-white); border-radius: var(--ll-radius); }
.ll-footbrand p { font-size: 14.5px; margin: 12px 0; }
.ll-footmeta { display: grid; gap: 5px; font-size: 14.5px; }
.ll-legal {
  border-top: 1px solid var(--ll-border); padding: 16px 18px;
  text-align: center; font-size: 13px; color: var(--ll-muted-dark);
}
@media (max-width: 900px) { .ll-footcols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ll-footcols { grid-template-columns: 1fr; } }

/* Elementor "Site Footer" template (the fallback above uses the same look). */
.ll-fnav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ll-navw.ll-navw--list { display: block; }
.ll-fnav a { display: block; color: var(--ll-on-dark); text-decoration: none; }
.ll-fnav a:hover, .ll-fnav a:focus-visible { color: var(--ll-gold); }
.ll-site-footer .ll-ftr-logo img { width: 100%; height: auto; display: block; }
.ll-site-footer .elementor-widget-text-editor p { margin: 0; }
.ll-site-footer .elementor-widget-heading .elementor-heading-title { display: block; }
.ll-site-footer .elementor-widget-heading a:hover { color: var(--ll-gold); }
/*
 * The footer band is dark, so the two greys meant for light backgrounds are
 * redefined here to their dark-background twin. Elementor resolves a global
 * where it is used, so a widget that asks for "text-faint" inside the footer
 * gets the readable grey without anything being overridden or !important.
 *
 * Why it is needed: a footer template saved before the greys were darkened
 * for accessibility still asks for text-faint, and that combination measured
 * 2.21:1 on the copyright line — a real failure the theme can head off.
 */
.ll-site-footer,
.ll-footer {
  --e-global-color-text-faint: var(--e-global-color-text-invert-muted, #C7C8CC);
  --e-global-color-text-muted: var(--e-global-color-text-invert-muted, #C7C8CC);
  --wp--preset--color--text-faint: var(--e-global-color-text-invert-muted, #C7C8CC);
  --wp--preset--color--text-muted: var(--e-global-color-text-invert-muted, #C7C8CC);
}

/*
 * Content links on a phone: bigger to touch, identical to look at.
 *
 * The town cards ("Open Newark"), the breadcrumbs and the links inside body
 * copy measured 17–20px tall — fine for a mouse pointer, about half what a
 * thumb wants. Vertical padding on an inline box grows the tappable area
 * without taking part in line layout, so the text does not move a pixel and
 * the paragraphs keep their rhythm. 14px each side puts every one of them
 * past 44px.
 */
@media (max-width: 767px) {
  .ll-main .elementor-widget-text-editor a,
  .ll-main .menu-item > a { padding-block: 14px; }
}

/*
 * Footer links on a phone.
 *
 * Every footer link measured 18–23px tall at 375px — a fine target for a
 * mouse, a poor one for a thumb (the usual guidance is ~44px). The links are
 * spaced, not restyled: the text keeps its size and the columns keep their
 * order, each link just carries its own vertical room. Desktop is untouched.
 */
@media (max-width: 767px) {
  .ll-site-footer .menu-item > a,
  .ll-site-footer .ll-footmeta a,
  .ll-site-footer .elementor-widget-text-editor a,
  /* The phone and e-mail in the Elementor footer are heading widgets, not
     menu items — they were the two links still at 18px. */
  .ll-site-footer .elementor-widget-heading a,
  .ll-footer .menu-item > a,
  .ll-footer .ll-footmeta a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 2px 0;
  }
  /* The address block is one paragraph of links; keep them on their own rows. */
  .ll-site-footer .ll-footmeta a,
  .ll-footer .ll-footmeta a { display: flex; }
}

/* The phone call/quote bar: hidden on wider screens, fixed to the bottom on
   phones. Doubled classes outrank Elementor's own display rule. */
.ll-site-footer .e-con.ll-stickybar-el { display: none; }
@media (max-width: 820px) {
  .ll-site-footer .e-con.ll-stickybar-el {
    display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  }
  .ll-template-preview .ll-site-footer .e-con.ll-stickybar-el { position: static; }
}

/* ------------------------------------------------- sticky mobile CTA bar */

.ll-stickybar { display: none; }
@media (max-width: 820px) {
  .ll-stickybar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: var(--ll-ink); border-top: 1px solid var(--ll-border);
    padding: 9px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px;
  }
  .ll-stickybar a {
    display: flex; align-items: center; justify-content: center; min-height: 50px;
    border-radius: var(--ll-radius); font-family: var(--ll-display);
    text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  }
  .ll-stickybar .s1 { background: var(--ll-accent); color: var(--ll-ink); }
  .ll-stickybar .s2 { background: var(--ll-card); border: 1px solid var(--ll-steel); color: var(--ll-white); }
  body { padding-bottom: 76px; }
}

/* ------------------------------------------------------------------ blog */

.ll-blog { max-width: 1100px; margin: 0 auto; padding: 44px 18px 60px; }
.ll-blog-head { margin-bottom: 30px; }
.ll-blog-head h1 {
  font-family: var(--ll-display); font-weight: 700; text-transform: uppercase;
  color: var(--ll-ink); font-size: var(--wp--preset--font-size--title, 54px); line-height: 1.05; margin: 0 0 10px;
}
.ll-blog-head p { color: var(--ll-muted); margin: 0; max-width: 680px; }

.ll-postgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .ll-postgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ll-postgrid { grid-template-columns: 1fr; } }

.ll-card {
  background: var(--ll-white); border: 1px solid var(--ll-border-lt);
  border-radius: var(--ll-radius); overflow: hidden; display: flex; flex-direction: column;
}
.ll-card:hover { border-color: var(--ll-accent); }
.ll-card img { width: 100%; height: 180px; object-fit: cover; display: block; }
.ll-card-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.ll-card h2, .ll-card .ll-card-title {
  font-family: var(--ll-display); font-size: var(--wp--preset--font-size--lead, 18px);
  line-height: 1.2; margin: 0; text-transform: uppercase; color: var(--ll-ink);
}
.ll-card .ll-card-title a { color: var(--ll-ink); }
.ll-card .ll-card-title a:hover { color: var(--ll-link); }
.ll-card .meta { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ll-muted); }
.ll-card p { margin: 0; font-size: 15.5px; }
.ll-card .more { margin-top: auto; font-weight: 600; font-family: var(--ll-display); text-transform: uppercase; letter-spacing: .06em; font-size: 13.5px; }

.ll-single { max-width: 780px; margin: 0 auto; padding: 44px 18px 60px; }
.ll-single h1 {
  font-family: var(--ll-display); font-weight: 700; color: var(--ll-ink);
  font-size: clamp(27px, 4.2vw, 40px); line-height: 1.1; margin: 0 0 12px;
}
.ll-single .meta { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ll-muted); margin-bottom: 26px; }
.ll-single .entry > * { margin: 0 0 18px; }
.ll-single .entry h2 { font-family: var(--ll-display); font-size: 25px; color: var(--ll-ink); margin: 32px 0 12px; line-height: 1.2; }
.ll-single .entry h3 { font-family: var(--ll-display); font-size: 19px; color: var(--ll-ink); margin: 26px 0 10px; }
.ll-single .entry ul, .ll-single .entry ol { padding-left: 22px; }
.ll-single .entry li { margin-bottom: 7px; }
.ll-single .entry blockquote {
  border-left: 3px solid var(--ll-accent); margin-left: 0;
  padding: 4px 0 4px 18px; color: var(--ll-muted);
}
.ll-single .entry img { border-radius: var(--ll-radius); }

.ll-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.ll-pagination .page-numbers {
  padding: 9px 14px; border: 1px solid var(--ll-border-lt);
  border-radius: var(--ll-radius); background: var(--ll-white); color: var(--ll-ink);
}
.ll-pagination .page-numbers.current { background: var(--ll-accent); border-color: var(--ll-accent); color: var(--ll-ink); font-weight: 700; }

.ll-prevnext { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; flex-wrap: wrap; }
.ll-prevnext a { font-weight: 600; }

/* --------------------------------------------------------- Contact Form 7 */

.wpcf7 { color: var(--ll-on-dark); }
.wpcf7 label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.wpcf7 input[type=text], .wpcf7 input[type=tel], .wpcf7 input[type=email],
.wpcf7 select, .wpcf7 textarea, .wpcf7 input[type=file] {
  width: 100%; padding: 12px; border-radius: var(--ll-radius);
  border: 1px solid var(--ll-steel); background: var(--ll-deep);
  color: var(--ll-white); font-size: 15.5px;
}
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus {
  outline: 2px solid var(--ll-accent); outline-offset: 1px;
}
.wpcf7 .ll-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .wpcf7 .ll-row { grid-template-columns: 1fr; } }
.wpcf7 input[type=submit] {
  background: var(--ll-accent); color: var(--ll-ink); border: 0;
  padding: 16px 24px; border-radius: var(--ll-radius); cursor: pointer;
  font-family: var(--ll-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: 15px; min-height: 52px; width: 100%;
}
.wpcf7 input[type=submit]:hover { background: var(--ll-white); }
.wpcf7 .ll-note { display: block; font-size: 12.5px; color: var(--ll-muted-dark); font-weight: 400; margin-top: 10px; }
.wpcf7-not-valid-tip { color: var(--ll-gold); font-size: 13px; font-weight: 600; }
.wpcf7 form .wpcf7-response-output {
  border-color: var(--ll-accent); color: var(--ll-on-dark);
  border-radius: var(--ll-radius); margin: 14px 0 0; padding: 12px 14px;
}

/* A form dropped onto a light band still needs readable labels. */
.ll-form-light .wpcf7 { color: var(--ll-body); }
.ll-form-light .wpcf7 input[type=text], .ll-form-light .wpcf7 input[type=tel],
.ll-form-light .wpcf7 input[type=email], .ll-form-light .wpcf7 select,
.ll-form-light .wpcf7 textarea, .ll-form-light .wpcf7 input[type=file] {
  background: var(--ll-white); color: var(--ll-ink); border-color: var(--ll-border-lt);
}

/* ------------------------------------------------------------------- 404 */

.ll-404 { max-width: 760px; margin: 0 auto; padding: 70px 18px 90px; text-align: center; }
.ll-404 h1 { font-family: var(--ll-display); font-size: clamp(30px, 5vw, 48px); color: var(--ll-ink); text-transform: uppercase; margin: 0 0 14px; }
.ll-404 p { color: var(--ll-muted); }
.ll-404 .ll-quotebtn { display: inline-block; margin-top: 18px; }


/* ------------------------------------------------------------ single post */

.ll-post-hero { background: var(--ll-ink); }
.ll-post-hero__inner {
  max-width: 860px; margin: 0 auto;
  padding: var(--wp--preset--spacing--80, 74px) 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.ll-post-hero__cat {
  font-family: var(--ll-text); font-size: var(--wp--preset--font-size--tiny, 12px);
  font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ll-accent); align-self: flex-start;
}
.ll-post-hero__cat:hover { color: var(--ll-white); }
.ll-post-hero__title {
  margin: 0; color: var(--ll-white);
  font-family: var(--ll-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--wp--preset--font-size--title, 54px); line-height: 1.05;
}
.ll-post-hero__date { color: var(--ll-muted-dark); font-size: 15.5px; }

.ll-post-thumb { max-width: 1200px; margin: 0 auto; padding: 0 18px; }
.ll-post-thumb img { width: 100%; height: auto; border-radius: var(--ll-radius); display: block; }

/*
 * The post's own sections are full-bleed bands with a 1200px inner group.
 * Article text reads badly at that width, so inside a post the inner group
 * is held to the same 860px measure the rest of the site uses for prose.
 */
.ll-post-body .wp-block-group.ll-w-1200 { max-width: 860px; }
.ll-post-body h2.wp-block-heading { font-size: var(--wp--preset--font-size--xx-large); }
/* Follows Global Fonts, like the rest of the content text. */
.ll-post-body .ll-table table { border-collapse: collapse; width: 100%; font-size: var(--wp--preset--font-size--compact, 15.5px); }
.ll-post-body .ll-table th,
.ll-post-body .ll-table td { padding: 10px 12px; border-bottom: 1px solid var(--ll-border-lt); vertical-align: top; }
.ll-post-body .ll-table th { font-family: var(--ll-display); text-transform: uppercase; letter-spacing: .04em; color: var(--ll-ink); }

.ll-post .ll-prevnext {
  max-width: 860px; margin: 0 auto; padding: 34px 18px 60px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.ll-post .ll-prevnext a { font-family: var(--ll-display); text-transform: uppercase; letter-spacing: .04em; }