/* nav.css: the navbar on every page (desktop menu, dropdowns, phone menu drawer).
   The markup is in partials/nav.html. Edit here and every page follows. */

/* GLOBAL NAV */
.global-nav{background:var(--dark-soft);border-bottom:1px solid var(--line-on-dark);line-height:1.6;} /* own line height: same bar on pages with other text settings (admin) */
.global-nav .gn-wrap{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 24px;gap:16px;flex-wrap:wrap;}
.gn-logo{display:flex;align-items:baseline;gap:8px;text-decoration:none;}
/* Logo: both words in the script font at the same size, "Worldschooling" gold, "Journeys" green (footer too) */
.gn-logo .gn-script, .gn-logo .gn-sans{font-family:'Caveat',cursive;font-weight:700;font-size:26px;line-height:1;}
.gn-logo .gn-script{color:var(--gold);}
.gn-logo .gn-sans{color:var(--green);}
.gn-links{display:flex;gap:26px;}
.gn-link{padding:4px 0;font-family:'Titillium Web',sans-serif;font-weight:600;font-size:14px;text-decoration:none;color:#c7ccd1;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;transition:color .15s ease;}
.gn-link:hover{color:var(--white);}
.gn-link.active{color:var(--green);}
@media (max-width:640px){
  .global-nav .gn-wrap{flex-direction:column;align-items:flex-start;gap:10px;}
}
/* ===== READABILITY TYPE SCALE =====
     Audience is mostly 40+, so body copy is 18px, nothing people actually read
     goes below 16px, and small uppercase labels bottom out at 14px. Kept as one
     block at the end so the whole scale lives in one place. */
.gn-link{font-size:16px;}
/* MOBILE NAVBAR - on phones only the logo + a menu button show; the links
     open in a drawer that slides in from the left over the page (the page
     behind is dimmed, not pushed down). The Trips dropdown is listed inline,
     since there's no hover on touch screens. */
.gn-toggle,.gn-backdrop,.gn-drawer-logo{display:none;}
.gn-toggle{font-family:inherit;}
@media (max-width:760px){
  .global-nav > .wrap, .global-nav > .gn-wrap{flex-direction:row;flex-wrap:nowrap;align-items:center;gap:0;}
  .gn-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:42px;height:42px;padding:10px;margin-left:auto;position:relative;z-index:1002;
    background:var(--dark-soft);border:1px solid var(--line-on-dark);border-radius:4px;cursor:pointer;
    }
  .gn-toggle span{display:block;height:2px;border-radius:2px;background:var(--white);transition:transform .2s ease, opacity .2s ease;}
  .global-nav.open .gn-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .global-nav.open .gn-toggle span:nth-child(2){opacity:0;}
  .global-nav.open .gn-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  #gnLinks{
    position:fixed;top:0;left:0;bottom:0;z-index:1001;width:min(80vw,310px);
    display:flex;flex-direction:column;flex-wrap:nowrap;gap:0;padding:22px 22px 30px;overflow-y:auto;
    background:var(--dark-soft);box-shadow:8px 0 30px rgba(0,0,0,.35);
    transform:translateX(-100%);visibility:hidden;transition:transform .25s ease, visibility 0s linear .25s;
    }
  .global-nav.open #gnLinks{transform:none;visibility:visible;transition:transform .25s ease;}
  .gn-drawer-logo{display:flex;margin-bottom:14px;}
  .gn-backdrop{
    display:block;position:fixed;inset:0;z-index:1000;background:rgba(13,22,32,.55);
    opacity:0;visibility:hidden;transition:opacity .25s ease, visibility 0s linear .25s;
    }
  .global-nav.open .gn-backdrop{opacity:1;visibility:visible;transition:opacity .25s ease;}
  #gnLinks .gn-link{display:block;padding:15px 2px;font-size:17px;border-top:1px solid var(--line-on-dark);}
  #gnLinks .gn-dropdown{flex-direction:column;align-items:stretch;}
  #gnLinks .gn-dropdown::after{display:none;}
  #gnLinks .gn-dropdown-menu{
    display:flex;position:static;margin:0 0 6px;padding:0 0 0 16px;min-width:0;
    background:none;border:none;box-shadow:none;
    }
  #gnLinks .gn-dropdown-item{padding:9px 2px;font-size:15px;}
}
/* NAV - live items in caps; About Us + Worldschooling Trips open dropdowns on hover */
.gn-links{flex-wrap:wrap;}
.gn-dropdown{position:relative;display:flex;align-items:center;}
.gn-dropdown-menu{
  position:absolute;top:100%;left:0;margin-top:14px;
  background:var(--dark-soft);border:1px solid var(--line-on-dark);border-radius:8px;
  min-width:200px;padding:6px;display:none;flex-direction:column;
  box-shadow:0 12px 30px rgba(0,0,0,0.35);z-index:20;
  }
/* The margin-top gap above would otherwise break :hover the instant the
     cursor leaves the link - this pseudo-element bridges it so the menu
     stays open on the way down to it. */
.gn-dropdown::after{content:'';position:absolute;top:100%;left:0;right:0;height:14px;}
.gn-dropdown:hover .gn-dropdown-menu{display:flex;}
.gn-dropdown-item{
  padding:9px 12px;font-family:'Titillium Web',sans-serif;font-weight:600;font-size:13.5px;
  color:#c7ccd1;text-decoration:none;border-radius:5px;white-space:nowrap;
  }
.gn-dropdown-item:hover{background:rgba(255,255,255,0.08);color:var(--white);}
.gn-link{text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;font-size:16px;}
.gn-dropdown-item{text-transform:uppercase;letter-spacing:.08em;font-size:14.5px;}
@media (max-width:1100px) and (min-width:761px){
  .gn-links{gap:8px 18px;}
  .gn-link{font-size:14.5px;letter-spacing:.06em;}
}
@media (max-width:760px){
  .gn-toggle{border-radius:4px;}
  #gnLinks .gn-link{padding:15px 2px;font-size:17px;}
  #gnLinks .gn-dropdown-item{font-size:15.5px;}
}

/* Phone navbar: bigger logo, centred in the bar (menu button stays on the right).
   The copy of the logo inside the open menu drawer is not affected. */
@media (max-width:760px){
  .global-nav > .wrap, .global-nav > .gn-wrap{position:relative;min-height:66px;padding-left:16px;padding-right:16px;}
  .global-nav > .wrap > .gn-logo, .global-nav > .gn-wrap > .gn-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);gap:7px;white-space:nowrap;}
  .global-nav > .wrap > .gn-logo .gn-script, .global-nav > .gn-wrap > .gn-logo .gn-script,
  .global-nav > .wrap > .gn-logo .gn-sans, .global-nav > .gn-wrap > .gn-logo .gn-sans{font-size:clamp(26px,7.4vw,32px);}
}
/* Smallest phones: a little smaller so it never touches the menu button */
@media (max-width:374px){
  .global-nav > .wrap > .gn-logo .gn-script, .global-nav > .gn-wrap > .gn-logo .gn-script,
  .global-nav > .wrap > .gn-logo .gn-sans, .global-nav > .gn-wrap > .gn-logo .gn-sans{font-size:23px;}
}