/* ==========================================================================
   Project style overrides.

   Loaded from themes/toha/layouts/partials/header.html. Keep site-specific
   styling here rather than editing themes/toha/static/css/** — the theme is
   vendored, and changes made inside it are easy to lose and hard to find.

   SPECIFICITY NOTE: header.html is included at index.html:15, but the section
   stylesheets (/css/sections/*.css) are linked at lines 18-25 — i.e. AFTER
   this file. So a plain `.home img` here loses to the theme's `.home img`.
   Hero rules below are therefore anchored on #home / #top-navbar (ID
   specificity) so they win regardless of load order.
   ========================================================================== */

:root {
  /* Navbar AND hero text. Applied to both navbar states so the bar never
     changes on scroll, and reused for the hero so the two agree.
     These match the theme's own light-navbar values. */
  --navbar-bg: #f9fafc;
  --navbar-text: #1c2d41;
  --navbar-text-active: #2098d1;

  /* Hero. The scrim is the translucent panel behind the greeting and typing
     line; raise the alpha toward 1 for more contrast, lower it for a lighter
     touch. Text sits on that scrim, so it stays light. */
  --hero-scrim: rgba(0, 0, 0, 0.4);
  --hero-text: #ffffff;
}

/* --------------------------------------------------------------------------
   Hero avatar — larger than the theme's 148px.
   Kept square; themes/toha/layouts/partials/sections/home.html generates the
   source at 2x (440x440) so this stays sharp on high-DPI screens.
   -------------------------------------------------------------------------- */
#home img {
  width: 220px;
  height: 220px;
}

@media only screen and (max-width: 576px) {
  #home img {
    width: 180px;
    max-width: 60%;
    height: auto;
  }
}

/* --------------------------------------------------------------------------
   Hero text.

   Legibility comes from a translucent scrim behind the text rather than from
   the text colour itself. The background photo has both bright and dark
   regions, so no flat colour is readable across all of it — the scrim flattens
   whatever is behind the copy, after which plain white text reads everywhere.

   .hero-text-panel is a wrapper added in
   themes/toha/layouts/partials/sections/home.html; the greeting and the typing
   line are siblings, so a single shared scrim needs one element around both.

   The blinking cursor (.ityped-cursor) has no rule of its own in the theme and
   inherits from .typing-carousel, so it is covered here too.
   -------------------------------------------------------------------------- */
/* inline-block shrink-to-fit sizes the panel to its WIDEST child. On its own
   that made the panel resize on every keystroke, because the typing carousel
   rewrites its text character by character. The fix is the width sizer below:
   a hidden copy of every summary line, each on one unwrapped line, living
   inside the panel. The widest of those is always the widest child, so the
   panel settles at the width of the longest message and never moves — while
   the visible typing line grows and shrinks inside it.

   shrink-to-fit (width:auto) rather than width:max-content, so the panel still
   respects the available space instead of overflowing on narrow screens. */
#home .hero-text-panel {
  display: inline-block;
  max-width: 92%;
  padding: 1.75em 2.5em 2em;
  border-radius: 8px;
  background: var(--hero-scrim);
}

/* Width sizer. Laid out (so it contributes its intrinsic width to the panel)
   but invisible and occupying no vertical space. The theme hides this list with
   display:none, which would remove it from layout entirely and defeat the
   purpose — hence visibility + zero height instead.

   font-size MUST track .typing-carousel below, or the panel is measured against
   text of the wrong size. */
#home #typing-carousel-data {
  display: block;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 18pt;
}

#home #typing-carousel-data li {
  white-space: nowrap;
}

#home .greeting,
#home .typing-carousel {
  color: var(--hero-text);
  /* Faint dark halo — softens the edge where glyphs meet the scrim. */
  text-shadow: 0 0 2px #131415;
}

/* Bigger than the theme's defaults (h1 at 2.5rem, carousel at 14pt). */
#home .greeting {
  font-size: 3.25rem;
}

#home .typing-carousel {
  font-size: 18pt;
  /* Reserve two lines. The summary strings vary in length, and the longest ones
     wrap at this width — without reserved height the panel would jump vertically
     as the carousel cycles. Scales with font-size, so mobile is covered too. */
  min-height: 2.6em;
}

/* The theme shrinks the greeting to 24pt at <=576px. These rules are ID-
   anchored, and media queries add no specificity, so without an explicit
   mobile override the desktop size would leak onto phones. */
@media only screen and (max-width: 576px) {
  #home .greeting {
    font-size: 28pt;
  }

  #home .typing-carousel,
  #home #typing-carousel-data {
    font-size: 15pt;
  }

  /* Below this width the panel is capped at max-width and the visible text
     wraps, so the sizer must stop forcing a single-line width. */
  #home #typing-carousel-data li {
    white-space: normal;
  }
}

/* The bounce chevron sits below the panel, directly on the photo, so it gets a
   drop shadow of its own rather than relying on the scrim. */
#home .arrow {
  color: var(--hero-text);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

/* --------------------------------------------------------------------------
   Education section — drop the timeline spine.

   .hline is the vertical connector running down the icon column, linking one
   row's icon to the next. Education has a single entry, so it is simultaneously
   tr:first-child and tr:last-child and renders as a half-height stub next to a
   lone icon, connecting nothing.

   Hidden here rather than deleted from the template, because
   sections/education.html is shared with the Certifications & Training section,
   where ten rows make the spine meaningful. Scoped to #education so only that
   section is affected; drop the "#education " prefix to remove it from both.
   -------------------------------------------------------------------------- */
#education .hline {
  display: none;
}

/* --------------------------------------------------------------------------
   Timeline spine — reconnect the gap after the first row.

   education.css:29 sets `tr:first-child .hline { height: 60%; top: auto; }`.
   For an absolutely positioned box, `top: auto` resolves to the STATIC
   position — the top of the cell — not the bottom. So the first row's line was
   drawn across the top 60% and stopped, leaving the bottom 40% blank before the
   next row's full-height line started. Anchoring to the bottom is what was
   intended, and that needs an explicit `bottom: 0`.

   50% rather than the theme's 60%: cells are vertical-align:middle, so each
   icon centres at exactly 50% of its row. That is also why tr:last-child uses
   height:50% to stop cleanly at the final icon.

   ID-prefixed because custom.css loads BEFORE sections/education.css, so an
   equal-specificity selector would lose.
   -------------------------------------------------------------------------- */
#certifications .education-info-table tr:first-child .hline,
#education .education-info-table tr:first-child .hline {
  top: auto;
  bottom: 0;
  height: 50%;
}

/* --------------------------------------------------------------------------
   Navbar — solid ("light") at all times.

   The theme ships two states, toggled by themes/toha/static/js/navbar.js at a
   40px scroll offset: .initial-navbar (transparent, over the hero photo) and
   .final-navbar (solid #f9fafc). The transparent state put pale text directly
   on the background photo, which was unreadable while the hero filled the
   screen.

   Rather than patch the theme's JS, these rules make .initial-navbar render
   identically to .final-navbar. The script still toggles the classes; the
   toggle simply has no visible effect. Everything is anchored on #top-navbar
   so ID specificity beats the theme's class rules regardless of load order.
   -------------------------------------------------------------------------- */
#top-navbar,
#top-navbar.initial-navbar {
  background-color: var(--navbar-bg);
  color: var(--navbar-text);
  /* Matches Bootstrap's .shadow, which the JS only adds in the scrolled state. */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

#top-navbar .navbar-brand,
#top-navbar li a {
  color: var(--navbar-text);
}

/* The theme sets font-weight:500 only on .final-navbar li a; the transparent
   state inherits the body default of 400. With .top-navbar transitioning "all",
   that 400 -> 500 jump animated on scroll and read as the menu text warping.
   Pin the weight so it is identical in both states. */
#top-navbar li a {
  font-weight: 500;
}

#top-navbar .navbar-nav .active,
#top-navbar li a:hover {
  color: var(--navbar-text-active);
}

/* The menu underline is a wide-screen affordance only: navbar.css drops it at
   <=1024px, <=992px and <=768px for the collapsed menu. These rules are ID-
   anchored and would otherwise override those, forcing a border back onto the
   mobile menu — so match the theme and apply them above that breakpoint only. */
@media (min-width: 1025px) {
  #top-navbar li a {
    border-bottom: 2px solid var(--navbar-bg);
  }

  #top-navbar .navbar-nav .active,
  #top-navbar li a:hover {
    border-bottom: 2px solid var(--navbar-text-active);
  }
}

#top-navbar #top-navbar-divider {
  background: rgba(0, 0, 0, 0.6);
}

/* The JS leaves the mobile toggler in .navbar-dark until scroll, which draws a
   white hamburger icon — invisible on the now-permanently-light bar. Force the
   dark-on-light icon and border in both states. */
#top-navbar .navbar-toggler {
  border-color: rgba(0, 0, 0, 0.1);
}

#top-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}