/* =========================================================================
   Marcelo Yannuzzi — personal site
   Shared stylesheet: theme tokens, navigation/footer chrome, responsive rules.
   Page-specific layout lives in the inline styles of each page (pixel-faithful
   to the original design components). Dark theme is the default.
   ========================================================================= */

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
a{color:inherit;}
html{scroll-behavior:smooth;}

/* ---- Theme tokens (dark = default) ------------------------------------- */
:root{
  --bg:#0e1316; --grid:rgba(255,255,255,.025);
  --panel:#121a1d; --border:#233034; --border-soft:#1e272c;
  --chip-bg:#0c1f1e; --chip-border:#1e4644;
  --text:#eef3f4; --title:#f3f7f7; --muted:#9fadb2; --muted2:#8a979d; --label:#6b7c80;
  --accent:#2ec9c9; --accent-ink:#06201f;
  --nav-bg:rgba(14,19,22,.82); --footer-bg:rgba(8,11,13,.55);
  --glow:1;
}
[data-theme="light"]{
  --bg:#e6edef; --grid:rgba(12,32,32,.06);
  --panel:#ffffff; --border:#c3ced1; --border-soft:#d2dbdd;
  --chip-bg:#e7f5f5; --chip-border:#bfe2e2;
  --text:#16201f; --title:#0d1a18; --muted:#54616a; --muted2:#5e6b70; --label:#74838b;
  --accent:#0c7e80; --accent-ink:#ffffff;
  --nav-bg:rgba(230,237,239,.85); --footer-bg:rgba(255,255,255,.5);
  --glow:1;
}
::selection{background:var(--accent);color:var(--accent-ink);}

/* ---- Page shell -------------------------------------------------------- */
.site{
  min-height:100vh;
  overflow-x:clip; /* contains hero-glow bleed without breaking the sticky nav */
  background-color:var(--bg);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:32px 32px;
  font-family:'Hanken Grotesk',sans-serif;
  color:var(--text);
}
.site--contact{display:flex; flex-direction:column;}

/* ---- Navigation / mobile menu ------------------------------------------ */
[data-r="burger-group"]{display:none;}
[data-r="mobile-menu"]{display:none; border-top:1px solid var(--border-soft); background:var(--nav-bg); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);}
[data-r="mobile-menu"] a{display:block; padding:15px 24px; font-family:'IBM Plex Mono',monospace; font-size:14px; letter-spacing:0.04em; color:var(--muted2); text-decoration:none; border-bottom:1px solid var(--border-soft);}
[data-r="mobile-menu"] a:last-child{border-bottom:none;}

/* ---- Light-theme refinements ------------------------------------------- */
[data-theme="light"] [data-r="ghost"]{background:#d6e0e2 !important; border-color:#b4c2c5 !important; color:#16201f !important;}
[data-theme="light"] [data-r="navactive"]{border-bottom:2px solid var(--accent); padding-bottom:2px;}
[data-theme="light"] [data-r="themebtn"]{font-size:17px !important; background:#d6e0e2 !important; border-color:#8fa1a4 !important;}
[data-theme="light"] [data-r="chip"]{background:#d6e0e2 !important; border-color:#aebdc0 !important; color:#243135 !important;}
[data-theme="light"] [data-r="hero-photo"]>div:first-child{filter:saturate(1.05) brightness(0.66) hue-rotate(-22deg) contrast(1.04);}
[data-theme="light"] [data-r="inno"]{border-top-color:#c3cdd0 !important;}

/* Experience timeline connector colour */
[data-r="timeline"]>div{border-left-color:rgba(46,201,201,0.5) !important;}
[data-theme="light"] [data-r="timeline"]>div{border-left-color:#92a1a5 !important;}

/* About portrait glow is hidden on the light background (matches source) */
[data-theme="light"] [data-glow="about"]{opacity:0 !important;}

/* ---- Subtle hover affordances ------------------------------------------ */
[data-r="navlinks"] a:not([data-r="themebtn"]):hover{color:var(--accent);}
[data-r="mobile-menu"] a:hover{color:var(--accent);}
.footer-links a:hover{color:var(--accent);}
[data-r="chip"]{transition:border-color .15s ease, color .15s ease;}
[data-r="chip"]:hover{border-color:var(--accent); color:var(--accent);}
.card-link{transition:border-color .15s ease, transform .15s ease;}
.card-link:hover{border-color:var(--accent);}
.tile-link:hover{text-decoration:underline;}

/* Theme toggle: make the ☀/☾ glyphs larger and clearer (they otherwise
   inherit the small 12.5px nav size on desktop and 14px on mobile). */
[data-r="themebtn"]{font-size:17px !important; color:var(--title) !important;}
[data-r="burger-group"] [data-action="toggle-theme"]{font-size:19px !important; width:40px !important; color:var(--title) !important;}
[data-r="themebtn"], [data-action]{transition:border-color .15s ease, background-color .15s ease;}
.btn{transition:filter .15s ease, opacity .15s ease;}
.btn:hover{filter:brightness(1.08);}
[data-r="ghost"].btn:hover{filter:none; border-color:var(--accent);}

/* ---- Responsive (union of all page breakpoints) ------------------------ */
@media (max-width:880px){
  [data-r="hero"]{grid-template-columns:1fr !important; min-height:auto !important; padding-bottom:24px !important;}
  /* The hero-photo wrapper holds only absolutely-positioned children, so a
     percentage/stretch width collapses to 0 on a 1fr grid item (Chromium quirk).
     A definite viewport-based width fills the column reliably and stays responsive. */
  [data-r="hero-photo"]{height:380px !important; width:min(88vw,420px) !important; margin:0 auto !important;}
  /* Lift the photo up on mobile so the head sits in the bright part of the glow
     and the lower body no longer overlaps the // HIGHLIGHTS section below. */
  [data-r="hero-photo"]>img{bottom:48px !important;}
  [data-r="g3"]{grid-template-columns:1fr 1fr !important;}
  [data-r="g2"]{grid-template-columns:1fr !important;}
  [data-r="split"]{grid-template-columns:1fr !important;}
  [data-r="portrait"]{order:-1; max-width:320px;}
  [data-r="inno"]{grid-template-columns:1fr !important;}
  [data-r="inno-img"]{order:-1; height:auto !important; margin-top:0 !important;}
  [data-r="bookrow"]{grid-template-columns:1fr !important;}
  [data-r="csplit"]{grid-template-columns:1fr !important;}
  [data-r="h1"]{font-size:42px !important;}
  [data-r="navlinks"]{display:none !important;}
  [data-r="burger-group"]{display:flex !important;}
  [data-r="mobile-menu"][data-open="true"]{display:block !important;}
  [data-r="pad"]{padding-left:24px !important; padding-right:24px !important;}
}
@media (max-width:560px){
  [data-r="g3"]{grid-template-columns:1fr !important;}
  [data-r="h1"]{font-size:34px !important;}
  [data-r="pad"]{padding-left:20px !important; padding-right:20px !important;}
}