/* layer order */
#bg{z-index:0;} #overlay{z-index:1;position:fixed;} #main{z-index:2;position:fixed;}

/* compact readable header “card” */
#header{
  position:relative; z-index:3;
  display:inline-block; max-width:35%;
  padding:1rem 1.5rem; border-radius:28px;
  background:rgba(0,0,0,.45); box-shadow:0 10px 30px rgba(0,0,0,.25);
}
#header h1{ text-shadow:0 4px 12px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.75); }
#header p { text-shadow:0 2px 6px  rgba(0,0,0,.35); }

/* Mobile-first: big on phones */
#header{
  display: inline-block;
  width: auto !important;
  max-width: 90%;
  padding: 1rem 1.25rem;   /* keep your padding */
}

/* Tablet/Desktop: cap at 35% of viewport/container */
@media (min-width: 1024px){
  #header{ max-width: 35%; }          /* or use 35vw if you prefer viewport-based */
}

/* Keep centered */
#main{ text-align: center; }

/* Mobile: move image around*/
@media (max-width: 736px){
  #bg{
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: 50% 25% !important;   /* ↓ try 15–40% */
    background-position-x: 100% !important;     /* belts & suspenders */
    background-position-y: 20% !important;
  }
}

@media (max-width: 736px){
  #bg{
    transform: translateY(-15vh) translateX(-5vh) scale(1.5);  /* nudge up + zoom */
    transform-origin: 50% 25%;
  }
}

/* MOVE THE BOX DOWN ON MOBILE */
    /* Desktop/base: neutralize the theme's -1em nudge */
    #header { position: relative; top: 0 !important; }

    /* Mobile: push the card down */
    @media (max-width: 736px){
    #header{
        top: 14vh !important;   /* try 6–20vh to taste */
        /* or use margin if you prefer:
        margin-top: 12vh !important;
        */
    }
    }


/*ADDING REPORTS BUTTON*/
/* CTA block under the icon row */
#header .reports-cta { margin-top: 1rem; }

#header .reports-cta h2{
  font-size: 1.60em;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 .5rem;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
}

/* Pill button matching the theme */
#header .btn{
  display: inline-block;
  padding: .65rem 1.1rem;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 9999px;
  color: #fff;
  background: rgba(255,255,255,.08);
  text-decoration: none;
  transition: transform .15s ease, background-color .2s, border-color .2s;
}
#header .btn:hover  { background: rgba(255,255,255,.18); border-color: #fff; transform: translateY(-1px); }
#header .btn:active { transform: translateY(0); }

/* Mobile sizing */
@media (max-width: 736px){
  #header .reports-cta h2 { font-size: 1.1em; }
  #header .btn { padding: .6rem 1rem; }
}

/*New bigger button*/
#header .reports-cta .icon.big:before{
  font-size: 1.8em;     /* icon glyph size */
  width: 2.2em;         /* circle size */
  height: 2.2em;
  line-height: 2.2em;
  border-width: 1px;    /* thicker ring (optional) */
}
#header .reports-cta .icon.big{ margin-top:.4rem; } /* spacing (optional) */

/* Remove dotted line under resume icon */
#header .reports-cta a.icon { border-bottom: 0 !important; }

#header .reports-cta a.icon:before{
  border: 1px solid #fff;     /* ring */
  border-radius: 100%;
  display: inline-block;
  width: 3.0em;               /* circle size */
  height: 3.0em;
  line-height: 3.0em;
}
#header .reports-cta a.icon:hover:before{
  background-color: rgba(255,255,255,.175);
  color: #fff;
}

#header .reports-cta { text-align: center; }
#header .reports-cta a.icon { display: inline-block; }  /* ensures it can be centered */

/* Smooth hover grow like the other icons */
#header .reports-cta a.icon:before{
  transition: transform .2s ease;      /* animate the grow */
  transform-origin: 50% 50%;
  will-change: transform;
}
#header .reports-cta a.icon:hover:before{
  transform: scale(1.08);              /* match the other icons’ “pop” */
}

/* TEXT LINKS BELOW BUTTONS */
/* style the h2 links like subtle buttons */
#header .reports-cta h2 { margin: .5rem 0; }
#header .reports-cta h2 a.link-card{
  display:inline-block;
  padding:.25rem .4rem;
  border-radius:10px;
  background: rgba(255,255,255,.08);
  color:#fff;
  border:1px solid rgba(255,255,255,.75);
  text-decoration:none;
  position:relative;
  transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease, border-color .2s ease;
}

/* underline reveal + lift on hover/focus (no layout shift) */
#header .reports-cta h2 a.link-card::after{
  content:"";
  position:absolute; left:12px; right:12px; bottom:.4rem;
  height:2px; border-radius:2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .2s ease;
  opacity:.75;
}

#header .reports-cta h2 a.link-card:hover,
#header .reports-cta h2 a.link-card:focus-visible{
  background: rgba(255,255,255,.18);
  border-color:#fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
#header .reports-cta h2 a.link-card:hover::after,
#header .reports-cta h2 a.link-card:focus-visible::after{
  transform: scaleX(1);
}

/* keyboard focus ring for accessibility */
#header .reports-cta h2 a.link-card:focus-visible{
  outline:2px solid #fff; outline-offset:2px;
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #header .reports-cta h2 a.link-card{ transition:none; }
  #header .reports-cta h2 a.link-card::after{ transition:none; }
}

/* Desktop: make the Resume/Reports text a bit smaller */
@media (min-width: 1024px){
  #header .reports-cta h2 { font-size: 0.95em; }          /* try 0.9–0.95 */
  /* optional: tighten the chip a touch on desktop */
  #header .reports-cta h2 a.link-card { padding: .3rem .55rem; }
}

@media (hover: none){
  /* avoid sticky hover on touch */
  #header .reports-cta h2 a.link-card:hover { transform: none; box-shadow: none; }
  #header .reports-cta h2 a.link-card:hover::after { transform: scaleX(0); }
}

/* Make the two link-chips fade/slide in like the nav icons */
#header .reports-cta h2{
  opacity: 0;
  transform: translate3d(0,1em,0);
  backface-visibility: hidden;
  animation: nav-icons 0.5s ease-in-out forwards; /* uses keyframes from main.css */
}

/* Stagger them a bit (tweak timing to taste) */
#header .reports-cta h2:nth-child(1){ animation-delay: 3.5s; }
#header .reports-cta h2:nth-child(2){ animation-delay: 3.7s; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #header .reports-cta h2{ animation: none; opacity: 1; transform: none; }
}