/* =========================================================
   FRIDAY GOODY BAG — GLOBAL STYLES
   Order: root vars › resets › base › typography › page layout ›
   card themes › card layout › full post › listings › panel ›
   buttons › navigation › footer
   ========================================================= */

/* ===== ROOT VARIABLES ===== */
:root {
  /* palette */
  --primary: #26b4e9;
  --light: #ebe95d;
  --lighter: #fdfcdd;
  --dark: #292930;
  --gray: #808080;
  --lightest: #f7f7f7;
  --primary-tone: #66d6ff;
  --primary-dark: #005380;
  --danger: #e829ea;
  --danger-dark: #a10ba4;
  --green: #71cdb7;

  /* gradients */
  --primary-gradient: linear-gradient(
    to top right,
    var(--primary),
    var(--primary-tone)
  );
  --card-gradient: linear-gradient(to top right, var(--light), var(--lighter));
  --listings-gradient: linear-gradient(
    to top right,
    var(--lightest),
    var(--lighter)
  );

  /* Card token DEFAULTS. Each card palette (below) overrides what it
     needs; anything it doesn't set falls back to these. Named by JOB
     (heading/eyebrow/highlight/link), not colour, so a future dark mode
     is just a matter of redefining these. */
  --card-bg: transparent;
  --card-fg: var(--dark);
  --card-heading: var(--dark);
  --card-eyebrow: var(--primary);
  --card-highlight: var(--danger);
  --card-link: var(--primary);
}

/* ===== RESETS ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
dl,
dd,
figure {
  margin: 0;
}

body {
  line-height: 1.4;
}

/* headings don't want the body's line-height */
h1,
h2,
h3,
h4 {
  line-height: 1;
}

/* images scale down; display:block avoids the inline-image baseline gap */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* CLASSED lists lose bullets + indent; bare lists (e.g. in docs) keep them */
ul[class] {
  margin: 0;
  padding: 0;
  list-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font: inherit;
}

/* ===== BASE ===== */
html,
body {
  color: var(--dark);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}

body {
  background: var(--primary-gradient);
  min-height: 100vh;
}

/* ===== TYPOGRAPHY ===== */
h1 {
  font-size: 2.4em;
  font-weight: 200;
  text-wrap: balance;
  color: var(--dark);
}

h2 {
  font-size: 1.8em;
  font-weight: 700;
  text-wrap: balance;
  color: var(--dark);
  margin-bottom: 0.5em;
}

h3 {
  font-size: 1.05em;
  font-weight: 700;
  text-wrap: balance;
  color: var(--primary);
}

/* run-in heads: an inline lead-in label + caret (h4 in markdown, or a
   .runin span). \203A is the › character as a code so it survives upload. */
.runin,
h4 {
  font-weight: 600;
  color: var(--danger);
}
.runin::after,
h4::after {
  content: " \203A ";
  color: var(--primary);
}
h4 {
  margin-bottom: 0.25em;
}

/* Page headline (home, blog, category, subscribe, …). Sits on the blue
   gradient, so it's light + centred. */
.top-head {
  color: var(--lightest);
  text-align: center;
  margin: 0.8em 0;
  font-weight: 100; /* the thin look you love; the full-post h1 stays 200 */
}

/* Eyebrow kicker — SIZE is set here; its COLOUR + lowercasing come from
   the card theme (.card .eyebrow, further down). */
.eyebrow {
  font-size: 0.55em;
  margin-bottom: 0.2em;
}

/* Dateline before a post intro ("7/3/26 | intro…") */
.dateline {
  color: var(--primary);
}
.dateline::after {
  content: " | ";
  color: var(--danger);
}

/* "read more" style link */
a.block-arrow {
  font-weight: 600;
  font-size: 0.9em;
  color: var(--primary);
  display: block;
  text-decoration: none;
  margin-top: 0.3em;
}
a.block-arrow:hover {
  color: var(--danger);
}
a.block-arrow::after {
  content: "\203A ";
  color: var(--danger);
  padding-left: 0.1em;
}

/* Body paragraphs. em (not rem) on purpose, so they scale up inside a
   1.2em card (.card--pinned / .card--full-post). */
p {
  font-size: 1.1em;
}

/* Inline highlight on pale surfaces. Cards override the colour via
   --card-highlight in the consuming block. */
.highlight {
  font-weight: bold;
  color: var(--danger-dark);
}

/* The pinned card (and every full-post page) reads 1.2x larger. Because
   the sizes inside are em-based, this one line scales the whole card. */
.card--pinned {
  font-size: 1.2em;
}

/* ===== PAGE LAYOUT =====
   .page-grid   = page wrapper: 1 col on mobile → 2fr/1fr (main + aside) at 1024
   .page-main   = main column (blog / category / type / full-post)
   .post-grid   = the HOME page's main column (a grid of post cards)
   .page-aside  = sidebar column
   .page-narrow = single-column wrapper for simple pages (subscribe, docs)
   .page-grid--home carries the home-only duplicate-founder show/hide. */
.page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1rem 1rem 0;
  margin: 0 auto;
}
.page-main,
.page-aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* HOME only: the founder card exists twice (inline in the post grid AND
   in the sidebar). Show the inline one until desktop, then swap. */
.page-grid--home .page-aside .card--inverted {
  display: none;
}
.post-grid > .card--pinned {
  order: 1;
}
.post-grid > .card--inverted {
  order: 2;
}
.post-grid > .card:not(.card--pinned):not(.card--inverted) {
  order: 3;
}

@media (min-width: 769px) {
  .page-grid {
    width: 90%;
  }
}
@media (min-width: 1024px) {
  .page-grid {
    grid-template-columns: 2fr 1fr;
    width: 80%;
  }
  .post-grid {
    grid-template-columns: 1fr 1fr;
  }
  .post-grid > .card--pinned {
    grid-column: 1 / -1; /* pinned spans both post columns */
  }
  .page-grid--home .post-grid .card--inverted {
    display: none; /* hide the inline duplicate */
  }
  .page-grid--home .page-aside .card--inverted {
    display: block; /* show the sidebar founder */
  }
  .post-grid > .card {
    order: 0; /* reset the mobile ordering */
  }
}

/* Single-column wrapper for simple pages */
.page-narrow {
  max-width: 55rem;
  margin: 0 auto;
  padding: 1rem 1rem 0;
}
@media (min-width: 769px) {
  .page-narrow {
    width: 90%;
  }
}
@media (min-width: 1024px) {
  .page-narrow {
    width: 80%;
  }
}

/* ===== CARD THEMES (colours) =====
   Each card declares a palette of --card-* / --btn-* tokens; the single
   consuming block at the end of this section reads them. */

/* card base — shape only (colours come from the consuming block) */
.card {
  padding: 1em;
  border: thin solid var(--lighter);
  border-radius: 8px;
  box-shadow: -1px 2px 10px var(--gray);
}

/* Light theme: tip + goody + full-post. Only --card-bg and the button
   tokens differ from the :root defaults, so everything else is left to
   inherit rather than restated. */
.card--tip,
.card--goody,
.card--full-post {
  --card-bg: var(--card-gradient);
  --btn-bg: var(--danger);
  --btn-bg-hover: var(--primary);
  --btn-fg: var(--lightest);
  --btn-border: var(--danger-dark);
}

/* Inverted: founder + category-head ("inverted" = reversed contrast) */
.card--inverted {
  --card-bg: var(--dark);
  --card-fg: var(--lightest);
  --card-heading: var(--light);
  --card-highlight: var(--light);
  --card-link: var(--light);
  --btn-bg: var(--primary);
  --btn-bg-hover: var(--danger);
  --btn-fg: var(--lightest);
  --btn-border: var(--light);
}

/* Related — split out from inverted so it can be tuned on its own.
   (Currently the same blue as .card--hire.) */
.card--related {
  --card-bg: var(--primary-dark);
  --card-fg: var(--lightest);
  --card-heading: var(--light);
  --card-eyebrow: var(--danger);
  --card-highlight: var(--light);
  --card-link: var(--light);
  --btn-bg: var(--green);
  --btn-bg-hover: var(--primary-dark);
  --btn-fg: var(--lightest);
  --btn-border: var(--light);
}

/* Shopping (magenta) */
.card--shopping {
  --card-bg: var(--danger);
  --card-fg: var(--lightest);
  --card-heading: var(--lightest);
  --card-eyebrow: var(--light);
  --card-highlight: var(--light);
  --card-link: var(--light);
  --btn-bg: var(--primary);
  --btn-bg-hover: var(--green);
  --btn-fg: var(--lightest);
  --btn-border: var(--light);
}

/* All-blog (magenta — matches shopping) */
.card--all-blog {
  --card-bg: var(--danger);
  --card-fg: var(--lightest);
  --card-heading: var(--light);
  --card-eyebrow: var(--light);
  --card-highlight: var(--light);
  --card-link: var(--light);
  --btn-bg: var(--green);
  --btn-bg-hover: var(--primary);
  --btn-fg: var(--lightest);
  --btn-border: var(--light);
}

/* Hire (deep blue) */
.card--hire {
  --card-bg: var(--primary-dark);
  --card-fg: var(--lightest);
  --card-heading: var(--lightest);
  --card-eyebrow: var(--primary-tone);
  --card-highlight: var(--primary-tone);
  --card-link: var(--primary-tone);
  --btn-bg: var(--light);
  --btn-bg-hover: var(--green);
  --btn-fg: var(--dark);
  --btn-fg-hover: var(--lightest); /* hire-only: button text flips on hover */
  --btn-border: var(--primary);
}

/* --- the ONE consuming block: every card reads its palette --- */
.card {
  background: var(--card-bg);
  color: var(--card-fg);
}
.card h2 {
  display: flex;
  flex-direction: column; /* eyebrow stacks above the headline */
  color: var(--card-heading);
}
.card .eyebrow {
  color: var(--card-eyebrow);
  text-transform: lowercase;
}
.card .highlight {
  color: var(--card-highlight);
}
/* content links only — buttons are themed in the BUTTONS section */
.card a:not(.button) {
  color: var(--card-link);
}

/* ===== CARD LAYOUT ===== */

/* header row: heading (left) + type-icon / avatar (right) */
.article-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
/* The type-icon's <a> wrapper is the actual flex item (not the img), so
   the <a> is what must not shrink, or the icon squishes on long headlines. */
.article-head > a {
  flex-shrink: 0;
}
.type-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

/* founder avatar */
.avatar {
  width: 3.75rem; /* 60px */
  height: 3.75rem;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--light);
}

/* related-card list: caret bullets, no indent, light links */
.card--related ul {
  list-style: none;
  padding-left: 0;
}
.card--related li {
  padding-left: 1em;
  text-indent: -1em; /* hanging indent: caret hangs left, wrapped lines align */
}
.card--related li::before {
  content: "\203A ";
  color: var(--light);
}
/* :not(.button) is here for SPECIFICITY — it lets these out-rank the
   general `.card a:not(.button)` rule so the colour actually applies. */
.card--related ul a:not(.button) {
  color: var(--lightest);
  text-decoration: none;
}
.card--related ul a:not(.button):hover {
  color: var(--light);
}

/* post-card content: text + image side by side; image steps UP by
   breakpoint (small & round on mobile, bigger & square on desktop) */
.card--content {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: flex-start;
}
.card--content > p {
  flex: 1;
}
.card--content > img {
  flex: 0 0 20%; /* mobile: small round thumbnail */
  min-width: 0; /* let flex-basis beat the image's intrinsic width */
  border-radius: 50%;
}
.card--content img {
  border: 1px solid var(--dark);
}
.card--pinned .card--content img {
  border: 2px solid var(--dark);
}
@media (min-width: 769px) {
  .card--content > img {
    flex-basis: 33%;
    border-radius: 8px; /* square-ish from tablet up */
  }
}
@media (min-width: 1024px) {
  .card--pinned .card--content > img {
    flex-basis: 50%;
  }
}

/* ===== FULL POST =====
   A dark head (meta + headline + intro + image) capping a light body. */
.card--full-post {
  padding: 0; /* the head + body sections own their padding */
  overflow: hidden; /* clip the dark head to the card's rounded corners */
  font-size: 1.2em; /* every post page reads at the "pinned" size */
}
.full-post-head {
  background: var(--dark);
  color: var(--lightest);
  padding: 2em;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: flex-start;
}
/* date (left) + audience (right), forced onto their own full-width row */
.post-meta {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
}
.post-meta span {
  color: var(--light);
}
/* headline + intro, sitting left of the image */
.full-post-intro {
  flex: 1;
  min-width: 0;
}
.full-post-head h1 {
  color: var(--danger);
}
.full-post-head .intro-para {
  color: var(--primary);
  font-size: 1.2em;
  margin-top: 0.5em;
}
/* main image, right; grows with the viewport (mobile → desktop) */
.full-post-image {
  flex: 0 0 33%;
  min-width: 0;
  border-radius: 8px;
  border: 3px solid var(--primary);
}
@media (min-width: 769px) {
  .full-post-image {
    flex-basis: 50%;
  }
}
@media (min-width: 1024px) {
  .full-post-image {
    flex-basis: 60%;
  }
}
/* light reading body */
.full-post-body {
  padding: 2em;
}
.full-post-body > * + * {
  margin-top: 1em; /* space between paragraphs + blocks */
}
.full-post-body img {
  border-radius: 8px;
  border: 3px solid var(--dark);
}
/* Colophon: a little favicon mark on the last text line, to signal the
   article's end. inline-block + a background image keeps it on the line. */
.full-post-body p:last-of-type::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.35em;
  vertical-align: middle;
  background: url("/favicon.svg") center / contain no-repeat;
}

/* ===== LISTINGS =====
   Pale surface with a magenta top stripe. Each post row is a <p> of 5
   spans: audience, title, intro, date, More-link. The spans are targeted
   by position (nth-of-type), so their ORDER in the markup matters. */
.listings,
.category-listings {
  padding: 1em;
  background: var(--listings-gradient);
  border-top: 12px solid var(--danger);

  p {
    padding: 0.5em 0;
    border-bottom: thin solid var(--primary);
  }
  p:last-of-type {
    border-bottom: none;
  }
}

/* all-posts row (5 spans) */
.listings span:first-of-type {
  color: var(--danger);
  display: block;
}
.listings span:nth-of-type(2) {
  color: var(--dark);
  font-weight: bold;
  font-size: 1.2rem;
  display: block;
}
.listings span:nth-of-type(3) {
  padding-right: 1em;
}
.listings span:nth-of-type(4) {
  color: var(--primary);
  font-style: italic;
}
.listings span:nth-of-type(5) {
  white-space: nowrap; /* keep "| More ›" from splitting internally */
}
/* the \00a0 (non-breaking space) glues the date to "| More" so the link
   can't wrap onto its own line */
.listings span:nth-of-type(5)::before {
  content: "\00a0| ";
  color: var(--danger);
}
.listings span:nth-of-type(5) a:link,
.listings span:nth-of-type(5) a:visited {
  color: var(--primary);
  font-weight: bold;
  text-decoration: none;
}
.listings span:nth-of-type(5)::after {
  content: "\203A";
  color: var(--danger);
}
.listings span:nth-of-type(5) a:link:hover {
  color: var(--danger);
}

/* On a category page the audience span is redundant (it IS the category),
   so hide it and lead with the title. Applied via .listings--category. */
.listings--category span:first-of-type {
  display: none;
}
.listings--category span:nth-of-type(2) {
  color: var(--danger);
}

/* "More For…" cross-links (category page) */
.listings h3 {
  color: var(--danger);
  margin-bottom: 0;
}
.listings ul.more-for {
  list-style: none;
  padding: 0;
  margin: 0;
}
.listings ul.more-for li {
  display: inline;
}
.listings ul.more-for li:not(:last-child)::after {
  content: " | ";
  color: var(--primary);
}
.listings ul.more-for a {
  color: var(--primary);
  text-decoration: none;
}
.listings ul.more-for a:hover {
  color: var(--danger);
}

/* category listing (3 spans: name, description, Go-link) */
.category-listings span:first-of-type {
  color: var(--primary);
  font-weight: bold;
  font-size: 1.2rem;
  display: block;
}
.category-listings span:nth-of-type(2) {
  padding-right: 0;
}
.category-listings span:nth-of-type(3) {
  white-space: nowrap; /* keep "| Go ›" from splitting internally */
}
.category-listings span:nth-of-type(3)::before {
  content: "\00a0| "; /* nbsp glues description to "| Go" */
  color: var(--danger);
}
.category-listings span:nth-of-type(3) a:link,
.category-listings span:nth-of-type(3) a:visited {
  color: var(--primary);
  font-weight: bold;
  text-decoration: none;
}
.category-listings span:nth-of-type(3)::after {
  content: "\203A";
  color: var(--danger);
}
.category-listings span:nth-of-type(3) a:link:hover {
  color: var(--danger);
}

/* ===== SIMPLE-PAGE PANEL =====
   The pink-topped content surface for prose pages (subscribe, feedback,
   docs). Same look as .listings, but content-friendly — .listings draws a
   divider under every <p>, which is wrong for running text. */
.panel {
  padding: 1.5em;
  background: var(--listings-gradient);
  border-top: 12px solid var(--danger);
}
.panel > * + * {
  margin-top: 1em; /* space between blocks (like .flow-content used to) */
}
.panel h2 {
  margin-top: 1.5em;
}
.panel ul,
.panel ol {
  padding-left: 1.5em;
}
.panel li + li {
  margin-top: 0.3em;
}
.panel a {
  color: var(--primary);
  text-decoration: none;
}
.panel a:hover {
  color: var(--danger);
}

/* ===== BUTTONS =====
   Base shape lives here. The colored-card buttons read the --btn-* tokens
   each card palette set (up in CARD THEMES). */
.button {
  display: inline-block;
  padding: 0.9rem 1.2rem;
  margin: 1rem 0;
  border: thin solid #fff;
  border-radius: 1.5em;
  font-size: 0.9em;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
}
/* token-driven colored-card buttons. :is() collapses the link/visited and
   hover/active pairs. --btn-fg-hover falls back to --btn-fg (only hire sets it). */
.card :is(a.button, a.button:visited) {
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-color: var(--btn-border);
}
.card a.button:is(:hover, :active) {
  background: var(--btn-bg-hover);
  color: var(--btn-fg-hover, var(--btn-fg));
}
/* full-post button: its own colours (same specificity as the token rule
   above, so it must come AFTER it to win). */
.card--full-post :is(a.button, a.button:visited) {
  background: var(--danger);
  color: var(--lightest);
  border-color: var(--danger-dark);
}
.card--full-post a.button:is(:hover, :active) {
  background: var(--primary);
  border-color: var(--primary-dark);
}

/* ===== NAVIGATION ===== */
nav.navbar {
  background-color: var(--lightest);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

.navlogo img {
  height: 3rem;
  padding-left: 1rem;
}

ul.navlist {
  width: 100%;
  order: 3;
  flex-direction: column;
  background-color: var(--dark);
  padding-top: 1rem;
}

li.navlist-item {
  height: 5rem;
  width: 100%;
  border-bottom: thin solid var(--primary);
  display: flex;
  justify-content: flex-end;
  padding-right: 1rem;
}

li.navlist-item a {
  position: relative;
  display: flex;
  align-items: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.8rem;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
}

li.navlist-item a:any-link {
  color: var(--primary);
}

/* per-item nav icons (drawn as ::before at ≥769) */
li.navlist-item:nth-of-type(1) {
  --icon-url: url("/img/iconTip.svg");
}
li.navlist-item:nth-of-type(2) {
  --icon-url: url("/img/iconSubscribe.svg");
}
li.navlist-item:nth-of-type(3) {
  --icon-url: url("/img/iconChatbubble.svg");
}

li.navlist-item a:hover,
li.navlist-item a:active {
  opacity: 0.8;
}

/* hamburger */
.nav-icon {
  position: relative;
  width: 42px;
  height: 32px;
  cursor: pointer;
  margin-right: 1rem;
}
.nav-icon span {
  position: absolute;
  width: 100%;
  height: 6px;
  background: var(--primary);
  border-radius: 3px;
  transition: all 0.3s ease-in-out;
}
.nav-icon span:nth-child(1) {
  top: 0;
}
.nav-icon span:nth-child(2) {
  top: 13px;
}
.nav-icon span:nth-child(3) {
  top: 26px;
}

/* hamburger → X when open */
.navbar.open .nav-icon span:nth-child(1) {
  top: 13px;
  transform: rotate(45deg);
}
.navbar.open .nav-icon span:nth-child(2) {
  opacity: 0;
}
.navbar.open .nav-icon span:nth-child(3) {
  top: 13px;
  transform: rotate(-45deg);
}

/* menu hidden on mobile until toggled open */
.navlist {
  display: none;
}
.navbar.open .navlist {
  display: flex;
}

/* ≥769: horizontal menu with icons, no hamburger */
@media (min-width: 769px) {
  nav.navbar {
    justify-content: flex-start;
  }

  ul.navlist {
    order: 0;
    display: flex;
    width: unset;
    flex-direction: row;
    gap: 0.8rem;
    background-color: var(--lightest);
    padding-top: 0;
    margin-left: auto;
    margin-right: 1rem;
  }

  li.navlist-item {
    border: none;
    width: auto;
    height: auto;
    justify-content: flex-start;
  }

  li.navlist-item:nth-of-type(3) {
    display: inline-block;
  }

  li.navlist-item a {
    font-size: 1.2rem;
    padding-right: 0;
    padding-left: 1.5rem;
  }

  li.navlist-item a::before {
    content: "";
    position: absolute;
    left: 0;
    height: 1.2rem;
    width: 1.2rem;
    background-image: var(--icon-url);
    background-size: contain;
    background-repeat: no-repeat;
  }

  .nav-icon {
    display: none;
  }
}

/* ===== FOOTER ===== */
footer {
  margin: 2rem auto 0;
  padding: 1rem;
  background-color: var(--lightest);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* shadow on top edge */
}

footer ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  list-style-type: none;
  padding: 0;
  margin: 0 auto;
}

/* icon-only labels on mobile (font-size:0 hides the text, keeps the img) */
footer ul li a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--primary);
  font-size: 0;
}
footer ul li a img {
  height: 2rem;
  width: 2rem;
}

/* ≥1024: show the text labels */
@media (min-width: 1024px) {
  footer ul li a {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
  }

  footer ul {
    width: 80%;
    justify-content: flex-start;
  }
}