/* TransHimalaya — masthead, navigation and footer
   THE header/footer stylesheet. Every page loads this and nothing else
   styles the chrome, so a change here changes it site-wide.
   Norzin Consultancy, 2026 */

/* ---- masthead: utility bar above, logo centred beneath ---- */
.th-head{ max-width:1200px; margin:0 auto; padding:14px clamp(16px,4vw,40px) 4px; text-align:center; }
.th-util{ display:flex; align-items:center; gap:12px; min-height:42px; }
.th-donate{ margin-left:auto; }
.th-burger{ display:none; width:42px; height:42px; padding:0; border:0; background:transparent;
  align-items:center; justify-content:center; }
.th-burger .bars, .th-burger .bars::before, .th-burger .bars::after{
  display:block; width:22px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .22s ease, opacity .18s ease; }
.th-burger .bars{ position:relative; }
.th-burger .bars::before, .th-burger .bars::after{ content:""; position:absolute; left:0; }
.th-burger .bars::before{ top:-7px; } .th-burger .bars::after{ top:7px; }
.th-burger[aria-expanded="true"] .bars{ background:transparent; }
.th-burger[aria-expanded="true"] .bars::before{ transform:translateY(7px) rotate(45deg); }
.th-burger[aria-expanded="true"] .bars::after{ transform:translateY(-7px) rotate(-45deg); }

/* ---- primary navigation ---- */
.th-nav { max-width:1200px; margin:18px auto 0; padding:13px clamp(16px,4vw,40px);
    display:flex; justify-content:center; align-items:center; gap:22px; flex-wrap:wrap;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.th-nav a { color:var(--ink); text-decoration:none; font-size:14px; font-weight:500; padding-bottom:3px; white-space:nowrap; }
.th-nav a .ca { font-size:9px; opacity:.55; }
.th-nav a.active { box-shadow:inset 0 -2px 0 var(--orange); }
.th-nav a:hover { color:var(--orange); }
.th-donate { background:var(--orange); color:#fff; border:0; font:inherit; font-weight:600; font-size:14px; padding:10px 18px; border-radius:6px; display:inline-flex; align-items:center; gap:7px; }
.th-donate:hover { background:#d17d22; }

/* ---- the logo lockup carries the name and strapline ---- */
.th-mast{ display:block; margin:0 auto; width:clamp(230px,26vw,320px);
  aspect-ratio:900/654; background:var(--img-logo) center/contain no-repeat; }

/* ---- navigation submenus (desktop dropdown) ---- */
.th-item{ position:relative; display:inline-flex; }
.th-sub{ position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px);
  min-width:210px; background:#fff; border:1px solid var(--line); border-radius:6px;
  box-shadow:0 14px 34px rgba(18,40,55,.14); padding:6px; z-index:40;
  display:flex; flex-direction:column; opacity:0; visibility:hidden; transition:.16s ease; }
.th-item:hover .th-sub, .th-item:focus-within .th-sub{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.th-sub a{ padding:9px 12px; border-radius:4px; white-space:nowrap; font-size:14px; }
.th-sub a:hover{ background:var(--sand); color:var(--orange); }

/* ---- newsletter band ---- */
.th-news { background:linear-gradient(120deg,#1c4b5f,#123243); color:#fff; }
.th-news .in { max-width:1200px; margin:0 auto; padding:32px clamp(16px,4vw,40px); display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.th-news .mail { width:52px; height:52px; border:2px solid rgba(255,255,255,.5); border-radius:50%; display:grid; place-items:center; flex:none; color:#fff; }
.th-news .txt { flex:1; min-width:220px; }
.th-news h3 { margin:0 0 4px; font-size:24px; }
.th-news p { margin:0; font-size:14px; color:#cfdbe1; max-width:44ch; }
.th-form { display:flex; flex-direction:column; gap:8px; }
.th-form .row { display:flex; }
.th-form .row p, .th-form .row span.wpcf7-form-control-wrap { display:contents; }
.th-form br { display:none; }
.th-form input { border:0; padding:12px 14px; font:inherit; font-size:14px; width:min(260px,60vw); border-radius:6px 0 0 6px; color:#222; }
.th-form button, .th-form input[type="submit"] { border:0; background:var(--orange); color:#fff; font:inherit; font-weight:700; font-size:14px; padding:0 18px; border-radius:0 6px 6px 0; cursor:pointer; }
.th-form small { font-size:11px; color:#aebfc7; }
.th-form .wpcf7-response-output{ font-size:12px; color:#fff; margin:0; padding:0; border:0; }
.th-form .wpcf7-not-valid-tip{ display:block; font-size:11px; color:#ffd166; }

/* ---- footer ---- */
.th-foot { background:var(--navy); color:#b7c4cb; }
.th-foot .cols { max-width:1200px; margin:0 auto; padding:40px clamp(16px,4vw,40px); display:grid; grid-template-columns:1.35fr 1fr 1.25fr 1fr; gap:30px; }
/* The reversed mark: the supplied logo is navy on transparent, which the navy
   footer would swallow, so assets/img/logo-full-reverse.png carries the
   wordmark and strapline in cream with the emblem left in full colour. */
.th-footlogo { display:block; width:clamp(168px,15vw,206px); }
.th-footlogo img { display:block; width:100%; height:auto; }
.th-foot .sub { font-style:italic; font-size:12px; color:#8fa2ab; margin:12px 0; }
.th-foot .contact div { display:flex; gap:9px; align-items:baseline; font-size:13px; margin:7px 0; }
.th-foot .contact .ic { opacity:.7; }
.th-foot h5 a { color:inherit; text-decoration:none; }
.th-foot h5 a:hover { color:var(--orange); }
.th-foot .contact a { color:inherit; text-decoration:none; }
.th-foot .contact a:hover { color:var(--orange); }
.th-foot h5 { color:#fff; font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 14px; }
.th-foot ul { list-style:none; margin:0; padding:0; }
.th-foot li { margin:8px 0; }
.th-foot a { color:#b7c4cb; text-decoration:none; font-size:13.5px; }
.th-foot a:hover { color:var(--orange); }
.th-links { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.th-social { display:flex; gap:9px; margin-bottom:16px; }
.th-social a { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; font-size:14px; }
.th-social svg { width:17px; height:17px; }
.th-quote { font-style:italic; font-size:13.5px; color:#cdd8de; line-height:1.5; }
.th-bar { border-top:1px solid rgba(255,255,255,.12); }
.th-bar .in { max-width:1200px; margin:0 auto; padding:14px clamp(16px,4vw,40px); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12px; color:#8fa2ab; }
.th-bar a { font-size:12px; color:#8fa2ab; text-decoration:none; }
.th-bar a:hover { color:var(--orange); }

@media (max-width:820px){
  .th-foot .cols{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .th-foot .cols{ grid-template-columns:1fr; }
}

/* ---- small screens: navigation collapses behind the hamburger ---- */
@media (max-width:820px){
  .th-burger{ display:flex; }
  .th-nav{ display:none; flex-direction:column; align-items:stretch; gap:0;
    margin-top:0; padding:4px clamp(16px,4vw,40px) 10px; border-top:0; }
  .th-nav.is-open{ display:flex; }
  .th-nav > a{ width:100%; padding:13px 0; border-bottom:1px solid var(--line); }

}

/* ---- small screens: submenus sit in the flow, not in a floating panel.
   Declared last so they override the desktop dropdown rules above. ---- */
@media (max-width:820px){
  /* submenus drop out of the floating panel and sit in the flow */
  .th-item{ display:block; width:100%; }
  .th-item > a{ display:flex; align-items:center; justify-content:space-between;
    width:100%; padding:13px 0; border-bottom:1px solid var(--line); }
  .th-item > a .ca{ font-size:11px; opacity:.7; transition:transform .2s ease; }
  .th-item.is-open > a{ color:var(--orange); border-bottom-color:transparent; }
  .th-item.is-open > a .ca{ transform:rotate(180deg); }
  /* in the flow, no floating-panel transition — a lingering opacity/visibility
     transition here leaves the newly shown links unpainted until a reflow */
  .th-sub{ position:static; transform:none; opacity:1; visibility:visible;
    transition:none; display:none; min-width:0; width:100%; background:transparent;
    border:0; border-radius:0; box-shadow:none;
    padding:0 0 6px 16px; border-left:2px solid var(--line); margin-bottom:10px; }
  .th-item.is-open .th-sub{ display:flex; }
  /* the desktop dropdown centres itself with translateX(-50%); that rule has
     higher specificity and would shove the in-flow mobile submenu off-screen
     on hover/focus, so neutralise it here */
  .th-item:hover .th-sub, .th-item:focus-within .th-sub{ transform:none; }
  .th-sub a{ transition:none; }
  .th-sub a{ padding:11px 12px; border-radius:4px; font-size:14.5px; white-space:normal; }
}

/* ---- back to top ----
   A real link to #top, so it works before the script loads and for anyone
   without JavaScript. The script only decides when it is worth showing. */
.th-top{ position:fixed; right:clamp(14px,2.5vw,28px); bottom:clamp(14px,2.5vw,28px);
  z-index:60; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; background:var(--navy); color:#fff;
  box-shadow:0 6px 18px rgba(18,40,55,.28); text-decoration:none;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s, background .18s; }
.th-top.is-on{ opacity:1; visibility:visible; transform:none; }
.th-top:hover{ background:var(--orange); }
.th-top:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }
.th-top .ic{ width:19px; height:19px; opacity:1; }

/* it would otherwise sit on top of the footer's last line on narrow screens */
@media (max-width:560px){ .th-top{ width:40px; height:40px; } }

@media (prefers-reduced-motion: reduce){
  .th-top{ transition:opacity .2s ease, visibility .2s; transform:none; }
}