/* ============================================================================
   achocodesstyles.css - the single stylesheet for the entire acho codes site
   ----------------------------------------------------------------------------

   DESIGN SYSTEM
   -------------
   * Fonts: ONLY two families in the whole site -
    - "Reddit Sans" (Google Fonts)  -> all UI and body text   (--font-ui)
    - "codingfont" = Source Code Pro Medium (local file)
                                      -> every code snippet      (--font-code)

   * Themes: a LIGHT theme (the classic warm-paper look) and a DARK theme
     built on deep navy blues (#011B2A / #012234 / #01283F). Everything is
     driven by CSS custom properties on <html>:
    - light: html[data-theme="light"]  (also the :root default)
    - dark : html[data-theme="dark"]
     The attribute is set by the bootstrap script in universal_header.php
     BEFORE first paint (no flash), and flipped by the iPhone-style switch
     in the top bar (universal_navigation.php).

   * Responsive: layout is fluid at every size - phones (<=480px), small
     tablets (661-900px), tablets/laptops (901-1150px), large screens
     (1151px+) - one readable column on phones, comfortable grids after.

   * Legacy support: all historical class names (outermostcontainer,
     panelbox, footer*, projectname, contactform*, parallax, tooltip,
     playpanel, javascriptmenu, cheatsheet-point ...) keep working, so
     pages that were NOT regenerated still render correctly.

   GUIDE CARD ICONS
   ----------------
   .gicon-* classes embed tiny URL-encoded SVG logos as data URIs -
   no extra HTTP requests, crisp at any DPI, themed containers.
   ============================================================================ */


/* ============================================================
   1. FONT FACES - the only two fonts on the site
   ============================================================ */

/* Source Code Pro Medium - local file at the site ROOT, used for ALL code.
   (Reddit Sans is loaded from Google Fonts in universal_header.php.) */
@font-face {
    font-family: codingfont;
    src: url("SourceCodePro-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


/* ============================================================
   2. THEME TOKENS - LIGHT (default)
   ============================================================ */
:root {
    /* ---- brand palette (kept from the classic site) ---- */
    --obilo-blue: #F20D5E;
    --obilo-blue2: #F20D5E;
    --logo-blue: #006ddc;
    --obilo-gold: #ffd213;
    --middark-color: #1777a4;
    --darkest-color: #05222f;

    /* ---- legacy gray ramp (referenced by older rules) ---- */
    --gray0: #171715;
    --gray1: #2C2B29;
    --gray2: #44423E;
    --gray3: #5E5C56;
    --gray4: #85827A;
    --gray5: #A8A49A;
    --gray6: #C2BEB2;
    --gray7: #E0DBCD;
    --gray8: #F0EBDC;
    --gray10: #F3EFE3;
    --gray13: #FCFBF7;
    --lightbordergray: #e3e6ec;
    --generaltextcolor: #2f2f2f;

    /* ---- semantic theme tokens (light) ---- */
    --font-ui: 'Reddit Sans', 'Manrope', Helvetica, 'Segoe UI', sans-serif;
    --font-code: 'codingfont', 'Source Code Pro', Consolas, monospace;

    --bg-page: #f4f1e9; /* page behind the container      */
    --bg-container: #F9F7F1; /* the big rounded page container */
    --bg-panel: #FFFFFF; /* cards, dropdowns, inputs      */
    --bg-inset: #F0EBDC; /* subtle inset surfaces         */

    --text-strong: #1a1a1a; /* headings                       */
    --text-body: #2f2f2f; /* body copy                      */
    --text-muted: #666666; /* secondary copy                 */

    --brand-blue: #F20D5E;
    --brand-gold: #FFD213;
    --gold-soft: #fff3b0; /* <mark> highlight, soft accents  */

    --border-soft: #e8e8e8;
    --border-strong: #e3e6ec;

    --icon-bg: #FFF9E0; /* .gicon tile background         */

    --link-color: #F20D5E;
    --code-edge: #CAEBFF; /* left bar on code blocks         */
    --code-bg: #ffffff;
    --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.09);
    --search-hover: #f6f2e7;
    --topbar-bg: rgba(249, 247, 241, 0.88);
    --track-off: #e6e1d5; /* theme switch track (light)     */

    /* topic navbar (the bar under the topbar) */
    --nav-bg: rgba(237, 235, 229, 0.96);
    --nav-link: rgba(0, 0, 0, 0.73);
    --nav-link-hover: #F20D5E;

    color-scheme: light;
}

/* ============================================================
   2b. THEME TOKENS - DARK (deep navy, never pitch black)
   ============================================================
   A dark theme built on deep navy blues - #011B2A behind the page (the
   very darkest, so the polkadot area reads darkest of all), #012234 for
   the big container, #01283F for panels. The topbar keeps its #113260
   glass and the topic navbar keeps its #16355F glass. Gold stays (it IS
   the brand) and the pink accent lightens for contrast. */
html[data-theme="dark"] {
    --bg-page: #011B2A;
    --bg-container: #012234;
    --bg-panel: #01283F;
    --bg-inset: #012F4B;

    --text-strong: #F2F7FF;
    --text-body: #D8E4F5;
    --text-muted: #A3B8D6;

    --brand-blue: #FF6E9C; /* pink lightened for contrast on navy */
    --brand-gold: #FFD213; /* the gold stays - it IS the brand */
    --gold-soft: rgba(255, 210, 19, 0.30); /* <mark> highlight on navy */

    --border-soft: #0A3A58;
    --border-strong: #15628A;

    --icon-bg: #0B3B58;

    --link-color: #FF6E9C;
    --code-edge: #4A7FC1;
    --code-bg: #011824;
    --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.45);
    --search-hover: #073A57;
    --topbar-bg: rgba(17, 50, 96, 0.92); /* #113260 - kept for the topbar */
    --track-off: #0A3A58;

    /* topic navbar - #16355F, kept for the navbar */
    --nav-bg: rgba(22, 53, 95, 0.96);
    --nav-link: #D8E4F5;
    --nav-link-hover: #00BFFF;

    /* legacy ramp, re-pointed to the navy equivalents */
    --gray13: #01283F;
    --gray10: #0B3B58;
    --gray8: #0B3B58;
    --lightbordergray: #0A3A58;
    --generaltextcolor: #D8E4F5;

    color-scheme: dark;
}


/* ============================================================
   3. RESET & BASE
   ============================================================ */
html {
    box-sizing: border-box;
    scroll-behavior: smooth; /* smooth section + deep-link scrolling */
}

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

/* Every anchored element clears the sticky top bar when scrolled to. */
[id] {
    scroll-margin-top: 96px;
}

body {
    margin: auto;
    font-family: var(--font-ui); /* Reddit Sans everywhere */
    font-weight: 300;
    font-size: 20px; /* overridden on small screens */
    line-height: 1.55;
    color: var(--text-body);
    text-align: left;
    background-color: var(--bg-page);
    background-image: url(obipix_background_tiny_polkadots.jpg);
    background-repeat: repeat;
    transition: background-color 0.35s ease, color 0.35s ease;
}

/* Dark theme keeps the playful polkadot feel via a CSS-only dot pattern,
   recoloured to the darkest navy family: the dots are barely-lighter
   navy on the very darkest #011B2A page, so the polkadot texture survives
   without brightening anything (the JPG is too light to reuse). */
html[data-theme="dark"] body {
    background-image: radial-gradient(rgba(3, 61, 94, 0.5) 1.6px, transparent 1.6px),
    radial-gradient(rgba(3, 61, 94, 0.35) 1.6px, transparent 1.6px);
    background-size: 26px 26px, 26px 26px;
    background-position: 0 0, 13px 13px;
    background-repeat: repeat;
}

a {
    color: var(--link-color);
}

a:hover {
    text-decoration: none;
}

a.hover {
    border-bottom: solid 2px var(--brand-gold);
}

/* ALL code on the site: Source Code Pro Medium only - every <pre>, every
   <code>, every Prism token, everywhere. No exceptions, no fallbacks. */
pre,
code,
pre > code,
samp,
kbd,
tt,
code[class*="language-"],
pre[class*="language-"],
.token,
.language-jsx,
.guide-state code {
    font-family: var(--font-code) !important;
}

::selection {
    background: var(--brand-gold);
    color: #17130f;
}


/* ============================================================
   4. HEADER - top utility bar, hero canvas, logo, navigation
   ============================================================ */
header {
    text-align: center;
    padding-top: 0;
}

/* ---- 4a. sticky top utility bar (brand * search * theme switch) ---- */
.topbar {
    position: sticky;
    top: 10px;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: space-between;
    margin: 14px auto 4px;
    padding: 10px 14px;
    background: var(--topbar-bg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    transition: background-color 0.35s ease, border-color 0.35s ease;


}


/* Brand: the acho codes SVG logo - no text wordmark anywhere. */
.topbar-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.topbar-logo {
    display: block;
    width: 270px;
    height: auto;
    transition: opacity 0.5s ease;
}

.topbar-brand:hover .topbar-logo {
    opacity: 0.8;
}

/* Dual-logo theme swap: .logo-light is the classic wordmark,
   .logo-dark is the recoloured navy-blue wordmark
   (acho-codes-logo-dark.svg). Only one is ever visible. */
.logo-dark {
    display: none;
}

html[data-theme="dark"] .logo-light {
    display: none;
}

html[data-theme="dark"] .logo-dark {
    display: block;
}

/* ---- 4b. intelligent search box ---- */
.searchbox {
    position: relative; /* anchor for the results dropdown */
    display: flex;
    align-items: center;
    flex: 1 1 420px; /* grows to fill the top bar - comfortably wide */
    max-width: 540px;
    min-width: 200px;
    margin: 0 auto;
    gap: 10px;
    height: 44px;
    padding: 0 16px;
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 26px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease,
    background-color 0.35s ease;
}

.searchbox:focus-within {
    border-color: var(--brand-gold);
    box-shadow: 0 0 0 3px rgba(255, 210, 19, 0.25);
}

.searchbox-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Inline SVG magnifier (replaces the FontAwesome glyph, which did not
   render when all.js was unavailable) - sizes with the flexbox. */
.searchbox-icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

.searchbox input[type="search"] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-strong);
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 400;
}

.searchbox input[type="search"]::placeholder {
    color: var(--text-muted);
    opacity: 0.75;
}

/* Remove the native clear button - we manage the panel ourselves */
.searchbox input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* ---- 4c. search results dropdown (results built by acho-core.js) ---- */
.search-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    max-height: 62vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
    z-index: 1000;
    text-align: left;
}

.search-meta,
.search-state {
    padding: 10px 16px;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-soft);
}

.search-state {
    border-bottom: none;
}

/* One guide in the picker: icon + title/description + category chip */
.search-result {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 11px 16px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--border-soft);
    transition: background-color 0.15s ease;
}

.search-result:last-child {
    border-bottom: none;
    border-radius: 0 0 14px 14px;
}

.search-result:hover,
.search-result.active {
    background: var(--search-hover);
}

.search-result .gicon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

/* Icon supplied as an SVG file path instead of a .gicon-* class */
.gicon-img {
    object-fit: contain;
    background-color: var(--icon-bg);
}

.sr-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sr-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-strong);
    line-height: 1.25;
}

.sr-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sr-cat {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    background: var(--bg-inset);
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    padding: 4px 9px;
}

/* Query matches are wrapped in <mark> by acho-core.js */
mark {
    background: var(--gold-soft);
    color: inherit;
    border-radius: 3px;
    padding: 0 2px;
}

/* ---- 4d. iPhone-style light/dark theme switch ---- */
.theme-toggle {
    position: relative;
    flex-shrink: 0;
    width: 58px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 32px;
    background: var(--track-off);
    cursor: pointer;
    transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* The sliding knob */
.tt-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.35s ease;
    z-index: 2;
}

html[data-theme="dark"] .tt-knob {
    transform: translateX(26px);
    background: #EAF2FF; /* cool white knob in dark mode */
}

/* Sun (right side, visible in light mode) and moon (left side, visible
   in dark mode) - the knob always covers the inactive one. */
.tt-sun,
.tt-moon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
    transition: color 0.35s ease, opacity 0.35s ease;
}

.tt-sun {
    right: 8px;
    color: #f5a623;
}

.tt-moon {
    left: 8px;
    color: #8a8272;
}

html[data-theme="dark"] .tt-sun {
    opacity: 0.25;
}

html[data-theme="dark"] .tt-moon {
    color: var(--brand-gold);
}

/* ---- 4e. hero - animated canvas + logo ---- */
.canvas-container {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

#animationCanvas {
    display: block;
    width: 738px; /* base size; see breakpoints below */
    height: 150px;
}

.site-header {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.headerlogo {
    display: block;
    width: 185px;
    margin: 14px auto 10px;
    transition: opacity 0.5s ease;
}

.headerlogo:hover {
    opacity: 0.9;
}

/* ---- 4f. topic navigation (links scroll to home-page sections) ---- */
.navbar {

    flex-wrap: wrap;
    gap: 4px 8px;


    position: sticky;
    top: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: space-between;
    margin: 14px auto 4px;
    margin-top: -17px;
    padding-top: 20px;
    z-index: 3;

    /* themed: --nav-bg / --nav-link flip with the light/dark switch */
    background: var(--nav-bg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-soft);
    border-radius: 0 0 16px 16px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    transition: background-color 0.35s ease, border-color 0.35s ease;


}

.nav-first-group > a,
.nav-second-group > a {
    text-decoration: none;
    padding: 7px 13px 7px 0;
    margin-right: 6px;
    font-weight: 600;
    font-size: 0.9em;
    border-bottom: solid 3px transparent;
    transition: 0.17s;
    color: var(--nav-link);
}

.nav-first-group > a:hover,
.nav-second-group > a:hover {
    border-bottom: solid 3px var(--nav-link-hover);
    color: var(--brand-blue);
    padding-right: 16px;
    margin-right: 11px;
}

/* Legacy header text helpers kept for untouched pages */
.header-text {
    color: var(--brand-blue);
    font-weight: 700;
    display: block;
    font-size: 2.2em;
    text-align: center;
    margin-top: 40px;
    opacity: 0.95;
}

.header-description {
    font-weight: 500;
    font-size: 0.9em;
    display: block;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.52rem;
}

.headersubtext {
    font-family: var(--font-ui);
    color: var(--brand-blue);
    margin-top: -15px;
    opacity: 0.75;
    font-size: 0.9em;
    margin-bottom: 15px;
}

.android-logo-white {
    fill: white;
    max-width: 40px;
    max-height: 40px;
}


/* ============================================================
   5. LAYOUT CONTAINERS
   ============================================================ */
.outermostcontainer {
    margin: 0 auto;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    width: 950px; /* responsive widths in -13 */
    max-width: 100%;
    background-color: var(--bg-container);
    padding-left: 20px;
    padding-right: 20px;
    box-shadow: 12px 0 33px -4px rgba(31, 73, 125, 0.11),
    -12px 0 33px -4px rgba(31, 31, 31, 0.11);
    border-radius: 25px;
    transition: background-color 0.35s ease;
}

.pagecontainer {
    background-color: var(--bg-container);
    transition: background-color 0.35s ease;
}

.stripedyellow {
    background: url(img/background_yellowstripes1.png);
    min-height: 15px;
    height: 15px;
    display: block;
    padding: 0;
    border-radius: 25px 25px 0 0; /* follow the container's top corners */
}

.homesection {
    max-width: 100%;
}

.contact-form-container {
    display: inline;
    max-width: 400px !important;
    margin: 0 auto;
}

/* Legacy canvas helpers kept so old pages keep working */
#currentcanvas {
    width: 260px;
    height: 260px;
    border-radius: 150px;
    border: 1px solid var(--border-soft);
    object-fit: cover;
    opacity: 0.7;
}

#currentcanvas:hover {
    opacity: 1;
}

#can {
    background-color: var(--bg-panel);
    width: 798px;
    max-width: 100%;
    height: 220px;
}

.current-canvas-container {
    display: block;
    text-align: left;
    height: 220px;
    width: 798px;
    max-width: 100%;
    padding: 0;
    border: none;
    margin-top: 80px !important;
    transform-origin: center;
    animation: loading 21.3s linear infinite;
}


/* ============================================================
   6. TYPOGRAPHY / HEADINGS  (legacy names, theme-aware colors)
   ============================================================ */
h4.introduction {
    color: var(--text-muted);
}

.lightbigheader {
    font-family: var(--font-ui);
    font-weight: 700;
    color: var(--text-strong);
    font-size: 1.9em;
    letter-spacing: -1px;
    margin-bottom: 5px;
    padding-top: 6px;
    line-height: 1.2;
    padding-bottom: 6px;
    text-align: center;
}

.lightbigheader2 {
    font-family: var(--font-ui);
    font-weight: 700;
    color: var(--text-strong);
    text-transform: lowercase;
    font-size: 1.8em;
    margin-bottom: 25px;
    line-height: 55px;
    border-bottom: solid 3px var(--border-strong);
    padding-bottom: 13px;
    letter-spacing: -2px;
}

span.pageheader {
    display: block;
    font-weight: 300;
    color: var(--text-muted);
    font-size: 2.5em;
    margin-top: 20px;
}

span.pageheader2 {
    display: block;
    font-weight: 400;
    color: var(--text-muted);
    border-bottom: solid 3px var(--border-strong);
    font-size: 2.2em;
    margin-top: 45px;
    text-align: center;
}

/* Point headings inside guides */
span.pageheader3 {
    display: block;
    font-weight: 700;
    color: var(--brand-blue);
    border-bottom: dotted 2px var(--border-strong);
    font-size: 1.3em;
    margin-top: 40px;
    margin-bottom: -10px;
    scroll-margin-top: 110px; /* deep links from search clear the topbar */
}

.subjectminiheader {
    background-color: var(--brand-gold);
    color: #17130f;
    border-radius: 5px;
    font-size: 0.5em;
    font-weight: 500;
    padding: 5px;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    margin-top: 30px;
    margin-bottom: -7px;
    display: inline-block;
    opacity: 0.85;
}

.parallaxsubtitle {
    font-size: 0.91em;
    margin-top: 5px;
}

/* Paragraph above each code block in the guides */
span.explanationabovecodeblock {
    display: block;
    font-size: 1.02em;
    color: var(--text-body);
    font-weight: 400;
    margin-top: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 1.5em;
    max-width: 760px;
}

/* Bold emphasis inside guide descriptions (JSON uses <b>) */
.explanationabovecodeblock b {
    font-weight: 700;
    color: var(--text-strong);
}

span.colorboxheader {
    font-weight: 300;
    font-size: 1.3em;
    text-transform: uppercase;
    display: block;
    margin-top: 30px;
    margin-bottom: 10px;
    color: var(--text-muted);
}

span.technologiesused {
    border-top: dotted 2px rgba(20, 117, 228, 0.19);
    display: block;
    font-size: 0.8em;
    padding: 3px 7px;
    font-family: var(--font-code);
    text-transform: uppercase;
    margin-top: 30px;
    padding-bottom: 15px;
    padding-top: 15px;
    color: var(--text-muted);
}


/* ============================================================
   7. CODE BLOCKS (all rendered by acho-core.js with Prism)
   ============================================================ */
/* Tiny uppercase language tag printed above EVERY code block by
   acho-core.js - Reddit Sans, wide letter-spacing, very transparent,
   so anyone landing on a random page always knows the language. */
.code-lang-label {
    display: block;
    font-family: var(--font-ui);
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--text-muted);
    opacity: 0.55;
    margin: 14px -9px -14px 0;
    user-select: none;
}

pre {
    margin-bottom: 26px;
    background: var(--code-bg);
    border-radius: 8px;
    overflow-x: auto;
    transition: background-color 0.35s ease;
}

pre > code {
    display: block;
    font-family: var(--font-code) !important;
    border-left: solid 9px var(--code-edge);
    border-radius: 10px;
    font-size: 0.84em !important;
    line-height: 1.6;
    padding: 16px 16px;
    transition: border-color 0.35s ease;
}

/* One guide point = title + description + code blocks */
.cheatsheet-point {
    margin-bottom: 30px;
}

/* Loading / error notices inside #cheatsheet-contents */
.guide-state {
    padding: 24px;
    font-size: 1rem;
    color: var(--text-muted);
    background: var(--bg-inset);
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    text-align: center;
}

/* Guide loading crest - the animated acho mark (loading_logo_achocodes.svg)
   shown by guide.php while acho-core.js downloads the guide JSON. A 300px
   square, horizontally centered across the guide column. The light
   gradient wave is built into the SVG itself, so it animates here
   regardless of theme. Kept visible on both light and dark themes by the
   gold base color inside the SVG. */
.guide-loading {
    display: flex;
    justify-content: center;
    padding: 36px 0 48px;
}

.guide-loading-crest {
    display: block;
    width: 300px;
    height: 300px;
    max-width: 100%;
}

/* Gold flash when a deep link (#q-N) lands on a point */
.point-flash {
    animation: pointflash 2.6s ease;
    border-radius: 10px;
}

@keyframes pointflash {
    0% {
        background-color: rgba(255, 210, 19, 0.55);
    }
    70% {
        background-color: rgba(255, 210, 19, 0.18);
    }
    100% {
        background-color: transparent;
    }
}


/* ============================================================
   8. HOME PAGE - guides & cheat sheets grid
   ============================================================ */
.guides-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 6px 36px;
}

.guides-intro {
    font-size: 1.05rem;
    color: var(--text-muted);
    text-align: center;
    margin: 4px auto 30px;
    max-width: 660px;
    line-height: 1.65;
}

.guides-section {
    margin-bottom: 34px;
}

/* "More in this series" block at the end of a guide page */
.related-guides {
    margin-top: 54px;
}

.guides-section-title {
    font-family: var(--font-ui);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-strong);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--brand-gold);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Per-category guide count chip on the right of a section title */
.guides-count {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-inset);
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    padding: 3px 10px;
}

.guides-section-title i {
    color: var(--brand-gold);
    font-size: 1.1rem;
}

.guides-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}

.guide-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease,
    border-color 0.2s ease, background-color 0.35s ease;
}

.guide-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
    border-color: var(--brand-gold);
}

.guide-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.guide-card-title {
    font-family: var(--font-ui);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-strong);
    line-height: 1.3;
}

.guide-card-desc {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.45;
}

.guide-card-arrow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    margin-top: 4px;
    opacity: 0.6;
    transition: color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

/* Inline SVG arrow (replaces the FontAwesome glyph) - follows currentColor */
.guide-card-arrow svg {
    display: block;
    width: 100%;
    height: 100%;
}

.guide-card:hover .guide-card-arrow {
    color: var(--brand-gold);
    opacity: 1;
    transform: translateX(3px);
}


/* ============================================================
   9. GUIDE-CARD SVG ICONS (.gicon-*)
   ============================================================
   Each icon is a URL-encoded inline SVG data URI - crisp at any
   size, zero network requests, works offline. The tile background
   color follows the active theme via --icon-bg.
   The React, Java, Spring Boot and HTML5 icons are the REAL logos
   (encoded from the uploaded SVG files) so every guide about those
   languages or frameworks carries its true brand mark. */
.gicon {
    display: inline-block;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background-color: var(--icon-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60% 60%;
    transition: background-color 0.35s ease;
}

/* Small inline variant used inside section headings */
.gicon-inline {
    width: 1.35em;
    height: 1.35em;
    border-radius: 6px;
    background-size: 68% 68%;
    vertical-align: -0.3em;
}

/* JavaScript - yellow square, black "JS" */
.gicon-js {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='10' fill='%23F7DF1E'/%3E%3Ctext x='32' y='45' font-family='Arial, sans-serif' font-size='28' font-weight='bold' text-anchor='middle' fill='%23111'%3EJS%3C/text%3E%3C/svg%3E");
}

/* React - the real React logo (uploaded SVG): the high-contrast cyan atom orbits and core on transparent, crisp on both themes */
.gicon-react {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 3618.6 3618.6' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle fill='%2300d8ff' cx='1806.5' cy='1807.1' r='302.6'/%3E%3Cpath fill='none' stroke='%2300d8ff' stroke-width='144.7456' stroke-miterlimit='10' d='M1806.5 1191.9c406.2 0 783.6 58.3 1068.1 156.2 342.8 118 553.6 296.9 553.6 458.9 0 168.8-223.4 358.9-591.5 480.8-278.3 92.2-644.6 140.4-1030.2 140.4-395.4 0-769.7-45.2-1051.2-141.4-356.1-121.7-570.6-314.2-570.6-479.8 0-160.7 201.3-338.2 539.3-456 285.6-99.5 672.3-159.1 1082.5-159.1z'/%3E%3Cpath class='st2' d='M1271 1501.3c202.9-351.9 442-649.7 669-847.2 273.5-238 533.8-331.2 674.1-250.3 146.2 84.3 199.3 372.8 121 752.7-59.2 287.2-200.4 628.5-393.1 962.6-197.5 342.5-423.7 644.2-647.6 840-283.3 247.7-557.3 337.3-700.7 254.6-139.2-80.3-192.4-343.3-125.7-695 56.4-297.4 198-662.1 403-1017.4z'/%3E%3Cpath class='st2' d='M1271.5 2119.8c-203.5-351.6-342.1-707.4-399.9-1002.7-69.6-355.8-20.4-627.9 119.8-709 146.1-84.6 422.5 13.5 712.5 271 219.3 194.7 444.4 487.5 637.6 821.3 198.1 342.2 346.6 688.8 404.3 980.5 73.1 369.2 13.9 651.3-129.4 734.2-139.1 80.5-393.5-4.7-664.9-238.2-229.2-197.3-474.5-502.1-680-857.1z'/%3E%3C/svg%3E");
}

/* TypeScript - blue square, white "TS" */
.gicon-ts {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='10' fill='%233178C6'/%3E%3Ctext x='32' y='45' font-family='Arial, sans-serif' font-size='26' font-weight='bold' text-anchor='middle' fill='%23fff'%3ETS%3C/text%3E%3C/svg%3E");
}

/* Java - the real Java logo (uploaded SVG): blue steam cup and red wordmark, white plate dropped so the themed tile shows through */
.gicon-java {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 192.756 192.756' xmlns='http://www.w3.org/2000/svg'%3E %3Cg fill-rule='evenodd' clip-rule='evenodd'%3E %3Cpath d='M80.372 101.729s-4.604 2.679 3.28 3.584c9.554 1.091 14.434.934 24.959-1.057 0 0 2.771 1.735 6.639 3.236-23.601 10.113-53.413-.585-34.878-5.763zM77.487 88.532s-5.165 3.823 2.726 4.639c10.206 1.054 18.262 1.14 32.211-1.544 0 0 1.926 1.955 4.957 3.023-28.531 8.345-60.307.657-39.894-6.118z' fill='%233174b9'/%3E %3Cpath d='M101.797 66.143c5.818 6.697-1.525 12.72-1.525 12.72s14.766-7.621 7.984-17.168c-6.332-8.899-11.189-13.32 15.102-28.566-.001-.001-41.27 10.303-21.561 33.014z' fill='%23ca3132'/%3E %3Cpath d='M133.01 111.491s3.408 2.81-3.754 4.983c-13.619 4.125-56.694 5.369-68.659.164-4.298-1.872 3.766-4.467 6.303-5.015 2.646-.572 4.156-.468 4.156-.468-4.783-3.368-30.916 6.615-13.272 9.479 48.112 7.801 87.704-3.512 75.226-9.143zM82.587 74.857s-21.908 5.205-7.757 7.097c5.977.799 17.883.615 28.982-.316 9.068-.761 18.17-2.389 18.17-2.389s-3.195 1.371-5.51 2.949c-22.251 5.853-65.229 3.127-52.855-2.856 10.462-5.061 18.97-4.485 18.97-4.485zM121.891 96.824c22.617-11.75 12.16-23.044 4.859-21.522-1.785.373-2.586.695-2.586.695s.666-1.042 1.932-1.49c14.441-5.075 25.545 14.972-4.656 22.911-.001 0 .347-.314.451-.594z' fill='%233174b9'/%3E %3Cpath d='M108.256 8.504s12.523 12.531-11.881 31.794c-19.571 15.458-4.462 24.269-.006 34.34-11.426-10.307-19.807-19.382-14.185-27.826 8.254-12.395 31.125-18.406 26.072-38.308z' fill='%23ca3132'/%3E %3Cpath d='M84.812 128.674c21.706 1.388 55.045-.771 55.836-11.044 0 0-1.518 3.894-17.941 6.983-18.529 3.488-41.386 3.082-54.938.845 0 0 2.777 2.298 17.043 3.216z' fill='%233174b9'/%3E %3Cpath d='M139.645 147.096h-.66v-.37h1.781v.37h-.66v1.848h-.461v-1.848zm3.554.092h-.008l-.656 1.755h-.301l-.652-1.755h-.008v1.755h-.438v-2.218h.643l.604 1.569.604-1.569h.637v2.218h-.424v-1.755h-.001zM81.255 167.921c-2.047 1.774-4.211 2.772-6.154 2.772-2.768 0-4.27-1.663-4.27-4.324 0-2.881 1.608-4.989 8.044-4.989h2.379v6.541h.001zm5.65 6.374v-19.732c0-5.043-2.876-8.371-9.809-8.371-4.045 0-7.591.999-10.474 2.272l.83 3.495c2.271-.834 5.207-1.607 8.089-1.607 3.994 0 5.713 1.607 5.713 4.934v2.495h-1.996c-9.702 0-14.08 3.764-14.08 9.423 0 4.876 2.885 7.648 8.316 7.648 3.491 0 6.099-1.441 8.534-3.55l.443 2.993h4.434zM105.762 174.295h-7.045l-8.483-27.601h6.154l5.265 16.961 1.172 5.096c2.656-7.371 4.541-14.854 5.484-22.057h5.984c-1.602 9.088-4.488 19.066-8.531 27.601zM132.799 167.921c-2.053 1.774-4.217 2.772-6.156 2.772-2.768 0-4.268-1.663-4.268-4.324 0-2.881 1.609-4.989 8.041-4.989h2.383v6.541zm5.652 6.374v-19.732c0-5.043-2.885-8.371-9.811-8.371-4.049 0-7.594.999-10.477 2.272l.83 3.495c2.271-.834 5.213-1.607 8.096-1.607 3.988 0 5.709 1.607 5.709 4.934v2.495h-1.996c-9.703 0-14.078 3.764-14.078 9.423 0 4.876 2.879 7.648 8.311 7.648 3.494 0 6.098-1.441 8.539-3.55l.445 2.993h4.432zM58.983 178.985c-1.61 2.353-4.214 4.216-7.061 5.267l-2.79-3.286c2.169-1.113 4.027-2.91 4.892-4.582.745-1.49 1.056-3.406 1.056-7.992v-31.515h6.005v31.08c0 6.134-.49 8.613-2.102 11.028z' fill='%23ca3132'/%3E %3C/g%3E %3C/svg%3E");
}

/* Spring Boot - the real Spring leaf mark (uploaded SVG), recoloured from black to Spring green #6DB33F so it stays visible on the dark navy tile */
.gicon-spring {
    background-image: url("data:image/svg+xml,%3Csvg fill='%236DB33F' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.205 16.392c-2.469 3.289-7.741 2.179-11.122 2.338 0 0-.599.034-1.201.133 0 0 .228-.097.519-.198 2.374-.821 3.496-.986 4.939-1.727 2.71-1.388 5.408-4.413 5.957-7.555-1.032 3.022-4.17 5.623-7.027 6.679-1.955.722-5.492 1.424-5.493 1.424a5.28 5.28 0 0 1-.143-.076c-2.405-1.17-2.475-6.38 1.894-8.059 1.916-.736 3.747-.332 5.818-.825 2.208-.525 4.766-2.18 5.805-4.344 1.165 3.458 2.565 8.866.054 12.21zm.042-13.28a9.212 9.212 0 0 1-1.065 1.89 9.982 9.982 0 0 0-7.167-3.031C6.492 1.971 2 6.463 2 11.985a9.983 9.983 0 0 0 3.205 7.334l.22.194a.856.856 0 1 1 .001.001l.149.132A9.96 9.96 0 0 0 12.015 22c5.278 0 9.613-4.108 9.984-9.292.274-2.539-.476-5.763-1.752-9.596'/%3E%3C/svg%3E");
}

/* Frontend - </> brackets */
.gicon-frontend {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23E44D26' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 20 8 32l11 12'/%3E%3Cpath d='M45 20l11 12-11 12'/%3E%3Cpath d='M36 15 28 49'/%3E%3C/g%3E%3C/svg%3E");
}

/* HTML5 - the real HTML5 logo (uploaded SVG), recoloured from black to HTML5 orange #E44D26 so it stays visible on the dark navy tile */
.gicon-html {
    background-image: url("data:image/svg+xml,%3Csvg fill='%23E44D26' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E %3Cg%3E %3Cpath d='M108.669,0.501h23.032v22.756h21.069V0.501h23.034V69.41h-23.032V46.334h-21.069V69.41h-23.032V0.501 H108.669z M206.091,23.353h-20.275V0.501h63.594v22.852h-20.285V69.41h-23.032V23.353H206.091z M259.502,0.501h24.02l14.771,24.213 l14.759-24.213h24.023V69.41h-22.938V35.256l-15.845,24.5h-0.395l-15.856-24.5V69.41h-22.539V0.501z M348.54,0.501h23.038v46.133 h32.391V69.41H348.54V0.501z M74.987,100.926l32.946,369.533l147.844,41.04L404.031,470.4l32.981-369.475H74.987z M368.289,188.62 l-2.063,22.977l-0.906,10.188h-0.149H256h-0.158h-63.956l4.142,46.407h59.814H256h92.98h12.214l-1.106,12.172l-10.65,119.32 l-0.682,7.652L256,433.045v0.008l-0.208,0.059l-92.839-25.774l-6.351-71.161h20.97h24.527l3.227,36.146l50.474,13.632l0.042-0.013 v-0.004l50.551-13.64l5.257-58.781H256h-0.158H154.578L143.439,188.62l-1.085-12.157h113.488H256h113.374L368.289,188.62z'/%3E %3C/g%3E %3C/svg%3E");
}

/* Interview - gold circle with a question mark */
.gicon-interview {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='27' fill='%23FFD213'/%3E%3Ctext x='32' y='43' font-family='Arial, sans-serif' font-size='28' font-weight='bold' text-anchor='middle' fill='%2317130f' %3E?%3C/text%3E%3C/svg%3E");
    background-size: 100% 100%;
}

/* Cheat sheet - gold document with lines */
.gicon-cheat {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M15 4h23l12 12v44a3 3 0 0 1-3 3H15a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3z' fill='%23FFD213'/%3E%3Cpath d='M38 4v12h12z' fill='%23d9b400'/%3E%3Cg stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M19 29h26'/%3E%3Cpath d='M19 39h26'/%3E%3Cpath d='M19 49h16'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 100% 100%;
}

/* Book guide - open book */
.gicon-book {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 14c-6-5-15-6-25-4v40c10-2 19-1 25 4 6-5 15-6 25-4V10c-10-2-19-1-25 4z' fill='%23b0742a'/%3E%3Cpath d='M32 14v40' stroke='%238a5a1e' stroke-width='3'/%3E%3C/svg%3E");
    background-size: 100% 100%;
}

/* Fullstack - layered stack */
.gicon-fullstack {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23006ddc'%3E%3Crect x='10' y='42' width='44' height='10' rx='3'/%3E%3Crect x='14' y='29' width='36' height='10' rx='3' opacity='.8'/%3E%3Crect x='18' y='16' width='28' height='10' rx='3' opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 100% 100%;
}

/* Software engineer - person with a golden tie */
.gicon-engineer {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='19' r='11' fill='%23006ddc'/%3E%3Cpath d='M11 58c2-12 11-19 21-19s19 7 21 19z' fill='%23006ddc'/%3E%3Cpath d='M32 39l4 7-4 13-4-13z' fill='%23FFD213'/%3E%3C/svg%3E");
    background-size: 100% 100%;
}

/* Java Objects & Collections - golden boxes */
.gicon-objects {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23FFD213'%3E%3Crect x='10' y='36' width='20' height='19' rx='3'/%3E%3Crect x='34' y='36' width='20' height='19' rx='3' opacity='.75'/%3E%3Crect x='22' y='11' width='20' height='19' rx='3' fill='%23e7be00'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 100% 100%;
}


/* ============================================================
   10. CONTENT BLOCKS (legacy components, theme-aware)
   ============================================================ */
.mySkillsSummary {
    padding: 22px;
    padding-top: 10px;
    padding-left: 0;
    font-size: 1.2em;
    font-weight: 400;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    margin-bottom: 20px;
    margin-top: 10px;
}

.favoritetechnologies {
    display: flex;
    margin: 0 auto;
    padding: 17px;
    border: dashed 1px var(--border-strong);
    flex-direction: row;
    align-items: center;
    margin-top: 35px;
    justify-content: space-around;
}

.favoritetechnologies > i {
    color: var(--brand-blue);
}

.blueicon {
    color: var(--brand-blue);
    opacity: 0.85;
}

.blueicon:hover {
    opacity: 1;
}

.panelOne {
    border: solid 3px var(--middark-color);
    padding: 15px;
}

.panelbox {
    padding: 20px;
    border-radius: 15px;
    margin-top: 10px;
    margin-bottom: 35px;
    box-shadow: 0 6px 8px rgba(85, 102, 119, 0.03),
    0 1px 1px rgba(85, 102, 119, 0.4), 0 8px 12px rgba(58, 193, 203, 0.1);
    border: solid 1px var(--border-soft);
    background-color: var(--bg-panel);
    transition: background-color 0.35s ease, border-color 0.35s ease;
}

.panelboxheader {
    padding: 20px;
}

.panelboxcontent {
    padding: 20px;
    font-size: 1.3em;
}

.statusupdatebox {
    border: solid 3px #78eaff;
    border-radius: 7px;
    padding: 40px;
    background-color: var(--bg-panel);
    font-weight: 400;
    color: var(--text-body);
}

.lastupdatednote {
    background: rgba(120, 235, 255, 0.45);
    color: var(--text-body);
    padding: 5px;
    font-size: 0.9em;
    border-radius: 7px;
    display: block;
}


/* ============================================================
   11. OPACITY UTILITIES / FOOTER / BUTTONS / FORMS / PROJECTS
   ============================================================ */
.lighter {
    opacity: 0.6;
}

.lightest {
    opacity: 0.35;
}

.footerbox {
    margin-top: 40px;
    background: none;
    border-top: solid 2px var(--border-strong);
    border-bottom: solid 13px var(--text-muted);
    font-size: 0.8em;
    font-weight: 400;
    padding: 30px;
    padding-left: 0;
    text-align: left;
    color: var(--text-muted);
}

.footersocialbox {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: dotted 1px var(--border-strong);
    border-radius: 7px;
    width: 100px;
    height: 100px;
    justify-content: center;
    align-content: center;
}

.footersocialbox > a:hover {
    color: var(--brand-blue);
}

.footer-nav {
    line-height: 2.9em !important;
    margin-top: 40px;
}

.footer-nav > a {
    color: var(--text-body);
    border: solid 1px transparent;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 30px;
    background-color: var(--gray10);
    transition: background-color 0.35s ease, color 0.2s ease;
}

.footer-nav > a:hover {
    color: var(--brand-blue);
    border-color: var(--brand-gold);
    background-color: var(--gray8);
}

.footerrow {
    text-align: left;
}

.socialboxcontainer {
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    justify-content: center;
}

/* ------------------------------------------------------------
   11b. SITE FOOTER (universal_footer.php) - 3 visual columns:
   the LARGER brand/description column + guide links in 2 columns
   ------------------------------------------------------------ */
.site-footer {
    margin-top: 56px;
    padding-top: 34px;
    border-top: 2px solid var(--border-strong);
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: border-color 0.35s ease;
}

/* Three visual columns in total: the larger description/brand column on
   the left, then the guide links split into exactly TWO columns. */
.footer-grid {
    display: grid;
    grid-template-columns: minmax(320px, 7fr) minmax(300px, 5fr);
    gap: 28px 48px;
    align-items: start;
}

/* Left column: logo + SEO summary of the site */
.footer-logo {
    display: inline-block;
    margin: 0 0 16px;
    text-decoration: none;
}

.footer-logo .topbar-logo {
    width: 230px;
}

.footer-summary {
    font-size: 0.88rem;
    line-height: 1.7;
    max-width: 560px;
    margin: 0 0 16px;
}

.footer-summary b {
    font-weight: 700;
    color: var(--text-body);
}

.footer-lastupdated {
    font-size: 0.76rem;
    margin: 0;
    opacity: 0.85;
}

/* Right column: every guide, grouped by category - exactly TWO columns,
   never a wide auto-fit fan-out. */
.footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    gap: 22px 26px;
}

.footer-cat h3 {
    font-family: var(--font-ui);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-strong);
    margin: 0 0 10px;
    padding-bottom: 7px;
    border-bottom: 2px solid var(--brand-gold);
}

.footer-cat ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-cat li + li {
    margin-top: 7px;
}

.footer-cat a {
    display: inline-block;
    color: var(--text-body);
    text-decoration: none;
    font-size: 0.85rem;
    line-height: 1.45;
    transition: color 0.15s ease, transform 0.15s ease;
}

.footer-cat a:hover {
    color: var(--brand-blue);
    transform: translateX(2px);
}

/* Bottom bar: copyright + one SEO keyword line */
.footer-bottom {
    margin-top: 30px;
    padding: 16px 0 28px;
    border-top: 1px solid var(--border-soft);
    font-size: 0.78rem;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom a {
    color: var(--brand-blue);
    text-decoration: none;
}

.footer-bottom a:hover {
    text-decoration: underline;
}

.button1 {
    min-height: 40px;
    min-width: 130px;
    font-size: 0.9em;
    margin-bottom: 10px;
    font-family: var(--font-ui) !important;
    color: white;
    background-color: #1274DE;
    padding: 11px;
    border-radius: 7px;
    text-decoration: none;
    transition: color 0.6s ease-in-out, background-color 0.6s ease-in-out,
    border-color 0.5s ease-in-out, box-shadow 0.15s ease-in-out;
}

.button1:hover {
    background-color: var(--brand-blue);
    padding-right: 20px;
}

.button-download {
    display: flex;
    flex-direction: column;
    min-height: 40px;
    min-width: 130px;
    max-width: 200px;
    font-size: 0.9em;
    margin-bottom: 10px;
    font-family: var(--font-ui) !important;
    color: white;
    background-color: #1274DE;
    padding: 11px;
    border-radius: 7px;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}

.button-download:hover {
    background-color: var(--brand-blue);
    padding-left: 16px;
    opacity: 0.9;
    max-width: 210px;
}

.sendmessagebutton {
    display: block;
    color: white;
    padding: 20px;
    border: none;
    border-radius: 7px;
    background-color: var(--brand-blue);
    margin-top: 10px;
    font-size: 1em;
    cursor: pointer;
}

.sendmessagebutton:hover {
    background: url(img/background_yellowstripes1.png);
}

label {
    display: block;
    margin-top: 20px;
    font-weight: 500;
    color: var(--text-muted);
    font-size: 0.8em;
}

.contactformfield {
    font-family: var(--font-ui);
    display: block;
    border-radius: 30px;
    border: solid 1px var(--brand-gold);
    height: 50px;
    font-size: 0.9em;
    padding: 20px 10px;
    padding-left: 20px;
    width: 100%;
    max-width: 500px;
    background: var(--bg-panel);
    color: var(--text-strong);
}

.contactformtextarea {
    display: block;
    border-radius: 15px;
    border: solid 1px var(--brand-gold);
    border-bottom: solid 4px var(--brand-gold);
    font-size: 0.9em;
    padding: 20px;
    width: 100%;
    max-width: 500px;
    height: 300px;
    font-family: var(--font-ui);
    background: var(--bg-panel);
    color: var(--text-strong);
}

.invisible {
    opacity: 0.01;
    display: block;
    zoom: 0.7;
    font-weight: 500;
    line-height: 2em;
}

.invisible:hover,
.invisible:active {
    opacity: 1;
}

.invisible > a {
    color: var(--text-body);
    border: solid 1px transparent;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 30px;
    background-color: var(--gray10);
}

.projects-subheader {
    display: block;
    text-align: center;
    padding-bottom: 20px;
    margin-top: -10px;
}

a.projectname,
span.projectname {
    font-weight: 700;
    border: none;
    display: block;
    text-decoration: none;
    color: var(--text-strong);
    margin-top: 10px !important;
    transition: 0.2s;
    font-size: 1.6em;
    margin-bottom: 0;
    letter-spacing: -2px;
}

.projectname2 {
    font-weight: 700;
    border: none;
    display: block;
    text-decoration: none;
    color: var(--brand-blue);
    margin-top: 10px !important;
    transition: 0.2s;
    font-size: 1.6em;
    margin-bottom: 0;
}

a.projectnamelink {
    font-weight: 400;
    border: solid 1px var(--border-soft);
    border-radius: 7px;
    display: inline-block;
    text-decoration: none;
    color: var(--brand-blue);
    margin-top: 3px !important;
    transition: 0.2s;
    font-size: 0.8em;
    margin-bottom: 0;
    padding: 6px;
}

a.projectnamelink:hover {
    font-weight: 700;
    border-color: var(--brand-gold);
    padding-left: 10px;
}

.projectdescription {
    font-weight: 400;
    font-size: 0.8em;
    padding: 0;
    margin: 0;
    margin-bottom: 14px;
    border-bottom: none;
}

img.artpicthumb {
    width: 160px;
    height: 160px;
    padding: 3px;
    border: 2px solid var(--border-soft);
    margin: 7px;
    transition: 0.13s;
}

img.artpicthumb:hover {
    border: 2px solid var(--text-muted);
    opacity: 0.85;
}


/* ============================================================
   12. PARALLAX / MENUS / TOOLTIPS / PLAY PANEL (legacy)
   ============================================================ */
.parallax {
    border-top: solid 4px var(--border-strong);
    padding: 40px;
    border-bottom: solid 4px var(--border-strong);
    font-size: 1.4em;
    font-weight: 400;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 20px;
    margin-top: 25px;
    max-width: 100%;
}

.homepageparallax {
    color: var(--text-strong);
}

.rubyparallax {
    border-top: solid 4px var(--border-strong);
    border-bottom: solid 4px var(--border-strong);
    background-image: url("img/ruby_rails_background_cheetsheat.png");
    color: rgba(255, 255, 255, 0.813);
}

.javascriptmenu > li {
    transition: 0.23s;
    cursor: pointer;
    border-bottom: solid 2px transparent;
    list-style: none;
}

.javascriptmenu > li:hover {
    transition: 0.23s;
    font-weight: 600;
    color: var(--brand-blue);
    border-bottom: solid 2px var(--brand-gold);
    cursor: pointer;
}

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 140px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -75px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.playpanel {
    margin: 0 auto;
    height: 20px;
    display: flex;
    text-align: center;
    margin-bottom: -25px;
    margin-top: 14px;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    opacity: 0.2;
}

.playpanelbox {
    height: 20px;
    width: 20px;
    padding-left: 35px;
    padding-right: 35px;
}

.playicon {
    width: 20px;
    height: 20px;
    max-width: 20px;
    min-height: 20px;
    fill: #2781ff !important;
    stroke: #2781ff !important;
}


/* ============================================================
   13. DARK THEME - Prism code highlighting overrides
   ============================================================
   prism.css sets base code text to BLACK (#000) - invisible on a dark
   theme - and prism-coy decorates blocks with rotated "paper" shadows.
   So in dark mode, FIRST the base color is forcibly re-pointed to a
   bright ice blue and the paper shadows removed, THEN every token gets
   a bright color from a palette where nothing is darker than the base
   text. (prism.css stays untouched for light mode.) */
html[data-theme="dark"] code[class*="language-"],
html[data-theme="dark"] pre[class*="language-"],
html[data-theme="dark"] pre,
html[data-theme="dark"] pre > code {
    color: #e4edfa; /* base code text - never black */
    background: transparent;
    background-image: none !important;
    text-shadow: none;
}

/* Kill prism-coy's rotated paper shadows in dark mode. */
html[data-theme="dark"] pre[class*="language-"]:before,
html[data-theme="dark"] pre[class*="language-"]:after {
    display: none;
}

html[data-theme="dark"] pre {
    background: var(--code-bg);
    border: 1px solid var(--border-soft);
}

html[data-theme="dark"] pre > code {
    border-left-color: var(--code-edge);
    box-shadow: -1px 0 0 0 var(--code-edge); /* replaces coy's light outline */
    background: transparent;
}

/* Inline code snippets stay readable too */
html[data-theme="dark"] :not(pre) > code[class*="language-"] {
    color: #86c5ff;
    background: var(--bg-inset);
}

/* ---- bright token palette (cool, tuned for the navy theme) ---- */
html[data-theme="dark"] .token.comment,
html[data-theme="dark"] .token.prolog,
html[data-theme="dark"] .token.doctype,
html[data-theme="dark"] .token.cdata {
    color: #8fa5c4;
}

html[data-theme="dark"] .token.string,
html[data-theme="dark"] .token.char,
html[data-theme="dark"] .token.attr-value,
html[data-theme="dark"] .token.regex,
html[data-theme="dark"] .token.inserted {
    color: #a8e0a0;
}

html[data-theme="dark"] .token.keyword,
html[data-theme="dark"] .token.boolean,
html[data-theme="dark"] .token.important,
html[data-theme="dark"] .token.atrule {
    color: #9ec7f5;
}

html[data-theme="dark"] .token.function,
html[data-theme="dark"] .token.function-name,
html[data-theme="dark"] .token.class-name {
    color: #ffd97a;
}

html[data-theme="dark"] .token.number,
html[data-theme="dark"] .token.constant,
html[data-theme="dark"] .token.symbol {
    color: #ffab76;
}

html[data-theme="dark"] .token.operator,
html[data-theme="dark"] .token.entity,
html[data-theme="dark"] .token.url,
html[data-theme="dark"] .token.variable {
    color: #ffc9a3;
    background: transparent;
}

html[data-theme="dark"] .token.punctuation,
html[data-theme="dark"] .token.property {
    color: #c3d3e8;
}

html[data-theme="dark"] .token.tag,
html[data-theme="dark"] .token.selector,
html[data-theme="dark"] .token.deleted {
    color: #ff8a7a;
}

html[data-theme="dark"] .token.attr-name,
html[data-theme="dark"] .token.builtin {
    color: #89e0c4;
}

html[data-theme="dark"] .language-css .token.string,
html[data-theme="dark"] .style .token.string {
    color: #a8e0a0;
    background: transparent;
}


/* ============================================================
   14. RESPONSIVE BREAKPOINTS
   ============================================================
   Container ladder (site content max width):
     <= 480px  : full-width single column, larger tap targets
     <= 660px  : 440px
     <= 900px  : 640px
     <= 1150px : 820px   (also the base 950px look >= 1151px)
     <= 1450px : 1000px
     > 1450px : 1200px
   Hero canvas sizes mirror the resize logic in the navigation script. */

/* ---------- Phones (<= 480px) ---------- */
@media all and (max-width: 480px) {
    body {
        width: 100%;
        max-width: 100%;
        font-size: 17px; /* keep long guide text legible */
    }

    .outermostcontainer {
        width: 100%;
        max-width: 100%;
        margin-top: 0;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .stripedyellow {
        border-radius: 0;
    }

    /* Top bar: brand + switch on row 1, search on row 2 */
    .topbar {
        top: 6px;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 12px;
    }

    .searchbox {
        order: 3;
        flex-basis: 100%;
        max-width: none;
    }

    .topbar-logo {
        width: 165px; /* width-driven so the logo never squashes */
        height: auto;
    }

    .theme-toggle {
        width: 52px;
        height: 30px;
    }

    .tt-knob {
        width: 22px;
        height: 22px;
    }

    html[data-theme="dark"] .tt-knob {
        transform: translateX(22px);
    }

    /* Hero canvas: full width, short */
    .canvas-container {
        margin-top: 10px;
    }

    #animationCanvas {
        width: 100%;
        height: 60px;
    }

    .headerlogo {
        width: 170px;
        margin: 18px auto 14px;
    }

    .navbar {
        gap: 2px 6px;
        margin-top: 14px;
    }

    .nav-first-group > a,
    .nav-second-group > a {
        font-size: 0.82em;
        padding: 6px 4px 6px 0;
        margin-right: 2px;
    }

    .nav-first-group > a:hover,
    .nav-second-group > a:hover {
        padding-right: 6px;
        margin-right: 4px;
    }

    /* Guide grid: one comfortable column */
    .guides-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .guide-card {
        padding: 16px;
        gap: 12px;
    }

    .gicon {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .guides-section-title {
        font-size: 1.15rem;
    }

    .lightbigheader {
        font-size: 1.7em;
        line-height: 1.25;
    }

    pre {
        font-size: 0.8rem;
    }

    pre > code {
        border-left-width: 6px;
    }

    .panelbox {
        padding: 0;
        border-radius: 0;
        margin-top: 20px;
        font-size: 23px;
        max-width: 96vw;
    }

    .search-panel {
        max-height: 55vh;
    }

    .footerbox {
        padding: 20px 10px;
        word-break: break-word;
    }

    /* Footer: single column on phones, guide links stay in two columns */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .footer-links {
        grid-template-columns: repeat(2, minmax(130px, 1fr));
        gap: 18px 18px;
    }

    .footer-logo .topbar-logo {
        width: 185px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* ---------- Small tablets (<= 660px) ---------- */
@media all and (max-width: 660px) {
    .outermostcontainer {
        width: 440px;
    }

    /* The logo + toggle no longer fit beside the search box - wrap the
       topbar so search drops to its own full-width row (like <=480px). */
    .topbar {
        flex-wrap: wrap;
    }

    .searchbox {
        order: 3;
        flex-basis: 100%;
        max-width: none;
    }

    #animationCanvas {
        width: 440px;
        height: 80px;
    }
}

/* ---------- Tablets (<= 900px) ---------- */
@media all and (max-width: 900px) {
    .outermostcontainer {
        width: 640px;
    }

    #animationCanvas {
        width: 600px;
        height: 100px;
    }

    .searchbox {
        flex: 0 1 320px;
        max-width: 320px;
    }
}

/* ---------- Small laptops (<= 1150px) ---------- */
@media all and (max-width: 1150px) {
    .outermostcontainer {
        width: 820px;
    }
}

/* ---------- Widescreen comfort (<= 1450px) ---------- */
@media all and (max-width: 1450px) {
    .outermostcontainer {
        width: 1200px;
    }

    #animationCanvas {
        width: 948px;
        height: 180px;
    }
}

/* ---------- Large displays (> 1450px) ---------- */
@media all and (min-width: 1451px) {
    .outermostcontainer {
        width: 1200px;
    }

    .guides-container {
        max-width: 1100px;
    }

    #animationCanvas {
        width: 1148px;
        height: 180px;
    }
}

/* ---------- 2K / 2.5K displays (>= 2000px) ---------- */
@media all and (min-width: 2000px) {
    body {
        font-size: 22px;
    }

    .outermostcontainer {
        width: 1400px;
    }

    .guides-container {
        max-width: 1240px;
    }

    .guides-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }

    #animationCanvas {
        width: 1348px;
        height: 200px;
    }
}

/* ---------- 4K displays (>= 2800px) ---------- */
@media all and (min-width: 2800px) {
    body {
        font-size: 24px;
    }

    .outermostcontainer {
        width: 1600px;
    }

    .guides-container {
        max-width: 1440px;
    }

    #animationCanvas {
        width: 1548px;
        height: 220px;
    }
}

/* Respect users who prefer no motion: kill the big animations */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .current-canvas-container {
        animation: none;
    }

    .point-flash {
        animation: none;
        background-color: rgba(255, 210, 19, 0.2);
    }

    .guide-card,
    .tt-knob,
    .search-result {
        transition: none;
    }
}