/* =========================================================================
   Avalon Ventures — base.css
   Global design tokens (DESIGN.md §7.2), a light reset, base element styles,
   and the shared shell: buttons, header/nav (light + dark), cards, footer.
   Page-specific styles live alongside each page (e.g. home.css).
   Change tokens HERE — never hardcode colors in page CSS or markup.
   ========================================================================= */

/* ------------------------------------------------------------------ tokens */
:root{
  /* Brand hues */
  --color-oxford-blue:#0E182F;
  --color-brass:#A8843A;
  --color-brass-hover:#8C6E2F;
  --color-brass-pressed:#74591F;
  --color-brass-disabled:#D8C7A0;
  --color-brass-ring:rgba(168,132,58,0.35);
  --color-brass-tint:#F4EDDD;
  --color-brass-on-dark:#C29A4E;

  /* Neutrals */
  --color-payne:#465C72;
  --color-french-gray:#CBD5E1;
  --color-antiflash:#EFEFEF;
  --color-seasalt:#F9F9F9;
  --color-white:#FFFFFF;

  /* Text ink ladder — on light (navy hue, five steps) */
  --color-text-heading:#0E182F;
  --color-text-deck:#465C72;
  --color-text-body:#5E6B79;
  --color-text-muted:#62707E;
  --color-text-subtle:#94A0AC;

  /* Text ink ladder — on dark (inverted) */
  --color-text-on-dark-heading:#F9F9F9;
  --color-text-on-dark-body:#CBD5E1;
  --color-text-on-dark-muted:#94A0AC;
  --color-text-on-dark-subtle:#6E7C8A;

  /* Status (utility only) */
  --color-success:#2F7A55;  --color-success-tint:#E8F1EC;
  --color-warning:#B5731B;  --color-warning-tint:#F6ECDC;
  --color-error:#B23A3A;    --color-error-tint:#F6E5E5;
  --color-info:#2E6CA8;     --color-info-tint:#E5EEF6;

  /* Surfaces & borders */
  --color-bg-page:#F9F9F9;
  --color-bg-surface:#FFFFFF;
  --color-surface-dark:#0E182F;
  --color-surface-dark-raised:#18233D;
  --color-border-hairline:rgba(14,24,47,0.12);
  --color-border-on-dark:rgba(255,255,255,0.14);

  /* Type */
  --font-display:'Jost', sans-serif;   /* headings, brand voice */
  --font-body:'Lora', serif;           /* long-form storyteller */
  --font-ui:'Inter', sans-serif;       /* interface, forms, portal */

  /* Radius */
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-pill:999px;

  /* Spacing (4px base) */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px;
  --space-9:48px; --space-10:64px; --space-11:80px; --space-12:96px;

  /* Motion */
  --ease:cubic-bezier(0.2, 0, 0, 1);
  --dur-fast:150ms;
  --dur-base:220ms;

  /* Layout */
  --container:1120px;
}

/* ------------------------------------------------------------------ reset */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--color-bg-page);
  color:var(--color-text-body);
  font-family:var(--font-ui);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block; max-width:100%;}
img{height:auto;}
a{color:inherit;}
button{font:inherit; color:inherit; margin:0;}
ul{margin:0; padding:0;}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  color:var(--color-text-heading);
  font-weight:500;
  margin:0;
  line-height:1.2;
}
p{margin:0;}

/* ------------------------------------------------------- type scale helpers */
h1,.h1{font-size:32px; line-height:1.18;}
h2,.h2{font-size:26px; line-height:1.20;}
h3,.h3{font-size:21px; line-height:1.25;}
h4,.h4{font-size:18px; line-height:1.30;}

.eyebrow{
  font-family:var(--font-ui);
  font-size:11px; font-weight:500; letter-spacing:0.06em;
  color:var(--color-brass);
  margin:0 0 14px;
}
/* Orientation label above a section heading — NOT a load-bearing title
   (DESIGN.md §2.4). Larger/more legible than the 11px eyebrow; H2 still leads. */
.section-label{
  font-family:var(--font-ui);
  font-size:13px; font-weight:500; line-height:1.3;
  color:var(--color-text-muted);
  margin:0 0 10px;
}
.band--dark .section-label{color:var(--color-brass-on-dark);}
.deck{
  font-family:var(--font-body);
  font-size:18px; line-height:1.45;
  color:var(--color-text-deck);
  max-width:34em;
}
.prose{
  font-family:var(--font-body);
  font-size:16px; line-height:1.62;          /* standard section body */
  color:var(--color-text-body);
  max-width:34em;
}
.prose.lead{font-size:17px; line-height:1.55;}   /* standfirst / important intro */

/* ------------------------------------------------------------------ layout */
.container{max-width:var(--container); margin:0 auto; padding-inline:24px;}
.section{padding-block:clamp(56px, 7vw, 88px);}
/* Targeted tighter rhythm for a single section (used on the homepage audience
   section). Caps the large endpoint ~60px without touching the global rhythm. */
.section--compact{padding-block:clamp(44px, 6vw, 60px);}

.band--dark{background:var(--color-surface-dark); color:var(--color-text-on-dark-body);}
.band--dark h1,.band--dark h2,.band--dark h3,.band--dark h4{color:var(--color-text-on-dark-heading);}
.band--dark .eyebrow{color:var(--color-brass-on-dark);}
.band--dark .deck{color:var(--color-text-on-dark-body);}

/* skip link */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--color-oxford-blue); color:var(--color-seasalt);
  font-family:var(--font-ui); font-size:14px;
  padding:10px 16px; border-radius:var(--radius-sm);
}
.skip-link:focus{left:12px; top:12px;}

/* ------------------------------------------------------------------- links */
.link{
  color:var(--color-text-heading);
  text-decoration:underline; text-decoration-color:transparent;
  text-underline-offset:3px;
  transition:text-decoration-color var(--dur-fast) var(--ease);
}
.link:hover{text-decoration-color:var(--color-brass);}

/* ----------------------------------------------------------------- buttons */
.btn{
  font-family:var(--font-ui); font-weight:500;
  border-radius:var(--radius-sm);
  border:1px solid transparent; cursor:pointer; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none;
  padding:11px 20px; font-size:14px; min-height:44px;   /* tap target >= 44px */
  transition:background var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease);
}
.btn:focus-visible{outline:none; box-shadow:0 0 0 3px var(--color-brass-ring);}

.btn--primary{background:var(--color-brass); color:#fff;}
.btn--primary:hover{background:var(--color-brass-hover);}
.btn--primary:active{background:var(--color-brass-pressed); transform:scale(0.98);}
.btn--primary:disabled{background:var(--color-brass-disabled); cursor:not-allowed;}

.btn--secondary{background:transparent; border-color:var(--color-oxford-blue); color:var(--color-oxford-blue);}
.btn--secondary:hover{background:rgba(14,24,47,0.06);}

.btn--tertiary{background:transparent; color:var(--color-oxford-blue); padding-inline:8px; min-height:auto;}
.btn--tertiary:hover{text-decoration:underline; text-decoration-color:var(--color-brass); text-underline-offset:3px;}

.btn--small{padding:9px 16px; font-size:13px; min-height:44px;}
.btn--lg{padding:15px 28px; font-size:15px; min-height:50px;}

/* button dark-surface variants (DESIGN.md §4.5) — primary brass is unchanged */
.on-dark .btn--secondary{border-color:var(--color-french-gray); color:var(--color-seasalt);}
.on-dark .btn--secondary:hover{background:rgba(255,255,255,0.08);}
.on-dark .btn--tertiary{color:var(--color-text-on-dark-body);}

/* ------------------------------------------------------------------- cards */
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:20px;}
.card{
  display:flex; flex-direction:column;
  background:var(--color-white);
  border:0.5px solid var(--color-border-hairline);
  border-radius:var(--radius-lg);
  overflow:hidden; text-decoration:none; color:inherit;
  transition:border-color var(--dur-base) var(--ease);
}
.card:hover{border-color:rgba(14,24,47,0.24);}
.card:focus-visible{outline:none; box-shadow:0 0 0 3px var(--color-brass-ring);}
.card__thumb{display:block; aspect-ratio:4 / 3; background:var(--color-french-gray); overflow:hidden;}
.card__thumb img{width:100%; height:100%; object-fit:cover;}
.card__body{display:block; padding:18px 20px;}
.card__title{font-family:var(--font-display); font-size:18px; color:var(--color-text-heading); display:block; margin-bottom:6px;}
.card__text{font-family:var(--font-body); font-size:14px; line-height:1.55; color:var(--color-text-body); display:block;}

/* ------------------------------------------------------------------ forms */
/* Mirrors the component sheet. 16px inputs avoid iOS focus-zoom; 48px tall
   keeps tap targets comfortable; focus is a brass border + 3px brass ring. */
.field{display:flex; flex-direction:column; gap:6px;}
.field > label{font-family:var(--font-ui); font-size:13px; font-weight:500; color:var(--color-text-muted);}
.field__opt{color:var(--color-text-subtle); font-weight:400;}
.input{
  font-family:var(--font-ui); font-size:16px; color:var(--color-text-body);
  background:var(--color-white); border:1px solid var(--color-french-gray);
  border-radius:var(--radius-sm); padding:12px 14px; width:100%; min-height:48px;
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input::placeholder{color:var(--color-text-subtle);}
.input:hover{border-color:var(--color-payne);}
.input:focus{outline:none; border-color:var(--color-brass); box-shadow:0 0 0 3px var(--color-brass-ring);}
textarea.input{min-height:132px; line-height:1.5; resize:vertical;}
select.input{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2362707E' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
}
.help{font-family:var(--font-ui); font-size:13px; color:var(--color-text-muted);}

/* ------------------------------------------------------------ header / nav */
.site-header{
  position:relative; z-index:20;
  background:var(--color-bg-page);
  border-bottom:0.5px solid var(--color-border-hairline);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-block:24px 14px;
}
.site-logo{display:inline-flex; align-items:center;}
.site-logo img{height:60px; width:auto;}
.site-logo__dark{display:none;}

.nav{display:flex; align-items:center;}
.nav__links{
  display:flex; align-items:center; gap:26px; list-style:none;
}
.nav__links a{
  font-family:var(--font-ui); font-size:14px; text-decoration:none;
  color:var(--color-text-deck);
  display:inline-flex; align-items:center; min-height:44px;
  position:relative;
}
.nav__links a:hover{color:var(--color-text-heading);}
.nav__links a[aria-current="page"]{color:var(--color-text-heading);}
.nav__links a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:9px; height:2px;
  background:var(--color-brass);
}
.nav__links a:focus-visible{outline:none; box-shadow:0 0 0 3px var(--color-brass-ring); border-radius:var(--radius-sm);}
.nav__cta{display:inline-flex;}

.nav__toggle{
  display:none;
  width:44px; height:44px; align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer; border-radius:var(--radius-sm);
}
.nav__toggle svg{stroke:var(--color-oxford-blue); fill:none;}
.nav__toggle:focus-visible{outline:none; box-shadow:0 0 0 3px var(--color-brass-ring);}

/* dark header variant — over a navy hero / band */
.site-header--dark{background:transparent; border-bottom-color:transparent;}
/* solid navy header — same dark treatment on a page without a navy hero
   behind it (e.g. Portfolio), so the brand shell matches the homepage. */
.site-header--solid{background:var(--color-surface-dark); border-bottom-color:var(--color-border-on-dark);}
/* centered, logo-only standalone header (e.g. the 404 page) */
.site-header--center .site-header__inner{justify-content:center; padding-block:24px 24px;}
.site-header--center .site-logo img{height:75px;}
.site-header--dark .site-logo__light{display:none;}
.site-header--dark .site-logo__dark{display:block;}
.site-header--dark .nav__links a{color:var(--color-text-on-dark-body);}
.site-header--dark .nav__links a:hover{color:var(--color-text-on-dark-heading);}
.site-header--dark .nav__links a[aria-current="page"]{color:var(--color-text-on-dark-heading);}
.site-header--dark .nav__toggle svg{stroke:var(--color-seasalt);}

@media (max-width:640px){
  .site-header__inner{padding-block:24px 24px;}   /* a touch more room under the logo */
  .nav__toggle{display:inline-flex;}
}
/* The refined mobile dropdown menu rules live at the END of this file so they
   win on source order over the desktop .nav__links / .sticky-nav__links rules
   (keeps the sticky dropdown closed by default on mobile). */

/* ---------------------------------------------------------------- footer */
/* Utility-forward (DESIGN.md §4.7): logo left + contact right up top, a hairline
   divider, then copyright left / social right. No footer nav links. */
.site-footer{background:var(--color-surface-dark); color:var(--color-text-on-dark-body);}
.site-footer__inner{padding-block:clamp(36px, 5vw, 56px); display:grid; gap:24px;}
.site-footer__top{
  display:flex; align-items:center; justify-content:space-between; gap:20px 32px; flex-wrap:wrap;
}
.site-footer__logolink{display:inline-flex; align-items:center;}
.site-footer__logo{height:52px; width:auto;}
.site-footer__contact{
  font-family:var(--font-ui); font-size:14px; line-height:0.5; text-align:right;
}
.site-footer__contact a{
  color:var(--color-text-on-dark-body); text-decoration:none;
  display:inline-flex; align-items:center; min-height:44px;
}
.site-footer__contact a:hover{
  color:var(--color-text-on-dark-heading);
  text-decoration:underline; text-decoration-color:var(--color-brass-on-dark); text-underline-offset:3px;
}
.site-footer__org{margin:0; color:var(--color-text-on-dark-muted);}
.site-footer__org .name{color:var(--color-text-on-dark-body);}
.site-footer__org .bar{margin:0 8px; color:var(--color-text-on-dark-subtle);}
.site-footer__rule{border:0; height:0; border-top:0.5px solid var(--color-border-on-dark); margin:0;}
.site-footer__bottom{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.site-footer__legal{font-family:var(--font-ui); font-size:13px; color:var(--color-text-on-dark-muted);}
.social{display:flex; gap:6px;}
.social a{
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); color:var(--color-text-on-dark-body);
}
.social a:hover{color:var(--color-brass-on-dark);}
.social svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.6;}
.site-footer a:focus-visible{outline:none; box-shadow:0 0 0 3px var(--color-brass-ring); border-radius:var(--radius-sm);}

/* ---------------------------------------------------------- error (404) */
.error-main{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:clamp(360px, 56vh, 560px);
  padding-block:clamp(56px, 9vw, 96px);
}
.error-main__inner{max-width:36em; margin-inline:auto;}
.error-main h1{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(28px, 4.6vw, 40px); line-height:1.14; color:var(--color-text-heading);
}
.error-main__copy{
  font-family:var(--font-body); font-size:17px; line-height:1.55;
  color:var(--color-text-deck); max-width:34em; margin:14px auto 0;
}
.error-main__actions{margin-top:28px; display:flex; flex-direction:column; align-items:center; gap:14px;}

@media (max-width:600px){
  /* center the top cluster (logo, email, org line); bottom row unchanged */
  .site-footer__top{flex-direction:column; align-items:center; gap:16px; text-align:center;}
  .site-footer__contact{text-align:center;}
}

/* ----------------------------------------------- sticky floating nav (dark) */
/* Appears only after the hero/header scrolls away (toggled in main.js). Mirrors
   the component-sheet .nav--dark direction. Hidden on mobile for this pass. */
.sticky-nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:var(--color-surface-dark);
  border-bottom:0.5px solid var(--color-border-on-dark);
  box-shadow:0 1px 2px rgba(14,24,47,0.22);
  transform:translateY(-100%); visibility:hidden;
  transition:transform var(--dur-base) var(--ease), visibility var(--dur-base) var(--ease);
}
.sticky-nav.is-visible{transform:translateY(0); visibility:visible;}
.sticky-nav__inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  min-height:75px; padding-block:8px;
}
.sticky-nav__logo{display:inline-flex; align-items:center;}
.sticky-nav__logo img{height:40px; width:auto; display:block;}
.sticky-nav__links{display:flex; align-items:center; gap:24px; list-style:none;}
.sticky-nav__links a{
  font-family:var(--font-ui); font-size:14px; text-decoration:none;
  color:var(--color-text-on-dark-body);
  display:inline-flex; align-items:center; min-height:44px; position:relative;
}
.sticky-nav__links a:hover{color:var(--color-text-on-dark-heading);}
.sticky-nav__links a[aria-current="page"]{color:var(--color-text-on-dark-heading);}
.sticky-nav__links a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:7px; height:2px; background:var(--color-brass);
}
.sticky-nav__links a:focus-visible{outline:none; box-shadow:0 0 0 3px var(--color-brass-ring); border-radius:var(--radius-sm);}

/* compact hamburger for the sticky nav (mobile only) */
.sticky-nav__toggle{
  display:none;
  width:44px; height:44px; align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer; border-radius:var(--radius-sm);
}
.sticky-nav__toggle svg{stroke:var(--color-seasalt); fill:none;}
.sticky-nav__toggle:focus-visible{outline:none; box-shadow:0 0 0 3px var(--color-brass-ring);}

/* On mobile the sticky bar is the persistent nav access: logo left + hamburger right. */
@media (max-width:640px){
  .sticky-nav{display:block;}
  .sticky-nav__toggle{display:inline-flex;}
  .sticky-nav__inner{min-height:64px;}
}
@media (prefers-reduced-motion:reduce){.sticky-nav{transition:none;}}

/* ---------------------------------------------- scroll reveal (enhancement) */
/* Hidden only when JS is present (html.js); without JS everything shows. */
html.js [data-reveal]{
  opacity:0; transform:translateY(10px);
  transition:opacity 500ms var(--ease), transform 500ms var(--ease);
}
html.js [data-reveal].is-revealed{opacity:1; transform:none;}

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  html.js [data-reveal]{opacity:1; transform:none;}
}

/* =========================================================================
   Refined mobile dropdown menu — shared by the header nav AND the sticky nav.
   Placed at the very end so it wins on source order over the desktop
   .nav__links / .sticky-nav__links rules. Both menus are CLOSED by default and
   only open when their own toggle adds .is-open (state is independent per menu).
   ========================================================================= */
@media (max-width:640px){
  .nav__links,
  .sticky-nav__links{
    display:none;                                  /* closed by default (both menus) */
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--color-surface-dark-raised);
    border-top:0.5px solid var(--color-border-on-dark);
    border-bottom:0.5px solid var(--color-border-on-dark);
    padding:8px 0;
    box-shadow:0 12px 28px rgba(14,24,47,0.30);
  }
  .nav.is-open .nav__links,
  .sticky-nav.is-open .sticky-nav__links{display:flex;}   /* open only on tap */

  .nav__links li,
  .sticky-nav__links li{position:relative;}

  .nav__links a:not(.btn),
  .sticky-nav__links a:not(.btn){
    font-size:17px; min-height:56px; width:100%;
    display:flex; align-items:center; justify-content:center;     /* fully tappable, centered */
    padding:10px 24px;
    color:var(--color-text-on-dark-body);
  }
  .nav__links a:not(.btn):hover,
  .sticky-nav__links a:not(.btn):hover{color:var(--color-text-on-dark-heading);}

  /* faint ~80%-width dividers between rows (not before the CTA) */
  .nav__links li + li:not(.nav__cta)::before,
  .sticky-nav__links li + li:not(.nav__cta)::before{
    content:""; position:absolute; top:0; left:10%; right:10%; height:1px;
    background:var(--color-border-on-dark);
  }

  /* active row: brass underline only — all rows keep the same background */
  .nav__links a[aria-current="page"]::after,
  .sticky-nav__links a[aria-current="page"]::after{
    content:""; position:absolute; left:50%; right:auto; transform:translateX(-50%);
    width:34px; height:2px; bottom:12px; background:var(--color-brass);
  }

  /* Tenant login: proportionate (not full-width), separated above */
  .nav__cta{
    position:relative; display:flex; justify-content:center;
    padding:16px 24px 8px; margin-top:4px;
  }
  .nav__cta::before{
    content:""; position:absolute; top:0; left:10%; right:10%; height:1px;
    background:var(--color-border-on-dark);
  }
  .nav__cta .btn{width:auto; min-width:170px;}
}