/* ==========================================================================
   Custom overrides layered on top of the Osprey theme's main.css.
   Loaded AFTER the theme stylesheet (see layouts/partials/header.html), so
   rules here win on equal specificity. Keep all site-specific styling here
   rather than editing the theme, so the theme stays upgradable.
   ========================================================================== */

/* --- Typography: shrink the theme's oversized defaults -------------------- */
/* Theme base is 1.25rem (20px). Target ~18px desktop / ~17px on phones. */
body { font-size: 1.125rem; }                                  /* 18px */
@media (max-width: 25em) { body { font-size: 1.0625rem; } }    /* 17px */

/* Headings: scaled down from the theme's modular scale, per breakpoint
   (the theme bakes heading sizes into media queries, so override at each). */
h1 { font-size: 2.5rem; }
h2 { font-size: 1.85rem; }
h3 { font-size: 1.45rem; }
@media (max-width: 48em) {
  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.65rem; }
  h3 { font-size: 1.35rem; }
}
@media (max-width: 25em) {
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
}

/* Post metadata (date / reading time / tags) a touch smaller than body. */
.sub-header, .content time { font-size: 0.95rem; }
@media (max-width: 25em) { .sub-header, .content time { font-size: 0.9rem; } }

/* The theme sizes bio / services intro text at the h3 scale; bring it down
   closer to body text so it doesn't dominate. */
.about p, .services p { font-size: 1.25rem; }

/* --- Style customizations previously baked into the theme ----------------- */
/* Reinstated here after resetting the theme to pristine. */

/* Blog listing keeps a white background. */
.blog { background-color: #fff; }

/* ".services" section mirrors the theme's ".about" section (used by the
   services partial / gallery id="services"). Colors: $smoke #f7f7f7,
   $accent #DA784D. */
.services {
  width: 100%;
  background-color: #f7f7f7;
  padding-bottom: 4rem;
}
.services p { margin-top: 2rem; }
.services a {
  text-shadow:
    0.03em 0 #fff, -0.03em 0 #fff, 0 0.03em #fff, 0 -0.03em #fff,
    0.06em 0 #fff, -0.06em 0 #fff, 0.09em 0 #fff, -0.09em 0 #fff,
    0.12em 0 #fff, -0.12em 0 #fff, 0.15em 0 #fff, -0.15em 0 #fff,
    0.03em 0.075em #fff, -0.03em 0.075em #fff, 0.06em 0.075em #fff, -0.06em 0.075em #fff,
    0.09em 0.075em #fff, -0.09em 0.075em #fff, 0.12em 0.075em #fff, -0.12em 0.075em #fff,
    0.15em 0.075em #fff, -0.15em 0.075em #fff;
  background-image: linear-gradient(#DA784D, #DA784D);
  background-size: 2px 3px;
  background-repeat: repeat-x;
  background-position: 0 95%;
  text-decoration: none;
}
.services a:hover { color: #DA784D; }

/* --- Mobile / narrow nav ---------------------------------------------------
   The theme hides the menu links below 48em and swaps in a chunky hamburger
   image that opens a full-screen black overlay. For just four short links
   that's overkill (and the icon renders oversized). Instead: drop the
   hamburger and lay the links out inline as a compact bar — logo left, links
   right — which also fixes the awkward split on narrow desktop windows. */
@media (max-width: 48em) {
  /* Re-show the menu links the theme hides between logo and hamburger. */
  nav div:not(:first-child):not(:last-child) { display: block; }
  /* Retire the hamburger toggle (and thus the full-screen overlay). */
  nav div.nav-toggle { display: none; }

  /* Turn the nav row into: small logo on the left, links grouped on the
     right. Override the flexbox-grid column widths that would otherwise
     wrap the row. */
  nav.row { justify-content: space-between; flex-wrap: nowrap; padding: 0 1rem; }
  nav .logo,
  nav div:not(:first-child):not(:last-child) {
    flex: 0 0 auto;
    max-width: none;
    width: auto;
  }
  nav .logo { margin-right: auto; }        /* push the links to the right */
  nav .logo img { max-height: 2rem; }

  /* Compact, evenly-spaced links sized to fit a phone width. */
  nav h3 {
    font-size: 0.8rem;
    letter-spacing: 1px;
    padding: 0 0.55rem;
  }
}
/* Very small phones: shrink links a touch more so all four stay on one line. */
@media (max-width: 25em) {
  nav h3 { font-size: 0.72rem; letter-spacing: 0.5px; padding: 0 0.4rem; }
  nav .logo img { max-height: 1.75rem; }
}

/* --- Home page: tighten the blurb -> blog gap ------------------------------
   The blurb section's own bottom padding stacked on top of its container
   padding, and the blog section then re-padded its top, leaving a ~220px
   dead zone. Collapse the redundant padding on both sides of the seam. */
#blurb { padding-bottom: 0; }
#blurb .container { padding-bottom: 2rem; }
#blog .container { padding-top: 2rem; }

/* --- Code blocks on mobile -------------------------------------------------
   Python is autoformatted to 88 columns, which can't fit legibly on a phone
   (88 monospace chars at a readable size is far wider than ~390px). Rather
   than shrink the font to the point of illegibility, keep the block
   horizontally scrollable but (a) let it span nearly the full viewport width
   so more of each line is visible, and (b) drop the font a little on phones.
   The result: less scrolling, smooth touch scroll, prose stays comfortably
   padded. */
@media (max-width: 48em) {
  .content pre {
    /* Break out of the container's 2rem side padding to use the full width. */
    margin-left: -2rem;
    margin-right: -2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 0.78rem;
    -webkit-overflow-scrolling: touch;   /* momentum scroll on iOS */
  }
}