/* ================================================================
   Heritage Fiji V3.9 — National Trust Brand Edition
   Visual layer built from the actual National Trust of Fiji logo.
   V3.8 content, visitor workflows and staff functionality remain.
   ================================================================ */

:root{
  --navy:#173f2b;
  --navy-2:#24563a;
  --blue:#3f819d;
  --teal:#2f7657;
  --coral:#804028;
  --gold:#ceaf35;
  --cream:#f6f3eb;
  --paper:#fffefa;
  --ink:#25362a;
  --muted:#647068;
  --line:rgba(37,68,48,.15);
  --success:#248845;
  --warning:#956d19;
  --danger:#a44136;
  --shadow:0 18px 55px rgba(34,67,45,.12);
  --brand-green:#248845;
  --brand-deep:#173f2b;
  --brand-brown:#804028;
  --brand-gold:#ceaf35;
  --brand-blue:#3f819d;
  --brand-warm:#fbf8f0;
  --soft-gold:#f4ecd7;
  --institutional-border:rgba(37,68,48,.16);
}

[data-theme="dark"]{
  --cream:#101b14;
  --paper:#17241b;
  --ink:#eef4ef;
  --muted:#aebdb2;
  --line:rgba(238,244,239,.14);
  --shadow:0 22px 60px rgba(0,0,0,.32);
}

/* Official brand */
.site-header{
  min-height:82px;
  height:82px;
  padding-inline:max(18px,calc((100vw - 1360px)/2));
  gap:14px;
  border-bottom:1px solid var(--line);
}
.ntf-brand{
  display:flex;
  align-items:center;
  min-width:214px;
  flex:0 0 auto;
}
.ntf-logo{
  width:205px;
  max-height:68px;
  object-fit:contain;
  object-position:left center;
  display:block;
}
.site-footer .ntf-logo{
  width:225px;
  background:transparent;
  border-radius:0;
  padding:0;
}
.desktop-nav{gap:2px}
.desktop-nav a{
  font-size:.735rem;
  padding:30px 8px 26px;
  color:var(--ink);
  font-weight:780;
}
.desktop-nav a:hover,.desktop-nav a.active{
  color:var(--brand-brown);
  border-bottom-color:var(--brand-brown);
}
.theme-button,.account-button,.mobile-menu-button{
  border-color:rgba(23,63,43,.18);
}
.account-button{
  background:var(--brand-deep);
  color:#fff;
  border-color:var(--brand-deep);
}
.account-button.signed-in{background:var(--brand-green)}
.header-search{display:none!important}
.public-service-bar{
  background:var(--brand-deep);
  color:#dce8df;
}
.service-bar-inner strong{color:#fff}
.service-bar-contact{color:#c4d3c8}

/* Buttons */
.btn-primary{background:var(--brand-green)!important;border-color:var(--brand-green)!important}
.btn-primary:hover{background:#1e7439!important;border-color:#1e7439!important}
.btn-coral{background:var(--brand-brown)!important;border-color:var(--brand-brown)!important}
.btn-secondary{color:var(--brand-deep)!important;border-color:rgba(23,63,43,.32)!important}
.eyebrow{color:var(--brand-brown)}
.quick-index,.resource-type{color:var(--brand-brown)}
.notice-link,.editorial-quick strong,.card-footer strong{color:var(--brand-green)}


/* ---------------------------------------------------------------
   Homepage hero — approved cinematic banner
   --------------------------------------------------------------- */
.brand-home-hero{
  position:relative;
  min-height:660px;
  overflow:hidden;
  background:#0e291b;
  color:#fff;
}
.brand-home-hero::before{
  content:"";
  position:absolute;inset:0;
  background-image:url('../images/home/ntf-hero-banner.png');
  background-position:center center;
  background-size:cover;
  transform:scale(1.01);
}
.brand-home-hero::after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(8,30,18,.88) 0%,rgba(8,30,18,.72) 28%,rgba(8,30,18,.28) 58%,rgba(8,30,18,.10) 100%),
    linear-gradient(0deg,rgba(4,20,12,.25),transparent 48%);
}
.brand-hero-inner{
  position:relative;z-index:3;
  min-height:660px;
  display:flex;align-items:center;
  padding-top:48px;padding-bottom:110px;
}
.brand-hero-copy{max-width:630px}
.brand-hero-copy .eyebrow{color:#f2d775}
.brand-hero-copy h1{
  font:500 clamp(3.55rem,6.3vw,6.55rem)/.96 Georgia,serif;
  letter-spacing:-.048em;
  margin:16px 0 22px;
  color:#fff;
  text-shadow:0 3px 22px rgba(0,0,0,.24);
}
.brand-hero-copy h1 em{
  display:block;color:#e2c357;font-style:normal;
}
.brand-hero-copy p{
  color:#f2f5f2;max-width:580px;font-size:1rem;line-height:1.68;
}
.brand-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.brand-hero-actions .btn-secondary{
  color:#fff!important;border-color:rgba(255,255,255,.72)!important;background:rgba(7,31,19,.24)!important;
}
.brand-impact-bar{
  position:absolute;z-index:4;right:max(18px,calc((100vw - 1240px)/2));bottom:0;
  width:min(700px,calc(100% - 36px));
  min-height:104px;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(14,62,38,.96);
  border-top:3px solid var(--brand-gold);
}
.brand-impact{
  padding:20px 20px 16px;border-right:1px solid rgba(255,255,255,.18);
}
.brand-impact:last-child{border-right:0}
.brand-impact strong{
  display:block;font:500 1.75rem Georgia,serif;color:#fff;
}
.brand-impact span{font-size:.66rem;color:#d7e5db;line-height:1.45}
/* Shortcut cards from the preferred mockup */
.brand-shortcuts{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.brand-shortcut{
  display:grid;grid-template-columns:54px 1fr auto;
  align-items:center;gap:13px;
  min-height:112px;padding:19px;
  background:var(--paper);border:1px solid var(--line);
  border-radius:7px;cursor:pointer;
}
.brand-shortcut:hover{border-color:rgba(36,136,69,.45);box-shadow:0 12px 30px rgba(36,76,49,.08)}
.shortcut-icon{
  width:49px;height:49px;border-radius:50%;display:grid;place-items:center;
  font:500 1.4rem Georgia,serif;
  background:#e9f2e9;color:var(--brand-green);
}
.brand-shortcut:nth-child(2) .shortcut-icon{background:#f3e8df;color:var(--brand-brown)}
.brand-shortcut:nth-child(3) .shortcut-icon{background:#f4ecd0;color:#a98312}
.brand-shortcut:nth-child(4) .shortcut-icon{background:#e5f0f5;color:var(--brand-blue)}
.brand-shortcut h3{font:500 1.08rem Georgia,serif;margin:0 0 5px}
.brand-shortcut p{font-size:.69rem;margin:0;color:var(--muted);line-height:1.55}
.brand-shortcut b{color:var(--brand-deep);font-size:1.1rem}

/* Welcome / protection / stories */
.brand-home-grid{
  display:grid;
  grid-template-columns:1.05fr 1.65fr 1.05fr;
  gap:34px;
  align-items:start;
}
.brand-welcome{
  border-right:1px solid var(--line);
  padding-right:30px;
}
.brand-welcome h2,.brand-protect h2,.brand-stories h2{
  font:500 clamp(1.7rem,2.6vw,2.45rem) Georgia,serif;
  color:var(--brand-deep);margin:0 0 18px;
}
.brand-welcome p{font-size:.76rem;color:var(--muted);line-height:1.8}
.brand-protect-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  border-top:1px solid var(--line);padding-top:22px;
}
.protect-item{text-align:center}
.protect-icon{
  width:68px;height:68px;border-radius:50%;margin:0 auto 13px;
  display:grid;place-items:center;color:#fff;font:500 1.35rem Georgia,serif;
}
.protect-item:nth-child(1) .protect-icon{background:var(--brand-green)}
.protect-item:nth-child(2) .protect-icon{background:var(--brand-brown)}
.protect-item:nth-child(3) .protect-icon{background:var(--brand-gold);color:#fff}
.protect-item:nth-child(4) .protect-icon{background:var(--brand-blue)}
.protect-item strong{display:block;font:500 .86rem Georgia,serif}
.protect-item p{font-size:.64rem;color:var(--muted);line-height:1.5}
.brand-stories{background:var(--brand-warm);padding:22px;border-radius:6px}
.story-row{
  display:grid;grid-template-columns:76px 1fr;gap:12px;
  border-top:1px solid var(--line);padding:12px 0;cursor:pointer;
}
.story-row:first-of-type{border-top:0}
.story-row img{width:76px;height:55px;object-fit:cover;border-radius:4px}
.story-row strong{display:block;font-size:.72rem;line-height:1.35}
.story-row small{display:block;color:var(--muted);font-size:.6rem;margin-top:3px}
.story-view-all{
  border:0;background:transparent;color:var(--brand-green);font-size:.66rem;font-weight:850;cursor:pointer;padding:0;
}

/* Featured places horizontal cards */
.brand-featured-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
.brand-featured-card{
  position:relative;min-height:285px;overflow:hidden;border-radius:7px;cursor:pointer;
  background-size:cover;background-position:center;
}
.brand-featured-card:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 35%,rgba(7,31,19,.9));
}
.brand-featured-copy{
  position:absolute;z-index:2;left:18px;right:18px;bottom:17px;color:#fff;
}
.brand-featured-copy small{color:#e0cb79;font-size:.6rem;text-transform:uppercase;letter-spacing:.1em}
.brand-featured-copy h3{font:500 1.23rem Georgia,serif;margin:4px 0}
.brand-featured-copy span{font-size:.64rem;color:#d7e4da}

/* Visitor action / guide */
.brand-action-grid{
  display:grid;grid-template-columns:1.2fr .8fr;gap:20px;
}
.brand-plan-panel{
  min-height:225px;background:var(--brand-deep);color:#fff;border-radius:7px;padding:32px;
  position:relative;overflow:hidden;
}
.brand-plan-panel:after{
  content:"";position:absolute;right:-40px;bottom:-90px;width:240px;height:240px;
  border:1px solid rgba(206,175,53,.25);border-radius:50%;
}
.brand-plan-panel h2{font:500 2.45rem Georgia,serif;margin:7px 0 12px}
.brand-plan-panel p{color:#cbdccf;max-width:600px;font-size:.76rem}
.brand-help-panel{
  background:#f2e9d8;border-radius:7px;padding:30px;display:flex;flex-direction:column;justify-content:center;
}
.brand-help-panel h2{font:500 2rem Georgia,serif;color:var(--brand-brown);margin:7px 0 10px}
.brand-help-panel p{font-size:.74rem;color:var(--muted)}
.brand-help-panel .btn{align-self:flex-start}


/* HIYH focus panel */
.hiyh-focus{
  display:grid;
  grid-template-columns:1.05fr 1.15fr;
  gap:24px;
  align-items:stretch;
}
.hiyh-visual{
  min-height:360px;
  border-radius:8px;
  background:
    linear-gradient(0deg,rgba(10,33,21,.18),rgba(10,33,21,.18)),
    url('../images/programs/hiyh/education-01.jpg') center/cover;
}
.hiyh-copy{
  background:var(--paper);
  border:1px solid var(--line);
  border-top:4px solid var(--brand-gold);
  border-radius:8px;
  padding:28px 28px 24px;
}
.hiyh-copy h2{font:500 2.25rem Georgia,serif;color:var(--brand-deep);margin:8px 0 12px}
.hiyh-copy p{font-size:.77rem;color:var(--muted);line-height:1.8}
.hiyh-levels{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:18px 0;
}
.hiyh-level{
  background:var(--brand-warm);
  border:1px solid var(--line);
  border-radius:6px;
  padding:14px 12px;
}
.hiyh-level strong{
  display:block;
  color:var(--brand-brown);
  font:500 .95rem Georgia,serif;
  margin-bottom:6px;
}
.hiyh-level span{display:block;font-size:.65rem;color:var(--muted);line-height:1.5}
@media(max-width:900px){
  .hiyh-focus{grid-template-columns:1fr}
  .hiyh-levels{grid-template-columns:1fr}
}
/* Stories page */
.stories-grid{
  display:grid;grid-template-columns:1.3fr .7fr;gap:34px;
}
.story-feature{
  background:var(--paper);border:1px solid var(--line);border-radius:8px;overflow:hidden;
}
.story-feature-image{height:390px;background-size:cover;background-position:center}
.story-feature-copy{padding:30px}
.story-feature-copy h2{font:500 2.4rem Georgia,serif;margin:10px 0}
.story-feature-copy p{color:var(--muted);font-size:.78rem}
.story-stack{display:grid;gap:17px}
.story-card{padding:22px;border-top:3px solid var(--brand-green)!important}
.story-card:nth-child(2){border-top-color:var(--brand-brown)!important}
.story-card:nth-child(3){border-top-color:var(--brand-gold)!important}
.story-card h3{font:500 1.45rem Georgia,serif;margin:8px 0}
.story-card p{font-size:.72rem;color:var(--muted)}

/* Existing components inherit the real brand */
.site-category{background:var(--brand-brown)!important}
.status-banner.available{border-left-color:var(--brand-green)!important}
.status-dot{background:currentColor}
.feature-band{background:var(--brand-deep)!important}
.chatbot-feature{background:linear-gradient(135deg,var(--brand-deep),#24563a)!important}
.booking-summary{background:linear-gradient(150deg,var(--brand-deep),#285c3f)!important}
.account-hero{background:linear-gradient(135deg,#173f2b,#2b6546)!important}
.site-footer{
  background:#153522!important;
  border-top:4px solid var(--brand-gold)!important;
}
.site-footer a:hover{color:#ead273}
.chat-launcher{background:var(--brand-deep)!important}
.chat-head{background:var(--brand-deep)!important}
.request-ref{color:var(--brand-green)!important}
.account-nav button.active{background:#e8f0e8!important;color:var(--brand-deep)!important}
.account-kpi{border-top-color:var(--brand-green)!important}
.resource-row{border-color:var(--line)}
.resource-actions .btn-primary{background:var(--brand-green)!important}

/* Staff portal: restrained brand alignment, workflows unchanged */
.admin-body .admin-sidebar{background:#173f2b!important}
.admin-body .admin-nav button.active,.admin-body .admin-nav button:hover{background:#24563a!important}
.admin-body .kpi{border-top-color:#248845!important}
.admin-body .kpi strong{color:#248845!important}
.admin-body .admin-login-visual{
  background:linear-gradient(135deg,rgba(23,63,43,.88),rgba(20,32,26,.46)),url('../images/home/ntf-hero-banner.png') center/cover!important;
}
.admin-body .table-open{color:#236c3a!important}
.admin-body .admin-role{border-color:rgba(206,175,53,.22)!important}

/* Mobile */
@media(max-width:1120px){
  .ntf-brand{min-width:180px}.ntf-logo{width:175px}
  .desktop-nav a{font-size:.67rem;padding-left:6px;padding-right:6px}
  .brand-home-grid{grid-template-columns:1fr 1fr}
  .brand-stories{grid-column:1/-1}
}
@media(max-width:900px){
  .site-header{height:72px;min-height:72px}
  .ntf-logo{width:170px;max-height:58px}
  .header-search{display:none}
  .brand-impact-bar{position:relative;right:auto;bottom:auto;width:100%;grid-template-columns:1fr 1fr}
  .brand-home-hero{min-height:auto}
  .brand-hero-inner{min-height:590px;padding-bottom:60px}
  .brand-shortcuts{grid-template-columns:1fr 1fr}
  .brand-home-grid{grid-template-columns:1fr}
  .brand-welcome{border-right:0;border-bottom:1px solid var(--line);padding-right:0;padding-bottom:24px}
  .brand-featured-grid{grid-template-columns:1fr 1fr}
  .brand-action-grid,.stories-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .ntf-brand{min-width:0}.ntf-logo{width:145px}
    .brand-hero-copy h1{font-size:3.5rem}
  .brand-shortcuts,.brand-featured-grid{grid-template-columns:1fr}
  .brand-protect-grid{grid-template-columns:1fr 1fr}
  .brand-impact-bar{grid-template-columns:1fr}
  .brand-impact{border-right:0;border-bottom:1px solid rgba(255,255,255,.16)}
}