/* ========================================================================== tejaspatel.me — Ghost theme A like-for-like port of the MyThemeShop "Business" design. EVERY TOKEN BELOW WAS MEASURED off the live WordPress site with getComputedStyle, not read out of its stylesheet and not eyeballed from a screenshot. The stylesheet tells you what was written; the rendered page tells you what it looks like. body #EBEBEB bg, #004466 text, Poppins 16px/20px main container 1072px, max-width 96%, #FFFFFF content 694px | sidebar 375px (at 1440 viewport) header #E8F0FF, 131px tall wordmark Aclonica 65px 700 #0066AA nav Poppins 14px uppercase 400 #004466 post title Poppins 28px/39.2px 700 #004466 links #0066AA, no underline widget title Poppins 20px 700 #004466 footer top #F3F7FE ; footer text #252525 The 16px/20px body leading is genuinely what the site uses -- verified across 11 consecutive paragraphs, not one sample. It is tight; it is also the design. ========================================================================== */ :root { --ink: #004466; --ink-soft: #3b6e88; --brand: #0066aa; --brand-dark: #005490; --accent: #11cc11; --page-bg: #ebebeb; --surface: #ffffff; --header-bg: #e8f0ff; --footer-bg: #f3f7fe; --footer-ink: #252525; --rule: #e5e5e5; --shadow: 0 1px 3px rgba(0, 34, 51, .08); --container: 1072px; --sidebar-w: 330px; --gap: 32px; --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-brand: 'Aclonica', 'Poppins', sans-serif; } /* --- reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { /* clip, NOT hidden. `overflow-x: hidden` on html/body creates a scroll container that silently kills position:sticky further down the tree -- that cost a fleet site its sticky header. `clip` contains overflow without establishing a scrollport. */ overflow-x: clip; -webkit-text-size-adjust: 100%; } body { margin: 0; overflow-x: clip; background: var(--page-bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 20px; -webkit-font-smoothing: antialiased; } img, svg, video, iframe { max-width: 100%; } img { height: auto; border: 0; } a { color: var(--brand); text-decoration: none; } a:hover, a:focus-visible { color: var(--brand-dark); text-decoration: underline; } h1, h2, h3, h4, h5, h6 { margin: 0 0 .6em; font-weight: 700; line-height: 1.3; color: var(--ink); } :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; } .sr-only, .skip-link { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 999; width: auto; height: auto; clip: auto; margin: 0; padding: 10px 16px; background: var(--brand); color: #fff; border-radius: 4px; } /* --- shell ---------------------------------------------------------------- */ .main-container { width: var(--container); max-width: 96%; margin: 0 auto; background: var(--surface); box-shadow: var(--shadow); } .wrap { padding: 0 20px 40px; } .wrap--sidebar { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-w); gap: var(--gap); align-items: start; } /* minmax(0, 1fr) not 1fr: a grid item's default min-width is auto, so one wide child (a table, a 
, a 300px ad) pushes the whole column past the track
   and the PAGE overflows horizontally. This single line prevents most of it. */
.content-col { min-width: 0; }

/* --- header --------------------------------------------------------------- */
.site-header { background: var(--header-bg); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 22px 20px;
}

.brand-text {
  font-family: var(--font-brand);
  font-size: 46px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--brand);
  display: inline-block;
}
.brand-text:hover { text-decoration: none; color: var(--brand-dark); }
.brand-logo img { max-height: 76px; width: auto; }
.site-tagline { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); }

.site-nav ul {
  /* {{navigation}} emits its OWN