/* ---------------------------------------------------------------------------
   AJC — base layer. Header, footer, typography and buttons, matched to the
   tokens lifted from The7. Component styles (the 13 shortcodes) land in
   Phase 3 as assets/css/components.css.
--------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ajc-body-bg);color:var(--ajc-ink);
  font:400 var(--ajc-base-size)/var(--ajc-base-lh) var(--ajc-font-body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ajc-accent)}
/* Underlined, because with links and body copy both in dark tones colour alone
   no longer distinguishes them — and colour alone never should. */
/* ⚠️ .entry-content is the BLOG POST body — it is not .page-content, and
   leaving it out meant every link in all 40 articles stayed The7 gold while
   the rest of the site had moved to the accent. */
.page-content a,.entry__body a,.entry-content a{color:var(--ajc-link);text-decoration:underline;text-underline-offset:2px}
.page-content a:hover,.entry__body a:hover,.entry-content a:hover{color:var(--ajc-accent);text-decoration-thickness:2px}

.wrap{max-width:var(--ajc-wrap);margin-inline:auto;box-sizing:border-box}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:#fff;padding:.75rem 1rem}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--ajc-highlight);outline-offset:2px}

h1,h2,h3,h4,h5,h6{
  font-family:var(--ajc-font-head);font-weight:var(--ajc-head-weight);
  color:var(--ajc-heading);margin:0 0 .6em;
}
h1{font-size:var(--ajc-h1-size);line-height:var(--ajc-h1-lh)}
h2{font-size:var(--ajc-h2-size);line-height:var(--ajc-h2-lh)}
h3{font-size:var(--ajc-h3-size);line-height:var(--ajc-h3-lh)}
h4{font-size:var(--ajc-h4-size);line-height:var(--ajc-h4-lh)}
h5{font-size:var(--ajc-h5-size);line-height:var(--ajc-h5-lh)}
h6{font-size:var(--ajc-h6-size);line-height:var(--ajc-h6-lh)}
@media (max-width:778px){ h1{font-size:32px;line-height:42px} }

.btn,.wp-block-button__link{
  display:inline-block;text-decoration:none;border:0;cursor:pointer;
  background:var(--ajc-btn-bg);color:var(--ajc-btn-color);
  font:var(--ajc-btn-weight) var(--ajc-btn-size)/var(--ajc-btn-lh) var(--ajc-btn-font);
  padding:14px 26px;border-radius:var(--ajc-radius);
  transition:opacity .15s ease;
}
.btn:hover{opacity:.88;color:var(--ajc-btn-color)}

/* ---------- top bar ---------- */
.top-bar{background:var(--ajc-header-bg);color:var(--ajc-menu);font-size:13px}
.top-bar__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  height:var(--ajc-topbar-h);padding-inline:var(--ajc-header-pad)}
.top-bar a{color:inherit;text-decoration:none}
.top-bar a:hover{color:#fff}
/* Live's phone glyph is an <i class="fa-fw">, and fa-fw's 1.28em fixed width is
   what separates it from the number. The inline SVG that replaces it has no
   such padding, so the icon sat flush against the first digit. */
.top-bar__tel{display:inline-flex;align-items:center;gap:.5em}
.top-bar__social{display:flex;gap:1.1rem;list-style:none;margin:0;padding:0;align-items:center}
.top-bar__social a{display:block;line-height:0;opacity:.85}
.top-bar__social a:hover{opacity:1}

/* ---------- header ----------
   Sticky, matching The7's phantom header: the 36px top bar scrolls away and the
   branding row pins to the top, shrinking from 90px to 60px. .is-stuck is set
   by main.js once the top bar has passed. */
.header{background:var(--ajc-header-bg);color:var(--ajc-menu);
  position:sticky;top:0;z-index:100}
.header.is-stuck{box-shadow:0 1px 8px rgba(0,0,0,.22)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;
  height:var(--ajc-header-h);padding-inline:var(--ajc-header-pad);
  transition:height .2s ease}
.header.is-stuck .header__inner{height:var(--ajc-header-h-stuck,60px)}
@media (prefers-reduced-motion:reduce){ .header__inner{transition:none} }
.branding{display:flex;align-items:center;gap:1rem}
.ajc-social{display:block}
.branding__logo{display:block;line-height:0}
.branding__logo img{width:150px;height:40px;object-fit:contain}


.nav__list{display:flex;align-items:center;gap:1.6rem;list-style:none;margin:0;padding:0}
.nav__list a{
  color:var(--ajc-menu);text-decoration:none;
  font:400 var(--ajc-menu-size)/1.4 var(--ajc-font-body);
}
.nav__list a:hover,.nav__list .current-menu-item > a{color:#fff}
.nav__list li{position:relative}
.nav__list .sub-menu{
  position:absolute;left:0;top:100%;min-width:230px;z-index:50;
  background:var(--ajc-submenu-bg);list-style:none;margin:0;padding:.4rem 0;
  box-shadow:0 6px 24px rgba(0,0,0,.14);display:none;
}
.nav__list li:hover > .sub-menu,.nav__list li:focus-within > .sub-menu{display:block}
.nav__list .sub-menu a{
  display:block;padding:.5rem 1.1rem;color:var(--ajc-submenu);
  font-size:var(--ajc-submenu-size);
}
.nav__list .sub-menu a:hover{color:var(--ajc-accent);background:#f4f4f5}

/* ---------- mobile nav ---------- */
.nav-toggle{display:none;background:none;border:0;padding:.5rem;cursor:pointer}
.nav-toggle__bars,.nav-toggle__bars::before,.nav-toggle__bars::after{
  display:block;width:24px;height:2px;background:var(--ajc-menu);content:"";position:relative;
}
.nav-toggle__bars::before{position:absolute;top:-7px}
.nav-toggle__bars::after{position:absolute;top:7px}
.mobile-nav{background:var(--ajc-header-bg);border-top:1px solid rgba(255,255,255,.12)}
.mobile-nav__list,.mobile-nav__list .sub-menu{list-style:none;margin:0;padding:0}
.mobile-nav__list a{display:block;padding:.8rem var(--ajc-gutter);color:var(--ajc-menu);text-decoration:none}
.mobile-nav__list .sub-menu a{padding-left:calc(var(--ajc-gutter) * 2);font-size:var(--ajc-submenu-size)}

@media (max-width:990px){
  .nav{display:none}
  .nav-toggle{display:block}
}

/* ---------- footer ---------- */
.footer{background:var(--ajc-footer-bg);color:var(--ajc-footer);margin-top:0}
.footer__inner{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;min-height:60px;padding:10px 0;font-size:13px;
}
.footer p{margin:0}
.footer a{color:var(--ajc-footer)}
.footer a:hover{color:#fff}

/* ---------- editorial (blog posts — these carry no builder markup) ---------- */
/* Builder pages carry their own section padding and The7 emits
   #main{padding-top:0} inline for them — adding our own pushed every page ~40px
   down, which made every pixel band "differ" while looking almost identical. */
.main{padding:0}
.main--single,.main--list,.main--404{padding:40px 0 60px}
.entry__body p{margin:0 0 1.2em}
.entry__meta{color:#999;font-size:13px}
.post-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:2rem}
.card__title{font-size:var(--ajc-h4-size);line-height:var(--ajc-h4-lh);margin:.7rem 0 .4rem}
.card__title a{text-decoration:none}