/*
Theme Name: Lumos
Theme URI: https://lumosadvisory.com.au
Author: AGFY Tech Solutions
Description: Lumos Advisory. Brand Book v2.2 Grounded Editorial. Advisers, offices and insights are editable in the admin; the adviser finder, profile modals and document viewer read from that content rather than hardcoded data.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: Proprietary
Text Domain: lumos
*/

/* Lumos shared core.
   Tokens, reset, typography, nav, footer and buttons.
   Canonical definitions taken from the non-statutory pages, so the Formal Navy
   palette used on important-information and privacy-policy stays an override. */

:root {
  /* Brand Book v2.2 - Grounded Editorial.
     Sandstone is the page, Iron Bark is the ink, one Red Earth pop per page.
     Gum Leaf is a field, never a font. Navy marks the statutory pages only. */
  --sandstone: #E8DDD0;
  --iron-bark: #3A3028;
  --red-earth: #A0462A;
  --fig: #6B3050;
  --gum-leaf: #8C9E8A;
  --navy: #2C3160;

  /* Legacy token names, remapped so existing var() references resolve.
     --night is Iron Bark and --gold is Red Earth. */
  --night: #3A3028;
  --night-deep: #2A231D;
  --gold: #A0462A;
  --moss: #8C9E8A;
  --sky: #DDD2C4;
  --shadow: #232323;
  --cream: #E8DDD0;
  --warm-white: #F2EAE0;
  --parchment: #EDE3D7;
  --stone: #DED2C3;
  --blush: #E4D8C9;
  --lightgrey: #ABA196;

  --font-display: 'Spectral', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  --nav-h: 72px;
  --max-w: 1320px;

  --t-hero: clamp(3.6rem, 6vw, 6.8rem);
  --t-4xl: clamp(2.8rem, 4.5vw, 4.8rem);
  --t-3xl: clamp(2.3rem, 3.6vw, 3.8rem);
  --t-2xl: clamp(1.7rem, 2.6vw, 2.6rem);
  --t-xl: clamp(1.35rem, 1.9vw, 1.85rem);
  --t-lg: 1.4rem;
  --t-base: 1.1875rem;
  --t-sm: 1rem;
  --t-xs: 0.75rem;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --tr: 300ms var(--ease);
  --tr-slow: 600ms var(--ease);
}

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

html { scroll-behavior: smooth }

body { font-size: var(--t-base); line-height: 1.72; }

a { text-decoration: none; color: inherit }

ul { list-style: none }

img, svg { display: block }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 clamp(1.5rem, 4vw, 3.5rem) }

.eyebrow { font-family: var(--font-body); font-size: 14px; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; color: var(--moss); display: flex; align-items: center; gap: .75rem; margin-bottom: 0.625rem }

.eyebrow::before { content: none; }

.eyebrow::after { content: ""; display: block; width: 11px; height: 11px; margin-left: 0.7rem; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c0 6.6 5.4 12 12 12-6.6 0-12 5.4-12 12 0-6.6-5.4-12-12-12 6.6 0 12-5.4 12-12z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c0 6.6 5.4 12 12 12-6.6 0-12 5.4-12 12 0-6.6-5.4-12-12-12 6.6 0 12-5.4 12-12z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; flex-shrink: 0; opacity: 0.85; }

/* Two classes, not one, so the light variant survives a page stylesheet that
   redefines plain .eyebrow. Those load after the core, and at equal
   specificity the later rule won, turning white hero eyebrows Red Earth. */
.eyebrow.eyebrow-light { color: rgba(255, 255, 255, .55) }

.eyebrow.eyebrow-light::before { background: rgba(255, 255, 255, .4) }

#nav { z-index: 1000 !important; }

.nav-inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h) }

.nav-logo { display: flex; align-items: center; text-decoration: none; }

.nav-logo-img { height: 30px; width: auto; transition: opacity var(--tr); }

.nav-logo:hover .nav-logo-img { opacity: 0.8; }

.nav-links { display: flex; align-items: center; gap: 2rem }

.nav-links li { position: relative }

.nav-links a { font-size: .95rem; color: var(--shadow); transition: color var(--tr); display: flex; align-items: center; gap: .3rem }

.nav-links > li > a { position: relative; }

.nav-links > li > a::before { content: ''; position: absolute; inset: -7px -12px; border-radius: 9px; background: linear-gradient(120deg, rgba(214, 180, 122, 0.22), rgba(160, 70, 42, 0.16)); opacity: 0; transition: opacity 250ms var(--ease); z-index: -1; }

.nav-links > li > a:hover::before, .nav-links > li > a:focus-visible::before { opacity: 1; }

.nav-dropdown a { transition: background 250ms var(--ease), color 250ms var(--ease); }

.nav-dropdown a:hover { background: linear-gradient(120deg, rgba(214, 180, 122, 0.28), rgba(160, 70, 42, 0.14)); }

.nav-links a:hover { color: var(--night) }

.nav-chevron { transition: transform var(--tr) }

.nav-links li:hover .nav-chevron { transform: rotate(180deg) }

.nav-dropdown { top: calc(100% + 10px) !important; }

.nav-links li:hover .nav-dropdown { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0) }

.nav-dropdown-label { font-size: .65rem; letter-spacing: .22em; text-transform: uppercase; color: var(--moss); padding: .25rem 1.25rem .75rem; display: block; border-bottom: 1px solid var(--stone); margin-bottom: .5rem }

.nav-cta { font-size: .87rem; font-weight: 500; letter-spacing: .04em; border: 1px solid rgba(58, 48, 40, .4); color: var(--night) !important; padding: .6rem 1.25rem; border-radius: 8px; transition: background var(--tr), color var(--tr) }

.nav-cta:hover { background: var(--night); color: #fff !important }

.nav-links>li>a.nav-active { position: relative; }

.nav-links>li>a.nav-active::after { content: ''; position: absolute; bottom: -6px; left: 0; right: 0; height: 2px; background: #A0462A; }

.nav-dropdown-active { color: #A0462A !important; font-weight: 500 !important; }

.mobile-nav a.mobile-active { color: #fff !important; }

.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px }

.hamburger span { display: block; width: 24px; height: 1.5px; background: var(--shadow); transition: var(--tr) }

.mobile-overlay { z-index: 9000 !important; }

.mobile-overlay.open { transform: translateX(0) }

.mobile-overlay-top { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); border-bottom: 1px solid rgba(255, 255, 255, .1) }

.mobile-overlay .nav-logo-img { filter: brightness(0) invert(1); }

.mobile-close { background: none; border: none; color: #fff; font-size: 1.4rem; cursor: pointer }

.mobile-nav { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: .25rem }

.mobile-nav a { font-family: var(--font-display); font-size: clamp(1.8rem, 6vw, 2.4rem); font-weight: 300; color: rgba(255, 255, 255, .9); padding: .5rem 0; border-bottom: 1px solid rgba(255, 255, 255, .06); transition: color var(--tr) }

.mobile-nav a:hover { color: #fff }

.mobile-cta { padding-top: 1.5rem }

.mobile-cta a { display: block; text-align: center; background: var(--cream); color: var(--night); padding: 1rem; border-radius: 8px; font-size: 0.95rem }

.nav-dropdown::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; background: transparent; }

.nav-links li.hover-open .nav-dropdown { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }

.btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-body); font-size: .82rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding: .9rem 1.75rem; border-radius: 8px; cursor: pointer; border: none; transition: background var(--tr), color var(--tr), transform 200ms }

.btn:hover { transform: translateY(-1px) }

.btn-solid { background: #fff; color: var(--night) }

.btn-solid:hover { background: var(--sky) }

#hero { align-items: flex-start !important; padding-top: calc(var(--nav-h) + clamp(3.5rem, 6vw, 6rem)) !important; padding-bottom: clamp(4rem, 7vw, 6rem) !important; min-height: 560px !important; }

.hero-heading { font-family: var(--font-display); font-size: var(--t-hero); font-weight: 300; line-height: 1.05; color: #fff; margin-bottom: 1.5rem; max-width: 640px }

.hero-heading em { font-style: italic }

.cta-sub { font-size: 1.125rem; color: rgba(255, 255, 255, .55); font-weight: 300; margin-top: 1rem; max-width: 460px }

footer { background: var(--shadow); color: rgba(255, 255, 255, .6); padding: clamp(3.5rem, 6vw, 5rem) 0 0 }

.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; padding-bottom: 2.5rem; }

.footer-logo-img { height: 28px; width: auto; filter: brightness(0) invert(1); opacity: .7; margin-bottom: 1.25rem }

.footer-tagline { font-family: var(--font-display); font-size: 1.5rem; font-weight: 300; font-style: italic; color: rgba(255, 255, 255, .4); line-height: 1.55 }

.footer-col-label { font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .3); margin-bottom: 1rem }

.footer-links { display: flex; flex-direction: column; gap: .6rem }

.footer-links a { font-size: .84rem; color: rgba(255, 255, 255, .55); transition: color var(--tr) }

.footer-links a:hover { color: #fff }

.footer-locations { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 2.5rem 0; }

.footer-locations-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem 3rem; }

.footer-location-item { display: flex; flex-direction: column; gap: 0.3rem; }

.footer-location-name { font-size: 0.95rem; font-weight: 400; color: rgba(255, 255, 255, 0.55); margin-bottom: 0.15rem; }

.footer-location-address { font-size: 0.82rem; color: rgba(255, 255, 255, 0.4); line-height: 1.55; }

.footer-location-phone { font-size: 0.82rem; color: rgba(255, 255, 255, 0.5); transition: color var(--tr); margin-top: 0.15rem; }

.footer-location-phone:hover { color: #fff; }

.footer-acknowledgement { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 2rem 0; }

.footer-acknowledgement p { font-size: 0.78rem; line-height: 1.7; color: rgba(255, 255, 255, 0.3); max-width: 800px; }

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 0; gap: 1rem; flex-wrap: wrap }

.footer-copy { font-size: 0.78rem; color: rgba(255, 255, 255, .25) }

.footer-psl { font-size: 0.72rem; color: rgba(255, 255, 255, 0.2); font-style: italic; }

.footer-legal { display: flex; gap: 1.5rem }

.footer-legal a { font-size: 0.75rem; color: rgba(255, 255, 255, .25); transition: color var(--tr) }

.footer-legal a:hover { color: rgba(255, 255, 255, .6) }

.footer-social { display: flex; gap: 1rem; margin-top: 1.25rem; }

.footer-social a { color: rgba(255, 255, 255, 0.45); transition: color 300ms cubic-bezier(0.22, 1, 0.36, 1); }

.footer-social a:hover { color: #fff; }

.appear { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease), transform 700ms var(--ease) }

.appear.in { opacity: 1; transform: none }

#custom-cursor { z-index: 99999 !important; }

#custom-cursor.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }

#custom-cursor svg { width: 100%; height: 100%; display: block; }

/* ---------------------------------------------------------------------------
   Footer responsive rules.

   The footer is shared by every page, but when the static pages were extracted
   these rules were found only in the homepage stylesheet, so the offices grid
   stayed at three columns everywhere else and pushed the page about 7px wide
   at 375px. They belong with the component they style.
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-locations-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-locations-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}


/* ---------------------------------------------------------------------------
   Footer locations and office contact lines, July 2026.

   The footer now lists town names only, linking through to the offices page,
   so it stays light on every page. Office cards can carry two contact lines,
   for the branch that runs accounting and financial planning from one address.
   --------------------------------------------------------------------------- */

.footer-location-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-location-link {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.55);
  transition: color var(--tr);
}

.footer-location-link:hover { color: #fff }

.loc-contact {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0.35rem;
}

.loc-contact-label {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.loc-email {
  font-size: 0.9rem;
  color: rgba(58, 48, 40, 0.75);
  border-bottom: 1px solid var(--stone);
  align-self: flex-start;
  transition: color .25s, border-color .25s;
}

.loc-email:hover { color: var(--gold); border-color: var(--gold) }

@media (max-width: 600px) {
  .footer-location-list { gap: 0.35rem 1.25rem }
}

/* ------------------------------------------------------------------ */
/* Article author and v3 body elements                                 */
/*                                                                     */
/* Shared here rather than in the four per-article stylesheets so the  */
/* byline renders identically on every article and a change happens    */
/* once. Named .article-author, not .article-byline: that class        */
/* already exists as a text-only line in the Alisha article's page     */
/* stylesheet with !important rules, and page stylesheets load after   */
/* this one.                                                           */
/*                                                                     */
/* The client's v3 article copy introduced h3 subsections and bullet   */
/* lists, which the migrated articles never used, so the per-article   */
/* stylesheets carry no rules for them. Styled to sit with the         */
/* existing .article-body h2 and p type.                               */
/* ------------------------------------------------------------------ */

.article-author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.2rem;
}

/* Two classes, not one. The per-article stylesheets carry
   .article-hero img { width:100%; height:100% } to stretch the hero
   photograph, which outweighs a single class and blew the avatar up to
   the full hero. Same lesson as .eyebrow-light. */
.article-author .author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.author-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.author-name {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
}

.author-role {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.article-body h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  line-height: 1.3;
  color: var(--night);
  margin: 1.9rem 0 0.75rem;
}

.article-body ul {
  margin: 0 0 1.35rem;
  padding-left: 1.25rem;
}

.article-body li {
  font-size: 1.09rem;
  line-height: 1.75;
  color: var(--night);
  margin: 0 0 0.6rem;
}