/*
Theme Name: view from here
Theme URI: https://viewfromhere.co.uk
Author: Elliott Greenman
Author URI: https://elliottgreenman.com
Description: Custom WordPress theme for view from here — coaching, 360° feedback and facilitation. Ships with branded page templates for the homepage and coaching pages.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: view-from-here
*/

/* ==========================================================================
   Brand tokens — short aliases used by page-template stylesheets.
   The full design system tokens live in assets/vfh-system.css (--vfh-*).
   ========================================================================== */
:root{
  --purple:#8B7CB6; --purple-soft:#EFEAF6; --purple-deep:#6B5B96;
  --gold:#E0A82E;   --gold-soft:#F6E8C6;
  --cyan:#1FA3C2;   --cyan-soft:#CCEAF0;
  --teal:#3E9B8A;   --teal-soft:#D0E7E1;
  --navy:#0E2340;
  --charcoal:#3D4644;   /* brand-guideline dark — used by primary buttons */
  --ink:#1A1A1A; --body:#3B3B3B; --muted:#7A7A7A;
  --rule:#E4DFD4; --cream:#F3ECDE; --cream-deep:#EADFC5; --white:#fff;
  --ff-d:'Open Sans',system-ui,sans-serif;
  --ff-b:'Open Sans',system-ui,sans-serif;
}

/* === Reset & base ========================================================= */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--ff-b);color:var(--body);background:#F8F5EE;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}

/* WordPress default classes */
.alignleft{float:left;margin:0 24px 12px 0}
.alignright{float:right;margin:0 0 12px 24px}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.screen-reader-text{position:absolute;clip:rect(0 0 0 0);width:1px;height:1px;overflow:hidden}

/* === Container ============================================================ */
/* .wrap is defined in vfh-system.css using --w-container (1320px). */

/* === Buttons ============================================================== */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 32px;border-radius:999px;font-family:var(--ff-b);font-weight:600;font-size:17px;letter-spacing:.02em;background:var(--charcoal);color:#fff;border:1px solid var(--charcoal);transition:.25s;box-shadow:0 12px 30px -12px rgba(61,70,68,.5);cursor:pointer}
.btn:hover{background:#fff;color:var(--charcoal);box-shadow:0 18px 40px -12px rgba(61,70,68,.3)}
.btn.ghost{background:transparent;color:var(--charcoal);box-shadow:none}
.btn.ghost:hover{background:var(--charcoal);color:#fff}
.btn svg{width:14px;height:14px}

/* === Site header / navigation ============================================
   Desktop layout: grid with three columns — brand (left) / nav (centre) /
   CTA (right) — so the centre nav is true-centred regardless of how wide
   the logo or button get.
   ========================================================================== */
header.site{padding:26px 0;background:transparent;position:relative;z-index:5}
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px}
.brand{display:flex;align-items:center;gap:10px;justify-self:start}
.brand img{height:60px;width:auto;display:block}

/* Scoped to the top-level menu only — submenus need to stack as plain blocks,
   not inherit the horizontal flex layout. */
nav > ul{display:flex;gap:30px;font-size:17px;color:var(--ink);justify-self:center}
nav ul ul{display:block;gap:0}
nav a{transition:color .2s}
nav a:hover,nav a.active{color:var(--purple)}
nav a.active{font-weight:600}
nav ul li{position:relative}
nav ul li.has-sub > a::after,
nav ul li.menu-item-has-children > a::after{content:'';display:inline-block;margin-left:7px;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.6}
/* Dropdown: visual 10px gap below the trigger, but a transparent hover bridge
   fills it so the cursor doesn't lose focus while crossing the gap. */
nav ul ul{position:absolute;top:calc(100% + 10px);left:-18px;background:#fff;border:1px solid var(--rule);border-radius:12px;padding:8px 0;min-width:170px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .2s ease,visibility 0s linear .2s;box-shadow:0 16px 40px -20px rgba(14,35,64,.3);z-index:10}
nav ul ul::before{content:'';position:absolute;top:-10px;left:0;right:0;height:10px;background:transparent}
nav ul li:hover > ul,nav ul li:focus-within > ul{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .18s ease,transform .2s ease,visibility 0s linear 0s}
nav ul ul li{display:block}
nav ul ul a{display:block;padding:8px 20px;font-size:15px;color:var(--ink)}
nav ul ul a:hover{color:var(--purple);background:var(--purple-soft)}

.nav-cta{font-size:17px;font-weight:600;letter-spacing:.02em;padding:11px 26px;background:var(--charcoal);color:#fff;border:1px solid var(--charcoal);border-radius:999px;transition:.25s;box-shadow:0 8px 20px -10px rgba(61,70,68,.45);white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.nav-cta:hover{background:transparent;color:var(--charcoal)}

/* === Nav drawer ==========================================================
   Desktop: dissolves into the parent .nav grid (display: contents) so nav
   and CTA become direct grid items — nav centred, CTA right.
   Mobile: becomes the full-height fade-in-down overlay drawer.
   ========================================================================== */
.nav-drawer{display:contents}
.nav-drawer .nav-cta{justify-self:end}

/* Hamburger button — hidden on desktop. */
.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;padding:0;position:relative;z-index:60}
.nav-toggle__bar{position:absolute;left:10px;width:24px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s ease, opacity .2s ease, top .25s ease}
.nav-toggle__bar:nth-child(1){top:14px}
.nav-toggle__bar:nth-child(2){top:21px}
.nav-toggle__bar:nth-child(3){top:28px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){top:21px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){top:21px;transform:rotate(-45deg)}

@media(max-width:880px){
  .nav{display:flex;justify-content:space-between;align-items:center;gap:20px}
  .nav-toggle{display:block}

  .nav-drawer{
    display:flex;
    position:fixed;inset:0;
    background:var(--paper,#F8F5EE);
    z-index:50;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    padding:100px var(--gutter-mobile,20px) 32px;
    opacity:0;
    transform:translateY(-12px);
    pointer-events:none;
    transition:opacity .25s ease, transform .3s ease;
    overflow-y:auto;
  }
  .nav-drawer .nav-cta{justify-self:auto}
  body.vfh-nav-open .nav-drawer{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  body.vfh-nav-open{overflow:hidden}

  /* Menu list inside drawer */
  .nav-drawer nav{flex:1}
  .nav-drawer nav ul{display:flex;flex-direction:column;gap:6px;font-size:22px;letter-spacing:-.005em}
  .nav-drawer nav ul li a{display:block;padding:10px 0;color:var(--ink)}
  .nav-drawer nav ul li.has-sub > a::after,
  .nav-drawer nav ul li.menu-item-has-children > a::after{display:none}

  /* Submenu — always visible inline inside the drawer */
  .nav-drawer nav ul ul{
    position:static;display:block;
    opacity:1;visibility:visible;transform:none;
    transition:none;
    background:transparent;border:0;box-shadow:none;
    margin:4px 0 8px;padding:0 0 0 16px;
    border-left:2px solid var(--rule);
    min-width:0;
  }
  /* Cancel the desktop bridge that adds top space */
  .nav-drawer nav ul ul::before{display:none}
  .nav-drawer nav ul ul li a{font-size:17px;color:var(--muted);padding:6px 0;display:block}

  /* Schedule-a-call pinned to the bottom of the drawer */
  .nav-drawer .nav-cta{
    margin-top:auto;
    width:100%;
    justify-content:center;
    padding:16px 26px;
    font-size:15px;
  }
}

/* === Site footer ========================================================== */
footer.site{background:var(--charcoal);color:#D8DEE8;padding:70px 0 36px;border-top:1px solid rgba(255,255,255,.08)}
.foot{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px;align-items:start}
footer.site h4{font-family:var(--ff-b);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-bottom:16px}
footer.site ul{display:flex;flex-direction:column;gap:9px;font-size:14px}
footer.site a:hover{color:#fff}
.brand-f img{width:100%;max-width:280px;height:auto;display:block;filter:brightness(0) invert(1);opacity:.95}
.brand-f p{margin-top:20px;font-size:19px;line-height:1.4;color:#C7D0DF;max-width:300px;font-style:italic}
.legal{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.1);padding-top:24px;font-size:13px;color:#9AA5BA;flex-wrap:wrap;gap:14px}
.social{display:flex;gap:12px}
.social a{width:34px;height:34px;border:1px solid rgba(255,255,255,.25);border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600;letter-spacing:.02em;color:#C7D0DF;background:transparent;transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease}
/* Higher-specificity hover so the footer-link `:hover {color:#fff}` rule doesn't win. */
footer.site .social a:hover{background:var(--purple);border-color:var(--purple);color:#fff;transform:translateY(-1px) scale(1.05)}

/* === Mobile =============================================================== */
@media(max-width:880px){
  .foot{grid-template-columns:1fr;gap:32px}
  .brand-f img{max-width:240px}
}