/* ============================================================
   Will Maxcy – Global Styles  (v9, tidied)
   ============================================================ */

/* ---------- CSS Custom Properties ---------- */
:root{
  --page-bg:#b4b0a5;
  --card-bg:#e3dfd4;
  --text:#000;
  --accent:#ff3131;
  --navbar-bg:#fff;
  --content-width:70%;
  --max-width:900px;
  --radius:20px;
}

/* ---------- Base Reset ---------- */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:"Poppins",sans-serif;
  color:var(--text);
}
body{background:var(--page-bg);padding-top:120px;color:var(--text);}



/* ============================================================
   NAVBAR
   ============================================================ */
.navbar{
  position:fixed;top:20px;left:50%;transform:translateX(-50%);
  width:clamp(320px,var(--content-width),var(--max-width));
  background:var(--navbar-bg);
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 32px;border-radius:16px;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
  z-index:1000;
}
.divider{margin-left:auto;margin-right:1rem;opacity:.4}

.nav-icons{display:flex;gap:1rem;font-size:1.15rem}
.nav-link{display:flex;align-items:center;position:relative;text-decoration:none}

.nav-icon{
  width:22px;height:22px;
  background-size:contain;background-repeat:no-repeat;
  transition:opacity .25s;
}
.icon-home   {background-image:url("images/homeb.svg")}
.icon-about  {background-image:url("images/aboutb.svg")}
.icon-contact{background-image:url("images/contactb.svg")}

.nav-link:hover .icon-home   {background-image:url("images/homer.svg")}
.nav-link:hover .icon-about  {background-image:url("images/aboutr.svg")}
.nav-link:hover .icon-contact{background-image:url("images/contactr.svg")}
/* make the “active” nav link red and non‑clickable */
.nav-link.active{pointer-events:none;cursor:default}
.nav-link.active .icon-about{background-image:url("images/aboutr.svg")}

.tooltiptext{
  position:absolute;bottom:-38px;left:50%;transform:translateX(-50%);
  white-space:nowrap;font-size:.7rem;
  background:var(--text);color:#fff;padding:4px 10px;border-radius:6px;
  opacity:0;visibility:hidden;transition:opacity .2s;
}
.nav-link:hover .tooltiptext{opacity:1;visibility:visible}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
}

/* ============================================================
   HOME CARDS
   ============================================================ */
.home-card{
  background:var(--card-bg);
  border-radius:var(--radius);
  box-shadow:0 6px 12px rgba(0,0,0,.15);
  width:clamp(320px,var(--content-width),var(--max-width));
  margin:0 auto 3rem;
  padding:3rem 2rem 2.5rem;
  text-align:center;
}
.home-card h1{
  font-family:"Evolve Sans",sans-serif;
  font-size:clamp(2.5rem,6vw,4rem);
  margin-bottom:.5rem;
}
.home-card .lead{
  font-size:1.15rem;line-height:1.6;
  max-width:600px;margin:0 auto 2rem;
}

/* ============================================================
   WAVE BUTTON
   ============================================================ */
/* ---------- WAVE BUTTON ---------- */
.wave-btn{
  position:relative;
  background:var(--accent);
  color:#000;                 /* keep only one colour here → black by default */
  border:none;
  padding:1rem 2.6rem;
  border-radius:50px;
  font-size:2rem;
  cursor:pointer;
  margin-bottom:3rem;
  transition:transform .25s,
              box-shadow .25s,
              background .3s,
              color .3s;
}

.wave-btn:hover{
  background:#000;
  color:#fff;                 /* will now flip to white on hover */
}

.wave-btn .back{
  position:fixed;top:0;left:50%;
  transform:translateX(-50%) translateY(120vh);
  font-size:30rem;pointer-events:none;opacity:0;color:#fff;
}
.wave-btn span{
  color:inherit;              /* front text follows the button’s colour */
}

/* big emoji slides up → center → wiggle → fade */
@keyframes popWave{
  0%   {transform:translateX(-50%) translateY(120vh) rotate(0);opacity:0}
  25%  {transform:translateX(-50%) translateY(0)     rotate(0);opacity:1}
  45%  {transform:translateX(-50%) translateY(0)     rotate(25deg)}
  60%  {transform:translateX(-50%) translateY(0)     rotate(-25deg)}
  75%  {transform:translateX(-50%) translateY(0)     rotate(15deg)}
  90%  {transform:translateX(-50%) translateY(0)     rotate(-10deg)}
  100% {transform:translateX(-50%) translateY(0)     rotate(0);opacity:0}
}
.wave-btn.wave .back{animation:popWave 2s ease-out forwards}

/* ============================================================
   LAYOUT GRIDS
   ============================================================ */
.portfolio-grid{
  display:grid;gap:1.2rem;
  grid-template-columns:repeat(2,1fr);     /* always 2 col */
}
.two-up{
  display:grid;gap:1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.follow-row{gap:2rem;justify-content:center}

@media(max-width:700px){
  .portfolio-grid{grid-template-columns:1fr}
}

/* ============================================================
   MINI‑CARDS
   ============================================================ */
.mini-card{
  display:flex;flex-direction:column;align-items:center;
  text-decoration:none;background:var(--card-bg);
  border-radius:var(--radius);overflow:hidden;
  box-shadow:0 4px 8px rgba(0,0,0,.12);
  transition:transform .25s,box-shadow .25s,
             background .3s,color .3s;
}
.mini-card img{width:100%;height:140px;object-fit:cover}
.mini-card span{padding:.9rem 0;font-weight:600}

.mini-card:hover{
  transform:translateY(-6px);
  box-shadow:0 8px 16px rgba(0,0,0,.2);
}

/* accent‑mini: red → black + white text on hover */
.mini-card.accent-card{background:var(--accent)}
.mini-card.accent-card span{color:#000}

.mini-card.accent-card:hover{background:#000}
.mini-card.accent-card:hover span{color:#fff}

/* ============================================================
   CTA BUTTONS
   ============================================================ */
.cta-btn{
  background:var(--accent);color:#000;border:none;
  padding:.9rem 2.2rem;border-radius:12px;font-weight:600;
  text-transform:uppercase;text-decoration:none;
  transition:background .25s,color .25s;
}
.cta-btn:hover{background:#000;color:#fff}

/* ============================================================
   BLOG‑SPECIFIC STYLES (feed, card, markdown, etc.)
   ============================================================ */

/* feed container */
.blog-feed{
  display:grid;gap:.1rem;
  width:clamp(320px,var(--content-width),var(--max-width));
  margin-inline:auto;
}

/* blog card */
.blog-card{
  display:flex;flex-direction:column;cursor:default;
  background:var(--card-bg);border-radius:var(--radius);
  box-shadow:0 6px 12px rgba(0,0,0,.15);
  transition:transform .25s,box-shadow .25s;
}
.blog-card img{
  width: 100%;
  height: auto;              /* keep aspect‑ratio                */
  object-fit: contain;       /* no cropping – scale to fit       */
  object-position: center;   /* centre the image in its box      */
  max-height: 400px;         /* optional: cap very tall images   */
  border-radius: var(--radius) var(--radius) 0 0;
}

.blog-card h2{margin-top:1rem;padding:0 .75rem;font-size:2rem}
.blog-date{padding:0 .75rem;margin-bottom:.4rem;color:#555;font-size:.9rem}

.blog-content{
  padding:0 .75rem 0;line-height:1.6;
  max-height:0;overflow:hidden;
  transition:max-height .5s;
}
.blog-card.expanded .blog-content{
  max-height:99999px;margin-top:.6rem;padding-bottom:.9rem;
}
.blog-card.expanded{
  transform:scale(1.02);
  box-shadow:0 8px 16px rgba(0,0,0,.25);
}

/* Only banners with .cover-img keep the old behaviour */
.blog-card img.cover-img{
  height: 280px;           /* same fixed height you used before */
  object-fit: cover;       /* crop to fill, no letter‑boxing    */
}


/* separator */
.blog-separator{
  border:none;height:1px;margin:.7rem 0;opacity:.6;
  background:#a0a0a0;
}

/* read button */
.read-btn{
  align-self:flex-start;margin:1rem 0 1rem .75rem;
  background:var(--accent);color:#000;border:none;
  padding:.65rem 1.6rem;border-radius:8px;font-weight:600;
  text-transform:uppercase;
  transition:background .25s,color .25s;
}
.read-btn:hover{background:#000;color:#fff}

/* markdown tweaks inside blog cards */
.blog-content blockquote{border-left:4px solid var(--accent);background:#fff;padding:10px 15px;margin:20px 0;color:#333}
.callout{border-left:6px solid var(--accent);background:#fff6f6;padding:12px 16px;margin:20px 0;border-radius:4px;color:#333}
.blog-content table{width:100%;margin:20px 0;background:#fff;border-collapse:collapse;border:1px solid #ccc;border-radius:5px;overflow:hidden}
.blog-content th,.blog-content td{border:1px solid #ccc;padding:12px;text-align:left;font-size:.95em}
.blog-content th{background:#fafafa;font-weight:700}
.blog-content tr:nth-child(even){background:#f9f9f9}
.blog-content tr:hover{background:#f1f1f1}
.blog-content hr{border:none;height:1px;background:#ccc;margin:2rem 0}
.blog-content code{background:#f1f1f1;color:#b30000;padding:2px 4px;border-radius:4px;font-family:"Courier New",Courier,monospace}
.code-container{border:1px solid #bbb;border-radius:5px;overflow:hidden;max-width:740px;margin:20px auto;box-shadow:0 8px 16px rgba(0,0,0,.1);background:#f5f5f5}
.code-header{background:#eee;color:var(--text);padding:6px 10px;font-size:.9em;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.copy-btn{background:var(--accent);color:#000;border:none;padding:4px 10px;font-size:.8em;border-radius:4px;cursor:pointer;transition:background .25s,color .25s}
.copy-btn:hover{background:#000;color:#fff}
.blog-content pre{margin:0;padding:18px;overflow-x:auto;font-size:.9em;background:#f5f5f5}
.blog-content pre code{background:transparent;color:#111;font-size:inherit}
.blog-content sup{font-size:.8em}

/* blog page title + first separator */
.page-title{
  width:clamp(320px,var(--content-width),var(--max-width));
  margin:1.4rem auto .2rem;padding-left:.75rem;
  font-size:2.4rem;font-family:"Evolve Sans",sans-serif;text-align:left;
}
.page-title + .blog-separator{
  width:clamp(320px,var(--content-width),var(--max-width));
  margin:.5rem auto;
}

/* ============================================================
   CUSTOM SCROLLBAR  – Works in Chromium, Safari & Firefox
   ============================================================ */

/* Firefox */
html{
  scrollbar-width: thin;                                 /* auto | thin | none */
  scrollbar-color: var(--accent) var(--card-bg);   
  scroll-padding-top: 130px;   /* tweak to match your navbar height + gap */
  caret-color: transparent;
}

/* WebKit (Chrome, Edge, Safari, Opera) */
::-webkit-scrollbar{
  width: 10px;               /* vertical bar */
  height: 10px;              /* horizontal bar */
}
::-webkit-scrollbar-track{
  background: var(--card-bg);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb{
  background: var(--accent);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover{
  background: #000;          /* darker on hover for accessibility */
}

/* Firefox */
.code-container,
.code-container pre{                   /* cover both wrapper & <pre> */
  scrollbar-width: thin;
  scrollbar-color: var(--accent) #f5f5f5;
}

/* WebKit (Chrome, Edge, Safari, Opera) */
.code-container::-webkit-scrollbar,
.code-container pre::-webkit-scrollbar{
  height: 10px;                       /* horizontal bar inside code */
}
.code-container::-webkit-scrollbar-track,
.code-container pre::-webkit-scrollbar-track{
  background: #f5f5f5;
  border-radius: 10px;
}
.code-container::-webkit-scrollbar-thumb,
.code-container pre::-webkit-scrollbar-thumb{
  background: var(--accent);
  border-radius: 10px;
}
.code-container::-webkit-scrollbar-thumb:hover,
.code-container pre::-webkit-scrollbar-thumb:hover{
  background: #000;                   /* darker on hover */
}

/* ============================================================
   1) KEEP “REAL” LINKS RED, BUT DON’T CLASH WITH BUTTON‑LIKE <a>
   ------------------------------------------------------------ */
/*  Put the accent colour on anchors *unless* they already act like buttons */
a:not(.mini-card):not(.cta-btn):not(.read-btn):not(.wave-btn),
a:not(.mini-card):not(.cta-btn):not(.read-btn):not(.wave-btn):link,
a:not(.mini-card):not(.cta-btn):not(.read-btn):not(.wave-btn):visited{
  color: var(--accent);
  transition: color .25s;
}
a:not(.mini-card):not(.cta-btn):not(.read-btn):not(.wave-btn):hover,
a:not(.mini-card):not(.cta-btn):not(.read-btn):not(.wave-btn):focus{
  color:#000;
}

/* ============================================================
   2) ONE GENERIC “BUTTON” STYLE  (Read More / Visit Blog / Email Me)
   ------------------------------------------------------------ */
.btn-base{
  display:inline-block;                     /* keeps anchors inline‑block */
  background:var(--accent);
  color:#000;
  border:none;
  padding:.9rem 2.2rem;
  border-radius:12px;
  font-weight:600;
  text-transform:uppercase;
  text-decoration:none;
  transition:background .25s,color .25s;
}
.btn-base:hover{
  background:#000;
  color:#fff;
}

/* hook the existing classes into the shared rule */
.read-btn,
.cta-btn{             /* VISIT BLOG & EMAIL ME already use .cta-btn */
  @extend .btn-base;  /* if you’re not using Sass, just copy the props */
}

/* ============================================================
   3) MINI‑CARD HOVER ANIMATION  (under “I like computers.”)
   ------------------------------------------------------------ */
/*  Ensure the coloured link rule above no longer overrides the span colour */
.mini-card span{color:#000;}
.mini-card:hover span{color:#fff;}

/* ============================================================
   NAVBAR • scroll‑in only on the home page
   ------------------------------------------------------------ */
.navbar.nav-home{
  transform:translate(-50%, -150%);   /* start well above view */
  opacity:0;
  pointer-events:none;
  transition:transform .45s ease, opacity .45s ease;
}
/* class toggled in JS */
.navbar.nav-home.show{
  transform:translateX(-50%);         /* normal resting position */
  opacity:1;
  pointer-events:auto;
}
/* make the “active” nav link red and non‑clickable */
.nav-link.active{pointer-events:none;cursor:default}

/* existing line for the Blog icon */
.nav-link.active .icon-about{background-image:url("images/aboutr.svg");}

/* NEW line for the Home icon */
.nav-link.active .icon-home {background-image:url("images/homer.svg");}

/* ============================================================
   FONT STACKS
   ------------------------------------------------------------ */
:root{
  --font-display:"Space Grotesk",sans-serif;   /* h1–h6 */
  --font-body:"Inter",sans-serif;              /* everything else */
}

/* global reset */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:var(--font-body);
  color:var(--text);
}

/* keep your logo in Evolve Sans */
.brand{
  font-family:"Evolve Sans",sans-serif;
}

/* headings pick Space Grotesk */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:600;          /* 600 looks great for Grotesk */
}

/* optional: lighter body copy & stronger cards */
 body{font-weight:400;}                  /* Inter regular */
.home-card .lead{font-weight:300;}      /* thin intro text */
.read-btn, .cta-btn{font-weight:600;}   /* punchy CTAs */

/* ============================================================
   MOBILE TWEAKS – full‑width blog cards
   ============================================================ */
@media (max-width: 680px){              /* hit phones + small tablets */
  /* let the feed stretch edge‑to‑edge */
  .blog-feed{
    width: 100%;
    margin: 0;               /* remove the auto‑centering gap */
  }

  /* optional: make each card flush with the sides */
  .blog-card{
    border-radius: 0;        /* square corners if you like */
  }
  .blog-card img{
    border-radius: 0 0 0 0;  /* keep image flush as well */
  }
  .code-container{
    margin: 0px auto;  /* remove the auto‑centering gap */
    max-width: 360px;         /* let code blocks stretch full width */
  }
}