/*
Theme Name: GI 2026
Theme URI: https://www.geekinspired.com/
Author: Bo Boswell
Description: A fast, responsive, accessible classic PHP theme for GeekInspired.com. No build step - plain CSS with custom properties and vanilla JS. Built to render 18 years of legacy post markup correctly alongside modern hand-written HTML posts.
Version: 1.0.4
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gi2026
Tags: blog, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, accessibility-ready
*/

/* ==========================================================================
   HOW THIS FILE IS ORGANIZED  (Bo: read this first)

   Everything visual is controlled by the "design tokens" in the :root block
   below. Change a token once and it updates everywhere. You almost never need
   to hunt through the rest of the file.

   1.  Design tokens          <- change colors/sizes HERE
   2.  Base / reset
   3.  Layout containers
   4.  Skip link + header + navigation
   5.  Search form
   6.  Ad slots (empty by default)
   7.  Front page: hero + post cards
   8.  Archive / search listings
   9.  Single post + page
   10. Legacy post compatibility  <- 2008-2011 markup lives here
   11. Sidebar + widgets
   12. Comments
   13. Pagination
   14. Footer
   15. Responsive breakpoints
   16. Dark mode
   17. Print
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  /* --- Brand blues. Sampled directly from the GeekInspired logo so the logo
         image blends seamlessly into the header band. --- */
  --gi-brand:        #00629b;   /* logo gradient, top */
  --gi-brand-dark:   #004274;   /* logo gradient, bottom */
  --gi-brand-deep:   #00304f;   /* footer, darkest */

  /* --- Link blue. Harmonized with the brand, 7.1:1 on white (AAA).
         Want the classic 2008 link blue back? Set this to #2255AA. --- */
  --gi-link:         #005c95;
  --gi-link-hover:   #cf7801;   /* the classic GeekInspired orange hover */

  /* --- Accent (orange). Only 3.3:1 on white, so it is used for borders,
         underlines and large text - never for small body copy. --- */
  --gi-accent:       #cf7801;
  --gi-accent-soft:  #fff4e5;

  /* --- Text --- */
  --gi-ink:          #16202c;   /* body text        - 15.1:1 on white */
  --gi-ink-soft:     #4d5a6b;   /* meta, captions   -  7.0:1 on white */
  --gi-ink-faint:    #5f6c7a;   /* least important  -  5.4:1 on white */
  /* NOTE: --gi-ink-faint was #6b7888, which computes to exactly 4.50:1 and
     fails Lighthouse's contrast audit by a rounding hair. Any replacement
     must stay at or below #667382 (4.84:1) to keep clear of that line. */

  /* --- Surfaces --- */
  --gi-bg:           #ffffff;
  --gi-bg-soft:      #f5f8fa;   /* page background behind cards */
  --gi-bg-sunken:    #eef3f7;   /* tables, code, blockquote */
  --gi-line:         #dde5ec;   /* borders */
  --gi-line-strong:  #c3d1dd;

  /* --- Typography --- */
  --gi-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --gi-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gi-text:      1.0625rem;   /* 17px body */
  --gi-text-lead: 1.1875rem;   /* 19px intro paragraphs */
  --gi-leading:   1.7;

  /* --- Layout --- */
  --gi-container: 1200px;      /* outer max width */
  --gi-content:   760px;       /* comfortable reading measure */
  --gi-sidebar:   300px;
  --gi-gap:       2.5rem;      /* gap between content and sidebar */
  --gi-pad:       1.25rem;     /* page side padding on mobile */

  /* --- Effects --- */
  --gi-radius:    10px;
  --gi-radius-sm: 6px;
  --gi-shadow:    0 1px 2px rgba(16, 32, 48, .06),
                  0 4px 14px rgba(16, 32, 48, .06);
  --gi-shadow-lift: 0 2px 6px rgba(16, 32, 48, .09),
                    0 12px 28px rgba(16, 32, 48, .12);
  --gi-focus:     #b45309;     /* focus ring, visible on light and dark */
}


/* ==========================================================================
   2. BASE / RESET
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--gi-bg-soft);
  color: var(--gi-ink);
  font-family: var(--gi-font);
  font-size: var(--gi-text);
  line-height: var(--gi-leading);
  -webkit-font-smoothing: antialiased;
}

/* Critical for 18 years of hardcoded image widths. */
img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}
img { border: 0; }

a {
  color: var(--gi-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--gi-link-hover); }

/* Visible focus everywhere - required for keyboard accessibility. */
:focus-visible {
  outline: 3px solid var(--gi-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.25;
  margin: 0 0 .6em;
  font-weight: 700;
  letter-spacing: -.011em;
  color: var(--gi-ink);
  overflow-wrap: break-word;
}
h1 { font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem); }
h2 { font-size: clamp(1.35rem, 1.15rem + .85vw, 1.75rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.0625rem; }

p { margin: 0 0 1.15em; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.5em; }
li { margin-bottom: .35em; }

blockquote {
  margin: 1.6em 0;
  padding: 1rem 1.35rem;
  background: var(--gi-bg-sunken);
  border-left: 4px solid var(--gi-brand);
  border-radius: 0 var(--gi-radius-sm) var(--gi-radius-sm) 0;
}
blockquote > :last-child { margin-bottom: 0; }

code, kbd, samp {
  font-family: var(--gi-font-mono);
  font-size: .9em;
  background: var(--gi-bg-sunken);
  padding: .15em .4em;
  border-radius: 4px;
}
pre {
  background: var(--gi-bg-sunken);
  border: 1px solid var(--gi-line);
  border-radius: var(--gi-radius-sm);
  padding: 1rem 1.15rem;
  overflow-x: auto;
  line-height: 1.55;
}
pre code { background: none; padding: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--gi-line);
  margin: 2.5rem 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5em;
  font-size: .97em;
}
th, td {
  border: 1px solid var(--gi-line-strong);
  padding: .6rem .7rem;
  text-align: left;
  vertical-align: top;
}
th { background: var(--gi-bg-sunken); font-weight: 700; }

/* Screen-reader-only text. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   3. LAYOUT CONTAINERS
   ========================================================================== */

.gi-container {
  width: 100%;
  max-width: var(--gi-container);
  margin-inline: auto;
  padding-inline: var(--gi-pad);
}

.gi-main { padding: 2rem 0 3rem; }

/* Two-column shell: content + sidebar. Collapses to one column below 1024px. */
.gi-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gi-gap);
  align-items: start;
}

@media (min-width: 1024px) {
  .gi-shell.has-sidebar {
    grid-template-columns: minmax(0, 1fr) var(--gi-sidebar);
  }
}

/* A white "sheet" that content sits on. */
.gi-sheet {
  background: var(--gi-bg);
  border: 1px solid var(--gi-line);
  border-radius: var(--gi-radius);
  box-shadow: var(--gi-shadow);
  padding: clamp(1.25rem, .7rem + 2.2vw, 2.75rem);
}


/* ==========================================================================
   4. SKIP LINK + HEADER + NAVIGATION
   ========================================================================== */

.gi-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--gi-bg);
  color: var(--gi-link);
  padding: .75rem 1.25rem;
  font-weight: 700;
  border-radius: 0 0 var(--gi-radius-sm) 0;
}
.gi-skip-link:focus {
  left: 0;
  outline: 3px solid var(--gi-focus);
  outline-offset: -3px;
}

.gi-header {
  background: linear-gradient(var(--gi-brand), var(--gi-brand-dark));
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(255,255,255,.12), 0 2px 10px rgba(0,32,56,.18);
}
/* WordPress admin bar is fixed at the top; nudge the sticky header below it. */
.admin-bar .gi-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .gi-header { top: 46px; } }

.gi-header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 74px;
  padding-block: .5rem;
}

/* --- Branding --- */
.gi-brand { display: flex; align-items: center; margin-right: auto; }
.gi-brand a { display: inline-flex; align-items: center; text-decoration: none; }
.gi-brand img {
  display: block;
  max-height: 56px;
  width: auto;
  /* The logo JPG carries the same gradient as the header, so it blends in. */
}
.gi-brand-text {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
}
.gi-brand-text a { color: #fff; }
.gi-brand-text a:hover { color: #ffd9a8; }
.gi-tagline {
  margin: 0;
  font-size: .8125rem;
  color: rgba(255,255,255,.75);
}

/* --- Primary nav --- */
.gi-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem;
  margin: 0;
  padding: 0;
}
.gi-nav li { margin: 0; position: relative; }
.gi-nav a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .6rem .7rem;
  border-radius: var(--gi-radius-sm);
  white-space: nowrap;
}
.gi-nav a:hover,
.gi-nav a:focus-visible { background: rgba(255,255,255,.16); color: #fff; }

/* Current page / section indicator. */
.gi-nav .current-menu-item > a,
.gi-nav .current_page_item > a,
.gi-nav .current-menu-parent > a,
.gi-nav .current-post-ancestor > a {
  background: #fff;
  color: var(--gi-brand-dark);
}

/* Dropdown submenus. */
.gi-nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  flex-direction: column;
  background: var(--gi-brand-dark);
  border-radius: var(--gi-radius-sm);
  box-shadow: var(--gi-shadow-lift);
  padding: .35rem;
  z-index: 20;
}
.gi-nav li:hover > ul,
.gi-nav li:focus-within > ul { display: flex; }
.gi-nav ul ul a { text-transform: none; letter-spacing: 0; font-size: .875rem; }

/* --- Hamburger toggle (hidden on desktop) --- */
.gi-nav-toggle {
  display: none;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.14);
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--gi-radius-sm);
  font: inherit;
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .55rem .8rem;
  cursor: pointer;
}
.gi-nav-toggle:hover { background: rgba(255,255,255,.24); }
.gi-nav-toggle .gi-burger {
  display: block;
  width: 18px; height: 2px;
  background: currentColor;
  position: relative;
}
.gi-nav-toggle .gi-burger::before,
.gi-nav-toggle .gi-burger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px; height: 2px;
  background: currentColor;
  transition: transform .18s ease, top .18s ease;
}
.gi-nav-toggle .gi-burger::before { top: -6px; }
.gi-nav-toggle .gi-burger::after  { top: 6px; }
.gi-nav-toggle[aria-expanded="true"] .gi-burger { background: transparent; }
.gi-nav-toggle[aria-expanded="true"] .gi-burger::before { top: 0; transform: rotate(45deg); }
.gi-nav-toggle[aria-expanded="true"] .gi-burger::after  { top: 0; transform: rotate(-45deg); }


/* ==========================================================================
   5. SEARCH FORM
   ========================================================================== */

.gi-search { display: flex; }
/* NOTE: do not give this label `display: contents` - it cancels the
   .screen-reader-text clipping and the label text becomes visible. */
.gi-search input[type="search"],
.gi-search input[type="text"] {
  font: inherit;
  font-size: .875rem;
  padding: .5rem .7rem;
  min-width: 0;
  width: 100%;
  color: var(--gi-ink);
  background: #fff;
  border: 1px solid var(--gi-line-strong);
  border-right: 0;
  border-radius: var(--gi-radius-sm) 0 0 var(--gi-radius-sm);
}
.gi-search button {
  font: inherit;
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .5rem .85rem;
  color: #fff;
  background: var(--gi-brand-dark);
  border: 1px solid var(--gi-brand-dark);
  border-radius: 0 var(--gi-radius-sm) var(--gi-radius-sm) 0;
  cursor: pointer;
}
.gi-search button:hover { background: var(--gi-brand-deep); border-color: var(--gi-brand-deep); }

/* Header search sits inline on desktop. */
.gi-header-search { width: 210px; flex: 0 0 auto; }
.gi-header-search input { border-color: rgba(255,255,255,.35); }


/* ==========================================================================
   6. AD SLOTS  (render nothing until a widget is dropped in)
   ========================================================================== */

.gi-adslot {
  margin: 0 auto;
  text-align: center;
}
.gi-adslot--below-header { padding: 1rem 0 0; }
.gi-adslot--after-content { margin: 2rem 0 0; }
.gi-adslot--sidebar-top { margin-bottom: 1.5rem; }
.gi-adslot .widget { margin-bottom: 1rem; }
.gi-adslot img { display: inline-block; }


/* ==========================================================================
   7. FRONT PAGE: HERO + POST CARDS
   ========================================================================== */

.gi-hero {
  background: var(--gi-bg);
  border: 1px solid var(--gi-line);
  border-radius: var(--gi-radius);
  box-shadow: var(--gi-shadow);
  padding: clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
  margin-bottom: 2rem;
}
/* The accent rule sits under the headline, matching the widget titles in the
   sidebar, rather than as a bar across the top of the card. */
.gi-hero h1 {
  margin-bottom: .7em;
  padding-bottom: .4em;
  border-bottom: 2px solid var(--gi-accent);
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.35rem);
}
.gi-hero p {
  font-size: var(--gi-text-lead);
  color: var(--gi-ink-soft);
  max-width: 62ch;
  margin-bottom: 0;
}
.gi-hero p + p { margin-top: .8em; }
.gi-hero a { font-weight: 600; }

/* --- Section headings between blocks --- */
.gi-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.1rem;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gi-ink-soft);
}
.gi-section-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--gi-line);
}

/* --- Card grid --- */
.gi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
}

.gi-card {
  display: flex;
  flex-direction: column;
  background: var(--gi-bg);
  border: 1px solid var(--gi-line);
  border-radius: var(--gi-radius);
  box-shadow: var(--gi-shadow);
  overflow: hidden;
  margin: 0;
  transition: transform .16s ease, box-shadow .16s ease;
}
.gi-card:hover,
.gi-card:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--gi-shadow-lift);
}

.gi-card-media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--gi-bg-sunken);
  border-bottom: 1px solid var(--gi-line);
}
.gi-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fallback tile for the 157 older posts that have no featured image:
   a branded gradient with the category initial, not a broken box. */
.gi-card-media--placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--gi-brand), var(--gi-brand-deep));
}
.gi-card-media--placeholder span {
  font-size: 2.5rem;
  font-weight: 800;
  color: rgba(255,255,255,.55);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.gi-card-body {
  padding: 1.15rem 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.gi-card-title {
  font-size: 1.125rem;
  line-height: 1.35;
  margin: 0 0 .5rem;
}
.gi-card-title a { color: var(--gi-ink); text-decoration: none; }
.gi-card-title a:hover { color: var(--gi-link); text-decoration: underline; }
.gi-card-excerpt {
  color: var(--gi-ink-soft);
  font-size: .9375rem;
  margin: 0 0 1rem;
}
.gi-card-footer { margin-top: auto; }

/* --- Post meta line --- */
.gi-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .65rem;
  font-size: .8125rem;
  color: var(--gi-ink-faint);
  margin: 0 0 .6rem;
}
.gi-meta a { color: var(--gi-ink-soft); }
.gi-meta a:hover { color: var(--gi-link-hover); }
.gi-meta-sep { opacity: .5; }

/* --- Category pill --- */
.gi-cat {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  text-decoration: none;
  color: var(--gi-brand-dark);
  background: #e4eef6;
  border-radius: 999px;
  padding: .22rem .6rem;
}
.gi-cat:hover { background: var(--gi-accent-soft); color: #8a4f00; }

/* --- Read more link --- */
.gi-more {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 700;
  font-size: .875rem;
  text-decoration: none;
}
.gi-more::after { content: "\2192"; transition: transform .15s ease; }
.gi-more:hover { text-decoration: underline; }
.gi-more:hover::after { transform: translateX(3px); }

/* --- Category strips on the front page --- */
.gi-strip { margin-bottom: 2.5rem; }
.gi-strip-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.gi-strip-list li { margin: 0; }
.gi-strip-item {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  background: var(--gi-bg);
  border: 1px solid var(--gi-line);
  border-radius: var(--gi-radius-sm);
  padding: .8rem .95rem;
}
.gi-strip-item:hover { border-color: var(--gi-line-strong); }
.gi-strip-thumb {
  flex: 0 0 84px;
  width: 84px;
  aspect-ratio: 3 / 2;
  border-radius: 4px;
  overflow: hidden;
  background: var(--gi-bg-sunken);
}
.gi-strip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gi-strip-title { font-size: .9375rem; margin: 0 0 .25rem; line-height: 1.4; }
.gi-strip-title a { color: var(--gi-ink); text-decoration: none; }
.gi-strip-title a:hover { color: var(--gi-link); text-decoration: underline; }


/* ==========================================================================
   8. ARCHIVE / SEARCH LISTINGS
   ========================================================================== */

.gi-page-header {
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--gi-line);
}
.gi-page-header h1 { margin-bottom: .3em; }
.gi-page-header .gi-archive-desc {
  color: var(--gi-ink-soft);
  margin: 0;
  max-width: 62ch;
}
.gi-result-count {
  font-size: .875rem;
  color: var(--gi-ink-faint);
  margin: .5rem 0 0;
}

.gi-list { list-style: none; margin: 0; padding: 0; }
.gi-list > li { margin: 0; }

.gi-item {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 1.35rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--gi-line);
}
.gi-item:first-child { padding-top: 0; }
.gi-item-media {
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: var(--gi-radius-sm);
  overflow: hidden;
  background: var(--gi-bg-sunken);
}
.gi-item-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gi-item-title { font-size: 1.3rem; margin: 0 0 .45rem; }
.gi-item-title a { color: var(--gi-ink); text-decoration: none; }
.gi-item-title a:hover { color: var(--gi-link); text-decoration: underline; }
.gi-item-excerpt { color: var(--gi-ink-soft); margin: 0 0 .75rem; }

/* No featured image: drop the media column entirely rather than show a gap. */
.gi-item.no-media { grid-template-columns: minmax(0, 1fr); }

.gi-empty {
  padding: 2rem 0;
  color: var(--gi-ink-soft);
}
.gi-empty h2 { color: var(--gi-ink); }

/* Refine-search box on the search results and 404 pages. */
.gi-refine-search {
  max-width: 420px;
  margin: 0 0 2rem;
}

/* Flat two/three-column category list used on the 404 page. */
.gi-cat-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  columns: 2;
  column-gap: 2rem;
}
@media (min-width: 768px) { .gi-cat-list { columns: 3; } }
.gi-cat-list li {
  break-inside: avoid;
  margin: 0 0 .35rem;
  font-size: .9375rem;
}
.gi-cat-list a { text-decoration: none; }
.gi-cat-list a:hover { text-decoration: underline; }
.gi-cat-list ul { list-style: none; padding-left: .9rem; margin: .3rem 0 0; }


/* ==========================================================================
   9. SINGLE POST + PAGE
   ========================================================================== */

.gi-breadcrumb {
  font-size: .8125rem;
  color: var(--gi-ink-faint);
  margin: 0 0 1rem;
}
.gi-breadcrumb a { color: var(--gi-ink-soft); }
.gi-breadcrumb .sep { opacity: .5; padding: 0 .35rem; }

.gi-entry-header { margin-bottom: 1.5rem; }
.gi-entry-header h1 { margin-bottom: .45em; }

.gi-featured {
  margin: 0 0 1.75rem;
  border-radius: var(--gi-radius-sm);
  overflow: hidden;
  background: var(--gi-bg-sunken);
}
.gi-featured img { width: 100%; display: block; }

/* The reading column. Keeps line length comfortable no matter how wide
   the browser is. */
.entry-content {
  max-width: var(--gi-content);
  font-size: var(--gi-text);
  overflow-wrap: break-word;
}
.entry-content > :last-child { margin-bottom: 0; }

.entry-content h2 {
  margin-top: 2em;
  padding-top: .2em;
}
.entry-content h3 { margin-top: 1.7em; }
.entry-content h2:first-child,
.entry-content h3:first-child { margin-top: 0; }

/* Links inside post content are underlined, not just recoloured. The link blue
   sits at only 2.3:1 against body text, so colour alone is not a reliable cue -
   it fails WCAG 1.4.1 and is invisible to readers with colour-vision
   deficiency. The underline is offset so descenders stay readable. */
.entry-content a {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.entry-content a:hover { text-decoration-thickness: 2px; }

/* Images wrapped in links are the exception - an underline under a photo is
   just a stray rule. */
.entry-content a:has(> img) { text-decoration: none; }

/* ---- Every other place a link sits beside plain text ----------------------
   Same WCAG 1.4.1 rule as above. These are the spots where a link shares its
   container with other words, so colour alone is not enough to mark it:
     .gi-breadcrumb   "Home » Marketing » Title"   (links beside separators)
     .gi-terms        "Filed under: Branding, ..." (links beside the label)
     .gi-meta         date · category · comments   (comments link beside date)
     .gi-footer-bottom "Copyright 2008-2026 GeekInspired.com"
   The category chip is deliberately exempt - it has a background and pill
   shape, which already distinguishes it without an underline. */
.gi-breadcrumb a,
.gi-entry-footer .gi-terms a,
.gi-meta a:not(.gi-cat),
.gi-footer-bottom p a,
.comment-metadata a,
.comment-content a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.gi-breadcrumb a:hover,
.gi-entry-footer .gi-terms a:hover,
.gi-meta a:not(.gi-cat):hover,
.gi-footer-bottom p a:hover { text-decoration-thickness: 2px; }

/* WordPress core alignment + caption classes (used by 2024-2026 posts). */
.entry-content .alignleft,
.entry-content img.alignleft {
  float: left;
  margin: .35rem 1.5rem 1rem 0;
}
.entry-content .alignright,
.entry-content img.alignright {
  float: right;
  margin: .35rem 0 1rem 1.5rem;
}
.entry-content .aligncenter,
.entry-content img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  float: none;
}
.entry-content .alignnone { float: none; }

.wp-caption { max-width: 100%; margin-bottom: 1.25rem; }
.wp-caption img { display: block; }
.wp-caption-text, .entry-content figcaption {
  font-size: .8125rem;
  color: var(--gi-ink-faint);
  text-align: center;
  margin: .5rem 0 0;
  line-height: 1.5;
}

/* Responsive embeds. gi2026.js wraps every <iframe> in .gi-embed and sets
   --gi-embed-ratio from the iframe's own width/height attributes, so a 16:9
   YouTube video and a 300x250 banner each keep their own shape. */
.gi-embed {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: var(--gi-embed-ratio, 16 / 9);
  margin: 0 0 1.5rem;
}
.gi-embed > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Small fixed-size embeds (ad banners) should not stretch to full width. */
.gi-embed.is-small { width: auto; max-width: 100%; margin-inline: auto; }

/* --- Share links (plain anchors, no third-party scripts) --- */
.gi-share {
  margin: 2.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 2px solid var(--gi-line);
}
.gi-share h2 {
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gi-ink-soft);
  margin: 0 0 .7rem;
}
.gi-share ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
}
.gi-share li { margin: 0; }
.gi-share a, .gi-share button {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font: inherit;
  font-size: .8125rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--gi-brand-dark);
  background: #fff;
  border: 1px solid var(--gi-line-strong);
  border-radius: 999px;
  padding: .45rem .9rem;
  cursor: pointer;
}
.gi-share a:hover, .gi-share button:hover {
  background: var(--gi-brand-dark);
  border-color: var(--gi-brand-dark);
  color: #fff;
}
.gi-share svg { width: 15px; height: 15px; fill: currentColor; }
.gi-copied { font-size: .8125rem; color: #15803d; font-weight: 700; }

/* --- Entry footer: categories + tags --- */
.gi-entry-footer {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gi-line);
  font-size: .875rem;
  color: var(--gi-ink-soft);
}
.gi-entry-footer .gi-terms { margin: 0 0 .5rem; }
.gi-entry-footer .gi-terms strong { color: var(--gi-ink); }

/* --- Prev / next post navigation --- */
.gi-post-nav {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}
@media (min-width: 640px) { .gi-post-nav { grid-template-columns: 1fr 1fr; } }
.gi-post-nav a {
  display: block;
  padding: 1rem 1.15rem;
  background: var(--gi-bg);
  border: 1px solid var(--gi-line);
  border-radius: var(--gi-radius-sm);
  text-decoration: none;
  color: var(--gi-ink);
  height: 100%;
}
.gi-post-nav a:hover { border-color: var(--gi-brand); background: #fbfdff; }
.gi-post-nav .label {
  display: block;
  font-size: .6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gi-ink-faint);
  margin-bottom: .3rem;
}
.gi-post-nav .title { font-weight: 700; line-height: 1.4; }
.gi-post-nav .next { text-align: right; }

/* --- Related posts --- */
.gi-related { margin-top: 2.5rem; }


/* ==========================================================================
   10. LEGACY POST COMPATIBILITY  (2008-2011 markup)

   The old theme floated images inside paragraphs:
     #contentleft p img      { float: left  }   <- bare <img> in a <p>
     #contentleft p a img    { float: right }   <- <a><img></a> in a <p>
     #contentleft p          { clear: both  }   <- each <p> cleared the float

   40 published posts rely on the left float and 28 on the right float. Those
   rules are recreated here, but ONLY on posts published before 2012 (PHP adds
   the .gi-legacy class), so they can never interfere with new posts. Below
   600px everything unfloats, because a 240px image beside text is unreadable
   on a phone.
   ========================================================================== */

@media (min-width: 600px) {
  .gi-legacy .entry-content p { clear: both; }

  .gi-legacy .entry-content p img {
    float: left;
    margin: .3rem 1.25rem .75rem 0;
  }
  .gi-legacy .entry-content p a img {
    float: right;
    margin: .3rem 0 .75rem 1.25rem;
  }

  /* Explicit alignment classes always beat the inherited float. */
  .gi-legacy .entry-content p img.aligncenter,
  .gi-legacy .entry-content p a img.aligncenter {
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
  .gi-legacy .entry-content p img.alignright,
  .gi-legacy .entry-content p a img.alignright {
    float: right;
    margin: .3rem 0 .75rem 1.25rem;
  }
  .gi-legacy .entry-content p img.alignleft,
  .gi-legacy .entry-content p a img.alignleft {
    float: left;
    margin: .3rem 1.25rem .75rem 0;
  }
}

/* On phones: no floats at all, images become full-width blocks. */
@media (max-width: 599px) {
  .gi-legacy .entry-content p img,
  .gi-legacy .entry-content p a img,
  .entry-content img.alignleft,
  .entry-content img.alignright,
  .entry-content .alignleft,
  .entry-content .alignright {
    float: none !important;
    display: block;
    margin: 0 auto 1.25rem !important;
  }
}

/* Old posts used <center> and hardcoded widths; keep them from overflowing. */
.entry-content center { display: block; margin-bottom: 1.25rem; }
.entry-content table { display: block; overflow-x: auto; }
@media (min-width: 600px) { .entry-content table { display: table; } }

/* Old smileys should never pick up the image floats. */
.entry-content img.wp-smiley,
.entry-content img.wp-wink {
  float: none !important;
  display: inline;
  margin: 0 !important;
  width: auto;
  height: 1em;
}

/* Modern posts ship their own inline-styled wrapper div (Arial 16px,
   max-width 900px). Inline styles win, which is fine - this just stops the
   wrapper's fixed max-width from overflowing a narrow column. */
.entry-content > div[style*="max-width"] { max-width: 100% !important; }


/* ==========================================================================
   11. SIDEBAR + WIDGETS
   ========================================================================== */

.gi-sidebar { min-width: 0; }

.widget {
  background: var(--gi-bg);
  border: 1px solid var(--gi-line);
  border-radius: var(--gi-radius);
  box-shadow: var(--gi-shadow);
  padding: 1.15rem 1.25rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size: .9375rem;
}
.widget:last-child { margin-bottom: 0; }

.widget-title, .widget h2 {
  font-size: .8125rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gi-brand-dark);
  margin: 0 0 .85rem;
  padding-bottom: .55rem;
  border-bottom: 2px solid var(--gi-accent);
}

.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li {
  margin: 0;
  padding: .4rem 0;
  border-bottom: 1px solid var(--gi-line);
  line-height: 1.45;
}
.widget li:last-child { border-bottom: 0; padding-bottom: 0; }
/* Underlined, because each <li> also holds the post count — "Photography (37)".
   That makes it a text block, and a link inside a text block must be
   distinguishable by something other than colour (WCAG 1.4.1); our link blue is
   only 2.3:1 against body text. The underline is tinted down so 40 categories
   don't read as a wall of rules, which still satisfies the requirement. */
.widget li a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: var(--gi-line-strong);
}
.widget li a:hover { text-decoration-color: currentColor; }

/* Nested category/archive lists. */
.widget li ul { margin-top: .4rem; padding-left: .9rem; border-left: 2px solid var(--gi-line); }
.widget li ul li:last-child { padding-bottom: .4rem; }

.widget select { width: 100%; font: inherit; padding: .5rem; border: 1px solid var(--gi-line-strong); border-radius: var(--gi-radius-sm); }
.widget .post-date { color: var(--gi-ink-faint); font-size: .8125rem; }


/* ==========================================================================
   12. COMMENTS
   ========================================================================== */

.gi-comments { margin-top: 2.5rem; }
.gi-comments-title {
  font-size: 1.25rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--gi-line);
  margin-bottom: 1.5rem;
}

.comment-list { list-style: none; margin: 0 0 2rem; padding: 0; }
.comment-list ol.children { list-style: none; margin: 1rem 0 0 0; padding-left: 1.5rem; border-left: 2px solid var(--gi-line); }
.comment-list li { margin: 0 0 1.25rem; }

.comment-body {
  background: var(--gi-bg);
  border: 1px solid var(--gi-line);
  border-radius: var(--gi-radius-sm);
  padding: 1.1rem 1.25rem;
}
.comment-author {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  margin-bottom: .25rem;
}
.comment-author img { border-radius: 50%; }
.comment-author .says { display: none; }
.comment-metadata { font-size: .8125rem; color: var(--gi-ink-faint); margin-bottom: .7rem; }
.comment-metadata a { color: var(--gi-ink-faint); }
.comment-content > :last-child { margin-bottom: 0; }
.comment-reply-link {
  display: inline-block;
  margin-top: .6rem;
  font-size: .8125rem;
  font-weight: 700;
  text-decoration: none;
}
.bypostauthor > .comment-body { border-left: 3px solid var(--gi-accent); }
.comment-awaiting-moderation { font-size: .8125rem; color: var(--gi-accent); font-style: italic; }

/* --- Comment form --- */
.comment-respond {
  background: var(--gi-bg);
  border: 1px solid var(--gi-line);
  border-radius: var(--gi-radius);
  padding: 1.35rem 1.5rem 1.5rem;
}
.comment-reply-title { font-size: 1.15rem; margin-bottom: .5rem; }
.comment-form label { display: block; font-weight: 700; font-size: .875rem; margin-bottom: .3rem; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  font: inherit;
  font-size: .9375rem;
  padding: .6rem .7rem;
  color: var(--gi-ink);
  background: #fff;
  border: 1px solid var(--gi-line-strong);
  border-radius: var(--gi-radius-sm);
}
.comment-form textarea { min-height: 150px; resize: vertical; }
.comment-form p { margin-bottom: 1rem; }
.comment-form .form-submit { margin-bottom: 0; }
.comment-notes, .comment-form .logged-in-as { font-size: .8125rem; color: var(--gi-ink-faint); }

input[type="submit"], .gi-button {
  font: inherit;
  font-size: .9375rem;
  font-weight: 700;
  color: #fff;
  background: var(--gi-brand-dark);
  border: 1px solid var(--gi-brand-dark);
  border-radius: var(--gi-radius-sm);
  padding: .65rem 1.4rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
input[type="submit"]:hover, .gi-button:hover {
  background: var(--gi-brand-deep);
  border-color: var(--gi-brand-deep);
  color: #fff;
}

.no-comments { color: var(--gi-ink-faint); font-style: italic; }


/* ==========================================================================
   13. PAGINATION
   ========================================================================== */

.gi-pagination { margin-top: 2rem; }
.gi-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
}
.gi-pagination .page-numbers {
  display: inline-block;
  min-width: 2.5rem;
  text-align: center;
  padding: .5rem .7rem;
  background: var(--gi-bg);
  border: 1px solid var(--gi-line);
  border-radius: var(--gi-radius-sm);
  text-decoration: none;
  font-weight: 700;
  font-size: .9375rem;
}
.gi-pagination .page-numbers:hover { border-color: var(--gi-brand); }
.gi-pagination .page-numbers.current {
  background: var(--gi-brand-dark);
  border-color: var(--gi-brand-dark);
  color: #fff;
}
.gi-pagination .page-numbers.dots { border: 0; background: none; min-width: auto; }


/* ==========================================================================
   14. FOOTER
   ========================================================================== */

.gi-footer {
  background: var(--gi-brand-deep);
  color: rgba(255,255,255,.82);
  margin-top: 3rem;
  font-size: .9375rem;
}
.gi-footer a { color: #fff; }
.gi-footer a:hover { color: #ffd9a8; }

.gi-footer-widgets {
  display: grid;
  gap: 2rem;
  padding: 2.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
@media (min-width: 768px) {
  .gi-footer-widgets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.gi-footer-widgets .widget {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  color: rgba(255,255,255,.82);
}
.gi-footer-widgets .widget-title,
.gi-footer-widgets .widget h2 {
  color: #fff;
  border-bottom-color: rgba(255,255,255,.25);
}
.gi-footer-widgets .widget li { border-bottom-color: rgba(255,255,255,.12); }

.gi-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.35rem 0;
  font-size: .875rem;
}
.gi-footer-bottom p { margin: 0; }
.gi-footer-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
  padding: 0;
}
.gi-footer-nav li { margin: 0; }
.gi-footer-nav a { text-decoration: none; }
.gi-footer-nav a:hover { text-decoration: underline; }


/* ==========================================================================
   15. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* --- Tablet and below: nav collapses to a hamburger panel --- */
@media (max-width: 1023px) {
  .gi-nav-toggle { display: inline-flex; }

  .gi-nav {
    display: none;
    order: 10;
    flex: 1 0 100%;
    padding-bottom: .75rem;
  }
  .gi-nav.is-open { display: block; }
  .gi-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .gi-nav li { border-top: 1px solid rgba(255,255,255,.16); }
  .gi-nav a { padding: .8rem .25rem; border-radius: 0; }
  .gi-nav ul ul {
    display: flex;
    position: static;
    box-shadow: none;
    background: rgba(0,0,0,.18);
    padding: 0 0 0 .9rem;
    border-radius: 0;
  }

  .gi-header-inner { flex-wrap: wrap; }
  .gi-header-search { width: 100%; order: 11; padding-bottom: .85rem; }
  .gi-header.nav-closed .gi-header-search { display: none; }
}

@media (min-width: 1024px) {
  .gi-nav { display: block !important; }
}

/* --- Small tablets / large phones --- */
@media (max-width: 767px) {
  :root { --gi-gap: 2rem; }

  .gi-item {
    grid-template-columns: minmax(0, 1fr);
    gap: .9rem;
  }
  .gi-item-media { max-width: 100%; }
  .gi-item-title { font-size: 1.15rem; }
}

/* --- Phones --- */
@media (max-width: 519px) {
  :root { --gi-text: 1rem; --gi-pad: 1rem; }

  .gi-header-inner { min-height: 62px; }
  .gi-brand img { max-height: 42px; }
  .gi-grid { grid-template-columns: minmax(0, 1fr); gap: 1.15rem; }
  .gi-strip-item { flex-direction: column; }
  .gi-strip-thumb { flex-basis: auto; width: 100%; }
  .gi-footer-bottom { flex-direction: column; align-items: flex-start; }
  .comment-list ol.children { padding-left: .8rem; }
}


/* ==========================================================================
   16. DARK MODE
   Only the tokens are redefined - every rule above inherits automatically.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --gi-link:        #7cc0ef;
    --gi-link-hover:  #ffb44d;
    --gi-accent:      #f0972a;
    --gi-accent-soft: #3a2a10;

    --gi-ink:         #e6edf4;
    --gi-ink-soft:    #a9b8c7;
    --gi-ink-faint:   #8494a5;

    --gi-bg:          #131c26;
    --gi-bg-soft:     #0d141c;
    --gi-bg-sunken:   #1b2733;
    --gi-line:        #253442;
    --gi-line-strong: #35485a;

    --gi-focus:       #ffb44d;

    --gi-shadow:      0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
    --gi-shadow-lift: 0 2px 6px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.4);
  }

  /* --- Widget titles used the near-black brand blue, which sat at 1.66:1 on
         a dark card. Lifted to a light blue that reads at 8:1. --- */
  .widget-title, .widget h2 { color: #8fc6ea; }

  /* --- Inline colors from hand-written post HTML ---------------------------
     Your posts (and the CLAUDE.md wrapper div) carry colors chosen for a
     white page: color:#111827 and color:#1f2937. Inline styles beat any
     stylesheet, so on a dark background that body text renders at 1.03:1 -
     effectively invisible. These rules take back control of text color, then
     hand back the few inline colors that actually mean something.

     Read the selectors as: "any element that sets a color inline, but does
     NOT set its own background". Elements that bring their own light
     background (your table headers) are handled separately below, so they
     keep dark text on their light fill. --- */
  .entry-content [style*="color"]:not([style*="background"]) {
    color: var(--gi-ink) !important;
  }
  .entry-content a[style*="color"] { color: var(--gi-link) !important; }

  /* Restore intent: the green checkmark, lifted to a readable green.
     These carry the SAME specificity as the blanket rule above (the :not()
     counts toward it) and sit later in the file, so they win. Drop the
     :not() and they silently lose. */
  .entry-content [style*="2e7d32"]:not([style*="background"]) {
    color: #6ee7a0 !important;
  }
  /* Old posts used pure blue for inline link text. */
  .entry-content [style*="0000ff"]:not([style*="background"]) {
    color: var(--gi-link) !important;
  }

  /* Anything carrying its own light background keeps dark text on it. */
  .entry-content [style*="background-color: #f"],
  .entry-content [style*="background-color:#f"],
  .entry-content [style*="background: #f"],
  .entry-content [style*="background:#f"] { color: #16202c !important; }

  /* Category pills need their own dark-mode colors - they are the one place
     that uses a fixed light background rather than a token. */
  .gi-cat { background: #1d3348; color: #bcd7ea; }
  .gi-cat:hover { background: var(--gi-accent-soft); color: #f0b76a; }

  /* The header keeps the brand gradient in dark mode so the logo still
     blends, but sits on a darker page. */
  .gi-nav .current-menu-item > a,
  .gi-nav .current_page_item > a,
  .gi-nav .current-menu-parent > a,
  .gi-nav .current-post-ancestor > a {
    background: #e6edf4;
    color: var(--gi-brand-deep);
  }

  .gi-post-nav a:hover { background: #18232f; }

  /* Share pills hardcode a white fill for the light theme - swap it here so
     they don't glare against the dark page. */
  .gi-share a, .gi-share button {
    background: var(--gi-bg-sunken);
    border-color: var(--gi-line-strong);
    color: var(--gi-ink);
  }
  .gi-share a:hover, .gi-share button:hover {
    background: var(--gi-link);
    border-color: var(--gi-link);
    color: #0d141c;
  }
  .gi-search input[type="search"],
  .gi-search input[type="text"],
  .comment-form input, .comment-form textarea { background: var(--gi-bg-sunken); color: var(--gi-ink); }
}


/* ==========================================================================
   17. PRINT
   ========================================================================== */

@media print {
  .gi-header, .gi-footer, .gi-sidebar, .gi-share,
  .gi-post-nav, .gi-pagination, .gi-adslot, .comment-respond,
  .gi-skip-link, .gi-breadcrumb { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .gi-sheet { border: 0; box-shadow: none; padding: 0; }
  .entry-content { max-width: none; }
  .entry-content a::after { content: " (" attr(href) ")"; font-size: 10pt; word-break: break-all; }
}