/* =========================================================
   SHARED HEADER + NAVIGATION
   Keep this file loaded AFTER each page stylesheet.
   ========================================================= */

:root{
  --portfolio-orange:#ff9138;
  --portfolio-cream:#fff4dc;
  --portfolio-ink:#171717;
  --portfolio-black:#050505;
  --shared-pad:clamp(18px,3vw,48px);

  /* one header height for the whole site */
  --header-h:76px;
}

/* ---------------------------------------------------------
   HEADER BASE
   Supports the standard class names plus the older project
   page class names, so projects.html does not break.
   --------------------------------------------------------- */

.site-header,
.projects-header{
  --header-nav-color:var(--portfolio-orange);
  --header-logo-color:#666;
  --header-menu-bg:var(--portfolio-cream);

  position:relative;
  z-index:100;
  width:100%;
  height:var(--header-h);
  min-height:var(--header-h);

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;

  padding:0 var(--shared-pad);

  background:transparent;
  color:var(--header-nav-color);
  border:0;
}

/*
  About + Playground were originally designed with the header
  sitting over the hero. Keep that layout while standardizing
  the visual treatment.
*/
body.about-page .site-header,
body.playground-page .site-header,
body:has(.about-hero) .site-header,
body:has(.playground-hero) .site-header{
  position:absolute;
  inset:0 0 auto 0;
}

/* ---------------------------------------------------------
   PAGE COLOR THEMES
   --------------------------------------------------------- */

/* black project timeline */
body.projects-page .site-header,
body.projects-page .projects-header{
  --header-nav-color:var(--portfolio-cream);
  --header-logo-color:var(--portfolio-cream);
  --header-menu-bg:var(--portfolio-black);
}

/* black inspiration page: cream logo + orange links */
body.inspiration-page .site-header,
body:has(.inspiration-hero) .site-header{
  --header-nav-color:var(--portfolio-orange);
  --header-logo-color:var(--portfolio-cream);
  --header-menu-bg:#090909;
}

/* dark about hero: cream logo + orange links */
body.about-page .site-header,
body:has(.about-hero) .site-header{
  --header-nav-color:var(--portfolio-orange);
  --header-logo-color:var(--portfolio-cream);
  --header-menu-bg:#202124;
}

/* orange playground hero: cream logo + cream links */
body.playground-page .site-header,
body:has(.playground-hero) .site-header{
  --header-nav-color:var(--portfolio-cream);
  --header-logo-color:var(--portfolio-cream);
  --header-menu-bg:var(--portfolio-orange);
}

/* optional explicit theme helpers if you ever need them */
.site-header.nav-orange,
.projects-header.nav-orange{
  --header-nav-color:var(--portfolio-orange);
}
.site-header.nav-cream,
.projects-header.nav-cream{
  --header-nav-color:var(--portfolio-cream);
}
.site-header.logo-cream,
.projects-header.logo-cream{
  --header-logo-color:var(--portfolio-cream);
}

/* ---------------------------------------------------------
   LOGO
   The mask lets the SAME pi_logo.svg become grey/orange/cream
   without keeping separate SVG files.
   --------------------------------------------------------- */

.site-logo-link,
.projects-logo-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  color:var(--header-logo-color);
}

.site-logo,
.projects-logo{
  display:block;
  width:clamp(145px,11vw,185px);
  height:auto;
}

/* recolor the SVG cleanly when mask support is available */
@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  .site-logo,
  .projects-logo{
    opacity:0;
  }

  .site-logo-link::before,
  .projects-logo-link::before{
    content:"";
    position:absolute;
    inset:50% auto auto 0;
    width:clamp(145px,11vw,185px);
    height:38px;
    transform:translateY(-50%);
    background:var(--header-logo-color);

    -webkit-mask:url("assets/images/pi_logo.svg") center / contain no-repeat;
    mask:url("assets/images/pi_logo.svg") center / contain no-repeat;

    pointer-events:none;
  }
}

/* ---------------------------------------------------------
   NAV
   --------------------------------------------------------- */

.main-nav,
.projects-nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:clamp(26px,2.8vw,44px);
  color:var(--header-nav-color);
}

.main-nav a,
.projects-nav a{
  position:relative;
  display:inline-block;

  color:inherit;
  text-decoration:none;

  font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(16px,1.05vw,20px);
  font-weight:400;
  line-height:1.15;

  padding:7px 0 9px;
}

/* underline draws in using the SAME color as the link */
.main-nav a::after,
.projects-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:2px;
  width:100%;
  height:1.5px;

  background:currentColor;

  transform:scaleX(0);
  transform-origin:right center;

  transition:transform .3s cubic-bezier(.22,.75,.18,1);
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after,
.main-nav a.active::after,
.main-nav a[aria-current="page"]::after,
.projects-nav a:hover::after,
.projects-nav a:focus-visible::after,
.projects-nav a.active::after,
.projects-nav a[aria-current="page"]::after{
  transform:scaleX(1);
  transform-origin:left center;
}

.main-nav a:focus-visible,
.projects-nav a:focus-visible{
  outline:2px solid currentColor;
  outline-offset:7px;
}

/* ---------------------------------------------------------
   MOBILE MENU BUTTON
   --------------------------------------------------------- */

.menu-button,
.projects-menu{
  display:none;
  width:34px;
  height:30px;
  padding:3px 0;
  border:0;
  background:transparent;
  cursor:pointer;
  color:var(--header-nav-color);
  flex:0 0 auto;
}

.menu-button span,
.projects-menu span{
  display:block;
  width:100%;
  height:1.5px;
  margin:5px 0;
  background:currentColor;
}

/* ---------------------------------------------------------
   RESPONSIVE HEADER
   --------------------------------------------------------- */

@media(max-width:900px){
  :root{--header-h:70px;}

  .site-logo,
  .projects-logo{
    width:140px;
  }

  @supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){
    .site-logo-link::before,
    .projects-logo-link::before{
      width:140px;
      height:34px;
    }
  }
}

@media(max-width:820px){
  .main-nav,
  .projects-nav{
    display:none;
  }

  .main-nav.mobile-open,
  .projects-nav.mobile-open{
    position:absolute;
    top:var(--header-h);
    right:var(--shared-pad);
    z-index:110;

    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:14px;

    min-width:180px;
    padding:18px 20px;

    background:var(--header-menu-bg);
    border:1px solid color-mix(in srgb, var(--header-nav-color) 22%, transparent);
  }

  .menu-button,
  .projects-menu{
    display:block;
  }
}

@media(max-width:620px){
  :root{--header-h:64px;}

  .site-header,
  .projects-header{
    padding-inline:18px;
  }

  .site-logo,
  .projects-logo{
    width:122px;
  }

  @supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){
    .site-logo-link::before,
    .projects-logo-link::before{
      width:122px;
      height:30px;
    }
  }

  .main-nav a,
  .projects-nav a{
    font-size:16px;
  }
}

@media(prefers-reduced-motion:reduce){
  .main-nav a::after,
  .projects-nav a::after{
    transition:none;
  }
}


/* =========================================================
   SHARED FOOTER
   ========================================================= */

.site-footer{
  background:var(--portfolio-orange)!important;
  color:#000!important;
  min-height:auto!important;
  height:auto!important;
  padding:clamp(30px,3vw,50px) var(--shared-pad) clamp(18px,1.6vw,26px)!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  overflow:hidden;
}
.footer-display{
  position:relative!important;
  min-height:clamp(280px,26vw,390px)!important;
  margin:0!important;
}
.footer-cue-svg{
  display:block!important;
  width:min(76vw,1420px)!important;
  max-width:none!important;
  height:auto!important;
  object-fit:contain!important;
}
.footer-display p{
  position:absolute!important;
  right:clamp(1px,1.5vw,30px)!important;
  bottom:clamp(-4px,0.2vw,6px)!important;
  margin:0!important;
  font-family:'Playfair Display',Georgia,serif!important;
  font-style:italic!important;
  font-size:clamp(86px,12.5vw,230px)!important;
  font-weight:500!important;
  line-height:.72!important;
  letter-spacing:-.055em!important;
  color:#000!important;
  white-space:nowrap;
}
.footer-contact{
  margin-top:clamp(14px,1.2vw,22px)!important;
  transform:none!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:clamp(8px,.7vw,12px)!important;
  height:auto!important;
}
.footer-socials{
  display:flex!important;
  align-items:center!important;
  gap:clamp(10px,.8vw,15px)!important;
  margin:0 0 clamp(6px,.5vw,9px) 0!important;
}
.footer-socials a{
  width:clamp(44px,4.5vw,68px)!important;
  height:clamp(44px,4.5vw,68px)!important;
  display:grid!important;
  place-items:center!important;
  transition:transform .2s ease!important;
}
.footer-socials a:hover{transform:scale(1.09)!important;}
.footer-socials img{width:100%!important;height:100%!important;object-fit:contain!important;}
.footer-email{
  color:#000!important;
  text-decoration:none!important;
  font-family:'Playfair Display',Georgia,serif!important;
  font-size:clamp(38px,6vw,92px)!important;
  line-height:1!important;
  letter-spacing:-.04em!important;
  overflow-wrap:anywhere;
}
.footer-bottom{
  margin-top:clamp(28px,2.2vw,38px)!important;
  padding:0!important;
  height:auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:3px!important;
  color:var(--portfolio-cream)!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:clamp(11px,.8vw,14px)!important;
  line-height:1.3!important;
}
.footer-bottom p{margin:0!important;}

@media(max-width:900px){
  .footer-display{min-height:clamp(240px,36vw,330px)!important;}
  .footer-display p{font-size:clamp(72px,14vw,150px)!important;}
  .footer-email{font-size:clamp(34px,7vw,64px)!important;}
}
@media(max-width:620px){
  .site-footer{padding-bottom:18px!important;}
  .footer-display{min-height:clamp(185px,45vw,270px)!important;}
  .footer-cue-svg{width:94vw!important;}
  .footer-display p{right:0!important;font-size:clamp(58px,18vw,105px)!important;}
  .footer-contact{margin-top:8px!important;}
  .footer-email{font-size:clamp(29px,8.5vw,48px)!important;}
  .footer-bottom{margin-top:22px!important;}
}