/* Heritage Fiji V3.11 — Mobile responsiveness refinement
   Mobile-first finishing layer. Desktop layout and content are unchanged. */

:root{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
}

.skip-link{
  position:fixed;
  z-index:200;
  left:max(12px,var(--safe-left));
  top:10px;
  transform:translateY(-160%);
  padding:10px 14px;
  background:var(--brand-deep,var(--navy));
  color:#fff;
  border-radius:4px;
  font-weight:850;
  font-size:.78rem;
  box-shadow:var(--shadow);
}
.skip-link:focus{transform:none}

/* Keep long content from forcing horizontal scrolling. */
.page,.container,.section,.section-compact,.content-card,.info-card,.form-card,
.resource-row,.contact-office,.request-card,.detail-sheet,.service-hub-form,
.service-hub-aside,.story-feature,.story-card{min-width:0}

:where(h1,h2,h3,p,span,strong,a,button,label){overflow-wrap:break-word}

@media(max-width:900px){
  .site-header{
    padding-left:max(12px,var(--safe-left));
    padding-right:max(12px,var(--safe-right));
  }

  .mobile-menu{
    padding-left:max(12px,var(--safe-left));
    padding-right:max(12px,var(--safe-right));
    overscroll-behavior:contain;
  }

  .brand-featured-grid,.stories-grid,.brand-action-grid{min-width:0}
}

@media(max-width:720px){
  :root{--header:68px}

  /* The compact mobile header replaces the desktop service strip. */
  .public-service-bar{display:none}
  .site-header{
    height:68px!important;
    min-height:68px!important;
    gap:6px!important;
    padding-top:var(--safe-top);
  }
  .ntf-brand{min-width:0!important;flex:1 1 auto}
  .ntf-logo{width:clamp(126px,37vw,148px)!important;max-height:54px!important}
  .theme-button,.account-button,.mobile-menu-button{
    width:42px!important;
    min-width:42px;
    height:42px!important;
    min-height:42px;
    flex:0 0 42px;
    border-radius:10px!important;
    padding:0!important;
  }
  .account-button{display:grid!important;place-items:center!important}

  /* Full-height mobile navigation is easier to scan and cannot overflow the viewport. */
  .mobile-menu{
    top:68px!important;
    left:0!important;
    right:0!important;
    bottom:0;
    max-height:calc(100dvh - 68px);
    overflow-y:auto;
    border-left:0;
    border-right:0;
    border-bottom:0;
    border-radius:0!important;
    padding-top:10px;
    padding-bottom:calc(20px + var(--safe-bottom));
    box-shadow:0 18px 44px rgba(23,63,43,.18);
  }
  .mobile-menu a,.mobile-account-link{
    min-height:48px;
    display:flex;
    align-items:center;
    width:100%;
    text-align:left;
    padding:11px 12px!important;
    border-radius:5px!important;
    font-size:.9rem;
  }
  .mobile-account-link{
    border:1px solid var(--line);
    background:var(--brand-warm,var(--cream));
    color:var(--brand-deep,var(--ink));
    font-weight:800;
    margin-top:8px;
  }
  body.menu-open{overflow:hidden}

  .container{width:min(100% - 28px,1220px)!important}
  .section{padding:48px 0!important}
  .section-compact{padding:34px 0!important}
  .section-heading{gap:12px}
  .section-heading h2,.display{font-size:clamp(2rem,10vw,3rem)!important}
  .lead{font-size:.94rem;line-height:1.7}

  .page-hero{padding:44px 0 32px!important}
  .page-hero h1{font-size:clamp(2.55rem,12.5vw,3.85rem)!important;letter-spacing:-.04em!important}

  /* Homepage hero: preserve cinematic design but make the hierarchy fit real phones. */
  .brand-home-hero{min-height:auto!important}
  .brand-hero-inner{
    min-height:520px!important;
    padding-top:42px!important;
    padding-bottom:44px!important;
    align-items:center!important;
  }
  .brand-hero-copy{max-width:100%}
  .brand-hero-copy h1{
    font-size:clamp(2.75rem,13vw,4rem)!important;
    line-height:.98!important;
    letter-spacing:-.04em!important;
    margin:12px 0 18px!important;
  }
  .brand-hero-copy p{font-size:.92rem!important;line-height:1.62!important}
  .brand-hero-actions{display:grid!important;grid-template-columns:1fr!important;width:100%;gap:9px!important}
  .brand-hero-actions .btn{width:100%;min-height:48px}

  /* 2 × 2 impact strip avoids a very tall four-row block on phones. */
  .brand-impact-bar{
    position:relative!important;
    right:auto!important;
    bottom:auto!important;
    width:100%!important;
    grid-template-columns:1fr 1fr!important;
  }
  .brand-impact{min-height:88px;padding:15px 14px!important}
  .brand-impact:nth-child(2n){border-right:0!important}
  .brand-impact:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.16)}
  .brand-impact strong{font-size:1.35rem!important}
  .brand-impact span{font-size:.64rem!important}

  /* Editorial grids and cards */
  .brand-shortcuts,.brand-featured-grid,.site-grid,.program-grid,.resource-grid,
  .experience-grid,.form-grid,.contact-grid,.split,.about-grid,.stories-grid,
  .story-layout,.built-layout,.visitor-insight-grid,.tkc-grid,.module-grid{
    grid-template-columns:1fr!important;
  }
  .brand-protect-grid{grid-template-columns:1fr 1fr!important}
  .protect-item{padding:17px 12px 17px 0!important;border-bottom:1px solid var(--line)}
  .protect-item:nth-child(even){border-right:0!important;padding-left:12px!important}
  .protect-item:nth-child(odd){padding-left:0!important}
  .protect-item:nth-last-child(-n+2){border-bottom:0}

  .site-image{height:205px!important}
  .site-card-body{padding:19px!important}
  .story-feature-image{height:250px!important}
  .story-feature-copy,.story-card{padding:20px!important}
  .story-feature-copy h2{font-size:2rem!important}

  /* Search/filter controls stay usable at thumb size. */
  .toolbar{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  .toolbar .search{grid-column:1/-1;min-width:0!important}
  .filter,.btn,.auth-tab,.account-nav button,.programme-nav button{min-height:44px}

  /* Prevent iOS form zoom and improve touch input. */
  .input,.select,.textarea,
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px!important}
  .form-card,.service-hub-form,.refined-enquiry-card,.contact-office{padding:20px!important}
  .form-grid{gap:12px!important}
  .field label{font-size:.72rem!important}
  .summary-row{align-items:start}
  .summary-row strong{text-align:right}

  /* Site detail navigation and content. */
  .site-hero{min-height:560px!important}
  .site-hero-content{padding:76px 0 34px!important}
  .site-hero h1{font-size:clamp(2.65rem,12.5vw,4rem)!important;letter-spacing:-.04em!important}
  .site-tabs{top:68px!important}
  .site-tabs-inner{scroll-snap-type:x proximity;padding-inline:14px!important}
  .site-tabs button{min-height:44px;scroll-snap-align:start}
  .status-banner{align-items:flex-start;gap:10px;padding:14px!important}
  .site-overview-copy{padding-right:0!important}
  .site-experiences .experience-grid > .content-card,
  .site-experiences .experience-grid > .content-card:nth-child(even){padding:20px 0!important}

  /* Content-specific mobile refinements. */
  .education-hero{min-height:430px!important;padding:20px!important}
  .education-hero h2{font-size:clamp(2.35rem,11vw,3.5rem)!important}
  .programme-gallery,.programme-gallery.compact{grid-template-columns:1fr!important;grid-template-rows:repeat(4,190px)!important}
  .programme-gallery button:first-child{grid-column:auto!important}
  .full-gallery-grid{grid-template-columns:1fr!important}
  .gallery-figure button,.gallery-figure.featured button{height:225px!important}
  .gallery-cta{padding:22px!important}

  .resource-row{grid-template-columns:1fr!important;padding:18px!important}
  .resource-actions{grid-column:auto!important;display:grid!important;grid-template-columns:1fr;width:100%;gap:8px!important}
  .resource-actions .btn{width:100%}
  .contact-detail-row{grid-template-columns:1fr!important;gap:3px!important}

  /* Account + Visitor Services */
  .account-hero{padding:42px 0!important}
  .account-layout,.service-hub-layout,.auth-grid,.action-callout,.request-card,.detail-grid{grid-template-columns:1fr!important}
  .account-nav{grid-template-columns:1fr 1fr!important}
  .account-kpis{grid-template-columns:1fr 1fr!important}
  .service-hub-intro h2{font-size:2rem!important}
  .data-pair{display:grid!important;gap:3px!important}
  .data-pair strong{text-align:left!important}

  /* Heritage Guide becomes a safe-area aware mobile panel. */
  .chat-launcher{right:max(10px,var(--safe-right))!important;bottom:calc(10px + var(--safe-bottom))!important}
  .chat-panel{
    left:max(8px,var(--safe-left))!important;
    right:max(8px,var(--safe-right))!important;
    width:auto!important;
    bottom:calc(72px + var(--safe-bottom))!important;
    height:min(620px,calc(100dvh - 92px - var(--safe-bottom)))!important;
    max-height:calc(100dvh - 92px - var(--safe-bottom));
  }
  .chat-input-row{grid-template-columns:minmax(0,1fr) auto!important}
  .chat-input-row input{min-width:0}

  .modal{padding:10px max(10px,var(--safe-right)) calc(10px + var(--safe-bottom)) max(10px,var(--safe-left))!important}
  .modal-card{width:100%!important;max-height:calc(100dvh - 20px - var(--safe-bottom))!important}
  .toast{left:max(12px,var(--safe-left))!important;right:max(12px,var(--safe-right))!important;bottom:calc(12px + var(--safe-bottom))!important;max-width:none!important}

  .site-footer{grid-template-columns:1fr!important;gap:24px!important;padding:42px max(18px,var(--safe-right)) calc(28px + var(--safe-bottom)) max(18px,var(--safe-left))!important}
  .site-footer .ntf-logo{width:205px!important}
}

@media(max-width:430px){
  .site-header{padding-left:max(8px,var(--safe-left))!important;padding-right:max(8px,var(--safe-right))!important;gap:5px!important}
  .ntf-logo{width:clamp(118px,34vw,136px)!important}
  .theme-button,.account-button,.mobile-menu-button{width:40px!important;min-width:40px;height:40px!important;min-height:40px;flex-basis:40px}

  .brand-hero-copy h1{font-size:clamp(2.5rem,13vw,3.35rem)!important}
  .brand-impact{min-height:92px}
  .brand-protect-grid{grid-template-columns:1fr!important}
  .protect-item,.protect-item:nth-child(even),.protect-item:nth-child(odd){padding:16px 0!important;border-right:0!important;border-bottom:1px solid var(--line)!important}
  .protect-item:last-child{border-bottom:0!important}

  .toolbar{grid-template-columns:1fr!important}
  .toolbar .search{grid-column:auto}
  .account-nav,.account-kpis,.programme-stats{grid-template-columns:1fr!important}
  .programme-stats > div{border-right:0!important;border-bottom:1px solid var(--line)!important}
  .programme-stats > div:last-child{border-bottom:0!important}
  .gallery-figure button,.gallery-figure.featured button{height:205px!important}
}

@media(max-width:350px){
  .ntf-logo{width:112px!important}
  .theme-button,.account-button,.mobile-menu-button{width:38px!important;min-width:38px;height:38px!important;min-height:38px;flex-basis:38px}
  .brand-impact-bar{grid-template-columns:1fr!important}
  .brand-impact{border-right:0!important;border-bottom:1px solid rgba(255,255,255,.16)!important}
  .brand-impact:last-child{border-bottom:0!important}
}

@media(max-width:720px){
  .mobile-menu a.active{background:rgba(36,136,69,.08);color:var(--brand-green);font-weight:900}
}

@media(max-width:720px){
  .integrated-map-frame{
    height:calc(100vh - 68px)!important;
    height:calc(100dvh - 68px)!important;
    min-height:600px!important;
  }
}
@media(max-width:430px){
  .integrated-map-frame{min-height:560px!important}
}