/* ==========================================================================
   theme-mario.css — the Super Mario theme.

   Supplies token values plus the decoration that only exists in this theme
   (brick header, ? block toggle, warp-pipe contact links, block-hit cards).
   No structural rule and no duplicated markup: every selector here is scoped
   to [data-theme="mario"] and layers on top of base.css.

   --------------------------------------------------------------------------
   ASSET CREDITS (carried over from the original index.html)
     linkedin      https://www.iconfinder.com/icons/317750/linkedin_icon
     spotify       https://newsroom.spotify.com/media-kit/logo-and-brand-assets/
     github        https://www.flaticon.com/free-icon/github-logo_25231
     brick         https://nintendo.fandom.com/wiki/Brick_Block
     mysterybox    https://www.mariowiki.com/%3F_Block
     home bg       https://nintendo-gifs.tumblr.com/post/39169013567/
                     get-1-3-or-6-fireworks-by-touching-the-flagpole
     cloud         https://www.pixilart.com/art/mario-cloud-transparent-sr2c49a1ed222aws3
     cloud bg      https://www.pixilart.com/art/super-mario-bros-sky-e768c4c5453943c
     warp pipe     https://newermario.fandom.com/wiki/Warp_Pipe
   ========================================================================== */

:root[data-theme="mario"] {
  /* page canvas — the sky level, used site-wide */
  --bg-page: #5c94fc;
  --bg-page-image: url("../assets/img/supermarioskybackground1.png");
  --bg-overlay: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.62));
  --bg-attachment: fixed;

  /* surfaces */
  --surface: rgba(0, 0, 0, 0.58);
  --surface-2: rgba(0, 0, 0, 0.72);
  --border: #ffffff;
  --border-width: 4px;
  --media-figure-bg: #ffffff;
  --shadow: 6px 6px 0 rgba(0, 0, 0, 0.45);
  --shadow-lift: 10px 10px 0 rgba(0, 0, 0, 0.5);

  /* type — chunky pixel-adjacent monospace */
  --text: #ffffff;
  --text-muted: #ffe9a8;
  --heading: #ffffff;
  --font-body: "Courier New", Courier, var(--font-mono);
  --font-display: "Courier New", Courier, var(--font-mono);
  --heading-transform: uppercase;
  --heading-shadow: 3px 3px 0 #000000;
  --heading-spacing: 0.02em;

  /* accent — Mario red / coin gold */
  --accent: #e52521;
  --accent-soft: rgba(229, 37, 33, 0.28);
  --on-accent: #ffffff;
  --link: #fbd000;

  /* header — brick block wall */
  --nav-bg: #b13425;
  --nav-bg-image: url("../assets/img/bricktest.png");
  --nav-bg-size: 64px;
  --nav-text: #ffffff;
  --nav-border: #000000;
  --nav-item-bg: rgba(0, 0, 0, 0.55);
  --nav-item-bg-active: #fbd000;
  --nav-item-text-active: #000000;

  /* geometry — square, pixel-crisp */
  --radius: 0px;
  --radius-lg: 0px;
  --radius-pill: 0px;
  --edges: pixelated;
}

:root[data-theme="mario"] body {
  font-weight: 700;
}

/* Keep the brick tiles sharp rather than smoothed. */
:root[data-theme="mario"] .site-header {
  image-rendering: pixelated;
  border-bottom-width: 4px;
}

:root[data-theme="mario"] .nav-links a,
:root[data-theme="mario"] .brand {
  text-shadow: 2px 2px 0 #000000;
}

:root[data-theme="mario"] .nav-links a[aria-current="page"] {
  text-shadow: none;
  box-shadow: inset 0 0 0 3px #000000;
}

:root[data-theme="mario"] .social a {
  border: 3px solid #000000;
  background: #fbd000;
}

:root[data-theme="mario"] .social a:hover {
  background: #ffffff;
}

/* --------------------------------------------------------------------------
   Panels and cards read as blocks: hard black keyline, offset shadow, and a
   "hit the block" pop on hover.
   -------------------------------------------------------------------------- */
:root[data-theme="mario"] .panel,
:root[data-theme="mario"] .card,
:root[data-theme="mario"] .contact-link,
:root[data-theme="mario"] .hero__panel {
  outline: 3px solid #000000;
  outline-offset: 0;
}

/* Contact links are deliberately excluded — the pipes stay planted, and the
   character coming out of the mouth is the hover response instead. */
:root[data-theme="mario"] .card:hover {
  transform: translateY(-8px);
  border-color: #fbd000;
}

:root[data-theme="mario"] .card__media {
  image-rendering: pixelated;
}

/* Diagrams are text-heavy — pixelating them costs legibility for no gain. */
:root[data-theme="mario"] .card__media--contain,
:root[data-theme="mario"] .card__media--contain img {
  image-rendering: auto;
}

:root[data-theme="mario"] .card--no-media .card__media {
  background: #fbd000;
  color: #000000;
  border-bottom-color: #000000;
}

:root[data-theme="mario"] .tag {
  background: #fbd000;
  border-color: #000000;
  color: #000000;
  font-weight: 700;
}

:root[data-theme="mario"] .card__status {
  background: #e52521;
  color: #ffffff;
}

:root[data-theme="mario"] .prose li::before {
  border-radius: 0;
  background: #fbd000;
  box-shadow: 0 0 0 2px #000000;
}

/* --------------------------------------------------------------------------
   Hero portrait gets a framed, pixel-crisp treatment.
   -------------------------------------------------------------------------- */
:root[data-theme="mario"] .hero__portrait {
  border-color: #ffffff;
  outline: 4px solid #000000;
}

/* The home page swaps the sky for the flagpole-fireworks level.
   Anchored to the bottom so the `cover` crop keeps the ground and the base of
   the flagpole in view and eats into the empty sky instead. */
:root[data-theme="mario"] body.page-home {
  --bg-page-image: url("../assets/img/supermariobackground.jpg");
  --bg-position: center bottom;
}

/* Easter egg: hitting the ? block swaps in the animated level. */
:root[data-theme="mario"] body.page-home.is-egg-on {
  --bg-page-image: url("../assets/img/supermariotest.gif");
}

/* --------------------------------------------------------------------------
   Theme toggle becomes a brick — the ? block is spoken for here by the
   easter egg sitting directly above it.
   -------------------------------------------------------------------------- */
:root[data-theme="mario"] .theme-toggle {
  background-image: url("../assets/img/bricktest.png");
  /* Keylines the block so it stays legible against the brick ground on the
     contact page, where it sits on the same texture. */
  outline: 3px solid #000000;
}

:root[data-theme="mario"] .theme-toggle__to-default {
  display: inline;
}

/* --------------------------------------------------------------------------
   Mystery-box easter egg — home page only, and only in this theme.
   base.css keeps it display:none; this is the single place it turns on.
   -------------------------------------------------------------------------- */
:root[data-theme="mario"] .page-home .mystery-box {
  display: block;
  background-image: url("../assets/img/mysterybox.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.5));
  transition: transform 0.12s ease;
}

:root[data-theme="mario"] .page-home .mystery-box:hover {
  transform: translateY(-4px);
}

:root[data-theme="mario"] .page-home .mystery-box:active {
  transform: translateY(-10px);
}

/* --------------------------------------------------------------------------
   Warp pipes — the contact links. These reuse pipe.png, which previously
   lived on the (now removed) services page.

   On the contact page the pipes stand in a single row along the bottom of the
   viewport, planted on a brick floor. The floor is a pseudo-element on <body>
   so no theme-specific markup is needed.
   -------------------------------------------------------------------------- */

/* Brick ground. --ground-h is the one number the pipes and the toggle key off,
   so the floor thickness can change in a single place. It is deep enough to
   contain the fixed theme toggle, which would otherwise land on top of the
   left-hand pipe at every viewport narrower than ~1250px. */
:root[data-theme="mario"] body.page-contact {
  --ground-h: 6rem;
}

:root[data-theme="mario"] body.page-contact::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: var(--ground-h);
  background-image: url("../assets/img/bricktest.png");
  /* 3rem tiles into a 6rem band = exactly two courses of brick. */
  background-size: 3rem 3rem;
  background-repeat: repeat;
  border-top: 4px solid #000000;
  image-rendering: pixelated;
  pointer-events: none;
}

/* Drop the pipe row to the bottom of the page, resting on the ground, while
   the heading stays put at the top. */
:root[data-theme="mario"] .page-contact main {
  display: flex;
  padding-bottom: var(--ground-h);
}

:root[data-theme="mario"] .page-contact main > .container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

:root[data-theme="mario"] .page-contact .section {
  display: flex;
  flex: 1;
  flex-direction: column;
}

:root[data-theme="mario"] .contact-grid {
  /* One straight line of pipes, all standing on the same baseline. */
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.5rem, 2vw, 2rem);
  align-items: end;
  margin-top: auto;
}

/* Four pipes across a phone would be slivers — pair them up instead. */
@media (max-width: 40em) {
  :root[data-theme="mario"] .contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* The toggle sits within the brick band, clear of the pipes standing on it.
   z-index keeps it above the ground pseudo-element. */
:root[data-theme="mario"] .page-contact .theme-toggle {
  bottom: 1rem;
  z-index: 60;
}

/* Each pipe is two stacked pseudo-elements sharing one box:

     ::before  the character, z-index 0
     ::after   the pipe itself, z-index 1

   Both are anchored to the bottom with the same aspect ratio, so at rest the
   character sits exactly behind the (opaque) pipe and is invisible. Hovering
   slides it up out of the mouth. Nothing is clipped and no extra markup is
   needed — the pipe graphic does the hiding. */
:root[data-theme="mario"] .contact-link {
  position: relative;
  z-index: 1;
  justify-content: flex-end;
  align-items: center;
  /* Headroom above the pipe for the character to rise into. */
  min-height: clamp(13rem, 30vw, 21rem);
  padding: 1rem 0.5rem 1.25rem;
  border: 0;
  outline: 0;
  background: none;
  box-shadow: none;
  text-align: center;
}

/* The character, hidden inside the pipe. */
:root[data-theme="mario"] .contact-link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  aspect-ratio: 1150 / 1160;
  background-image: url("../assets/img/pirahna_plant.png");
  background-size: 52% auto;
  background-position: center bottom;
  background-repeat: no-repeat;
  /* Smooth 3D renders, not pixel art — pixelating these looks like a mistake. */
  image-rendering: auto;
  transition: transform 1100ms cubic-bezier(0.33, 0.9, 0.5, 1);
  pointer-events: none;
}

/* The pipe, painted over the character. */
:root[data-theme="mario"] .contact-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  aspect-ratio: 1150 / 1160;
  background-image: url("../assets/img/pipe.png");
  background-size: 100% 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* One pipe hides Mario instead — he springs out faster and higher.
   Change the :nth-child to move him to a different pipe. */
:root[data-theme="mario"] .contact-link:nth-child(4)::before {
  background-image: url("../assets/img/mariojump.png");
  background-size: 52% auto;
  transition: transform 600ms cubic-bezier(0.22, 1.4, 0.4, 1);
}

/* The reveal is gated on a hover-capable pointer and the single-row pipe
   layout. In the two-column phone layout the bottom row's characters would
   rise straight into the cards above them, and a touch device has no hover to
   drive the animation in the first place. At rest the characters are hidden
   behind the pipes at every size, so nothing else needs to change. */
@media (min-width: 40.0625em) and (hover: hover) {
  /* Piranha plants creep out slowly, stopping with the base of the stem still
     in the mouth of the pipe. */
  :root[data-theme="mario"] .contact-link:hover::before,
  :root[data-theme="mario"] .contact-link:focus-visible::before {
    transform: translateY(-84%);
  }

  :root[data-theme="mario"] .contact-link:nth-child(4):hover::before,
  :root[data-theme="mario"] .contact-link:nth-child(4):focus-visible::before {
    transform: translateY(-82%);
  }

  :root[data-theme="mario"] .contact-link:hover .contact-link__icon,
  :root[data-theme="mario"] .contact-link:focus-visible .contact-link__icon {
    opacity: 0;
  }
}

/* base.css lifts a contact link on hover. A pipe is part of the scenery, so
   it stays planted — the character emerging is the whole hover response. */
:root[data-theme="mario"] .contact-link:hover {
  transform: none;
  box-shadow: none;
}

/* Text has to clear the pipe, which paints above the in-flow content. */
:root[data-theme="mario"] .contact-link__icon,
:root[data-theme="mario"] .contact-link__label,
:root[data-theme="mario"] .contact-link__value {
  position: relative;
  z-index: 2;
}

/* Icon rides above the pipe mouth, and gets out of the way as the character
   rises into the space it occupies. */
:root[data-theme="mario"] .contact-link__icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: auto;
  transition: opacity 400ms ease;
}

:root[data-theme="mario"] .contact-link__label,
:root[data-theme="mario"] .contact-link__value {
  padding: 0.15rem 0.5rem;
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
  text-shadow: 2px 2px 0 #000000;
  /* Courier runs wide — keep long values (the email address) inside the pipe
     rather than spilling out either side of it. */
  max-width: 100%;
}

:root[data-theme="mario"] .contact-link__value {
  color: #ffe9a8;
  font-size: 0.7rem;
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* The animated level GIF is the one thing CSS cannot pause — fall back to
     the still background instead. */
  :root[data-theme="mario"] body.page-home.is-egg-on {
    --bg-page-image: url("../assets/img/supermariobackground.jpg");
  }

  :root[data-theme="mario"] .page-home .mystery-box:hover,
  :root[data-theme="mario"] .page-home .mystery-box:active {
    transform: none;
  }

  /* Without a transition the characters would snap out of the pipes, which is
     worse than the movement it replaces. Keep them in and give the pipe a
     static hover cue instead. */
  :root[data-theme="mario"] .contact-link:hover::before,
  :root[data-theme="mario"] .contact-link:focus-visible::before,
  :root[data-theme="mario"] .contact-link:nth-child(4):hover::before,
  :root[data-theme="mario"] .contact-link:nth-child(4):focus-visible::before {
    transform: none;
  }

  :root[data-theme="mario"] .contact-link:hover::after,
  :root[data-theme="mario"] .contact-link:focus-visible::after {
    outline: 4px solid #fbd000;
    outline-offset: -4px;
  }
}