/* ============================================================
   style.css — Interactive Study Notes App
   ============================================================
   Styles for the same site main.js drives: paginated note pages,
   slide-out sidebar nav, hover/tap tooltips, MCQ practice sections,
   a periodic table widget, and various note-content layouts
   (tables, videos, side-by-side media, etc).

   Major sections, top to bottom: Reset & Base, Hamburger Sidebar
   Nav, Main Container, Index Page Cards, Notes Content Typography,
   Highlighted Terms, Tooltip Hover Definitions, Question Dropdowns,
   Inline Fractions, Notes Tables, Images, Side-by-Side Image & Text
   Layout, Video Containers, Copyright Banner, Scroll-to-Top Button,
   Responsive (main breakpoints), Tooltip Popup Modal, Pagination
   System, MCQ Load Button, Master Dropdown Arrows, Integrated
   Periodic Table, Dynamic Color Section Box, Two-Up Rectangle Grid,
   Smart Columns.

   Note: most responsive overrides live in the dedicated RESPONSIVE
   section below, but a handful of component-specific ones (side-by-
   side media, the two-up rectangle grid, smart columns) are kept
   next to the component they adjust instead — that's intentional,
   not an oversight, but worth knowing before you go looking for
   "every mobile rule" in one place.
   ============================================================ */

/* ==========================================
   RESET & BASE
   ========================================== */

/* Every element gets a predictable box model (padding/border counted
   inside width/height, not added on top) and starts from zero margin —
   the usual modern reset, so spacing everywhere else is deliberate
   rather than inherited from browser defaults. */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Dark-mode palette — every color in this file should reference one
       of these variables rather than a hard-coded value, so the whole
       site's theme can be changed from this one block. */
    --bg-page:        #1a1d23;
    --bg-container:   #21252e;
    --bg-card:        #272b35;
    --bg-header:      #1e2330;

    --accent-green:   #3dd68c;
    --accent-blue:    #5b9cf6;
    --accent-amber:   #f0a500;

    --border-main:    #3a3f4e;
    --border-accent:  #3dd68c;

    --text-primary:   #e8eaf0;
    --text-secondary: #a0a8bc;
    --text-heading:   #ffffff;
    --text-on-dark:   #e8eaf0;

    --h2-bg:          #1e2330;
    --h4-bg:          #2e3547;

    --tooltip-bg:     #1a1d23;
    --tooltip-border: #3dd68c;

    --dropdown-sum:   #2a2f3d;
    --dropdown-ans:   #242837;

    --nav-width:      280px;
    --nav-bg:         #181b22;
    --nav-border:     #2e3547;

    --shadow-soft:    0 4px 20px rgba(0,0,0,0.4);
    --shadow-glow:    0 0 16px rgba(61,214,140,0.15);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    line-height: 1.7;
    color: var(--text-primary);
    padding: 30px 16px;
    min-height: 100vh;
}

/* ── HAND-DRAWN BACKGROUND ──
   Previously body had `background-attachment: fixed`, which forces the
   browser to repaint the ENTIRE window on every scroll tick instead of
   just the newly-revealed strip — a long-documented cause of janky,
   low-framerate scrolling (worse the taller the page). Moving the same
   tiled image onto its own fixed, negative-z-index pseudo-element gets
   the "locked in place while scrolling" look via compositing instead,
   so it's smooth. No visual change, no HTML/JS change required. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: url('some_background.png'); /* Paths to your Inkscape file */
    background-repeat: repeat;                     /* Tiles the 200x200px square infinitely */
    background-color: var(--bg-page);
}

/* ==========================================
   HAMBURGER SIDEBAR NAV
   ========================================== */
/* The slide-out nav panel (#side-nav) and its dark backdrop
   (#nav-overlay). Both start hidden/off-screen and are toggled by
   adding/removing an .open class — see openNav()/closeNav() in
   main.js's "Hamburger Nav" section, which is the only thing that
   ever adds or removes that class. */

/* Overlay backdrop */
#nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 900;
    backdrop-filter: blur(2px);
}

#nav-overlay.open {
    display: block;
}

/* Sidebar panel */
#side-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--nav-width);
    height: 100%;
    background: var(--nav-bg);
    border-right: 2px solid var(--nav-border);
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    padding: 0 0 40px 0;
    box-shadow: 4px 0 24px rgba(0,0,0,0.5);
}

#side-nav.open {
    transform: translateX(0);
}

.nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--nav-border);
    background: var(--bg-header);
    position: sticky;
    top: 0;
    z-index: 10;
}

.nav-header span {
    font-weight: 700;
    font-size: 1rem;
    color: var(--accent-green);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.nav-close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
}

.nav-close-btn:hover {
    color: var(--accent-green);
    background: rgba(61,214,140,0.1);
}

#side-nav ul {
    list-style: none;
    padding: 12px 0;
}

#side-nav ul li a {
    display: block;
    padding: 9px 22px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.93rem;
    border-left: 3px solid transparent;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

#side-nav ul li a:hover {
    color: var(--accent-green);
    border-left-color: var(--accent-green);
    background: rgba(61,214,140,0.07);
}

#side-nav ul li.nav-section-title {
    padding: 14px 22px 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-blue);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Hamburger button */
#hamburger-btn {
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 850;
    background: var(--bg-card);
    border: 2px solid var(--border-main);
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#hamburger-btn:hover {
    border-color: var(--accent-green);
    box-shadow: var(--shadow-glow);
}

#hamburger-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--accent-green);
    border-radius: 2px;
    transition: transform 0.2s;
}

/* ==========================================
   MAIN CONTAINER
   ========================================== */
/* The card-like box that wraps every page's content — the textured
   panel with rounded corners sitting on top of the tiled page
   background (see body::before above). */

.container {
    width: 97%;
    
    margin: 0 auto;
	min-width: 0;
    
    /* ── ADDED FOR YOUR INNER TEXTURE ── */
    background-image: url('container_background.png'); /* Paths to your container texture */
    background-repeat: repeat;                   /* Tiles the pattern inside the box */
    background-color: var(--bg-container);        /* Kept your charcoal fill color safely underneath */
    /* ────────────────────────────────── */

    padding: 40px 40px 50px;
    border-radius: 12px;
    border: 2px solid var(--border-main);
    box-shadow: var(--shadow-soft);
}

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-blue);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 6px 14px;
    border: 1.5px solid var(--accent-blue);
    border-radius: 6px;
    margin-bottom: 28px;
    margin-left: 48px; /* clear hamburger */
    transition: background 0.2s, color 0.2s;
}

.back-btn:hover {
    background: var(--accent-blue);
    color: #fff;
}

/* ==========================================
   INDEX PAGE CARDS
   ========================================== */
/* The home/index page's grid of links to each note set: a big green
   .main-note-link button paired with an optional .notes-dropdown
   (a <details> element) for quick links to specific sections inside
   that note set, laid out two per row via .note-item-wrapper. */

.image {
    width: 250px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 24px auto;
    border-radius: 8px;
}

.notes-card {
    list-style-type: none;
    padding: 0;
    margin: 24px auto;
    width: 100%;
    max-width: 900px; /* Optional: limits the combined row width so it stays crisp */
    
    /* Flex grid setups */
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    gap: 24px; /* Space between rows and columns */
}

.note-item-wrapper {
    display: flex;
    gap: 0px; 
    position: relative;
    margin-bottom: 0px;
    
    /* Force exactly 2 items per row (accounting for the 24px gap) */
    flex: 1 1 calc(50% - 12px); 
    min-width: 320px; /* Prevents columns from becoming impossibly narrow */
    max-width: 440px; /* Keeps the cards perfectly proportioned */
}

.main-note-link {
    flex: 1;
    display: block;
    background-color: var(--accent-green);
    color: #111;
    font-size: 1.5rem;
    padding: 18px;
    border-radius: 8px;
    border: 3px solid #2ab870;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
}

.main-note-link:hover {
    background-color: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(91,156,246,0.3);
}

.notes-dropdown summary {
    background-color: var(--bg-header);
    border: 3px solid var(--border-main);
    border-radius: 8px;
    width: 58px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    list-style: none;
    transition: all 0.2s ease;
}

.notes-dropdown summary::-webkit-details-marker { display: none; }

.notes-dropdown summary .arrow {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--accent-green);
    transition: transform 0.2s ease;
}

.notes-dropdown summary:hover {
    background-color: var(--bg-card);
    border-color: var(--accent-green);
}

.notes-dropdown[open] summary .arrow {
    transform: rotate(180deg);
}

.dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--bg-card);
    padding: 16px 20px;
    border: 1.5px solid var(--border-main);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: var(--shadow-soft);
    z-index: 10;
    margin-top: 2px;
}

.dropdown-content ul {
    padding-left: 16px;
    margin: 0;
    color: var(--text-secondary);
}

.dropdown-content li {
    margin-bottom: 8px;
}

.dropdown-content li a {
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: 600;
}

.dropdown-content li a:hover {
    text-decoration: underline;
}

/* ==========================================
   NOTES CONTENT TYPOGRAPHY
   ========================================== */
/* Base text styling for everything inside a .notes-content wrapper —
   the actual note body. h1–h4 double as visual section dividers
   (bordered/backgrounded boxes, not just bigger text), since notes
   content is long-form and benefits from clearer visual breaks than
   plain heading sizes give. */

.notes-content {
    margin-top: 10px;
}

.notes-content h1 {
    font-size: 2.4rem;
    color: var(--text-heading);
    text-align: center;
    border-bottom: 3px solid var(--accent-green);
    padding-bottom: 14px;
    margin-bottom: 28px;
    letter-spacing: -0.02em;
}

.notes-content h2 {
    font-size: 1.65rem;
    color: var(--text-heading);
    margin-top: 40px;
    margin-bottom: 18px;
    background: var(--h2-bg);
    border: 2px solid var(--border-accent);
    border-radius: 6px;
    text-align: center;
    padding: 10px 20px;
    letter-spacing: 0.01em;
}

.notes-content h3 {
    font-size: 1.25rem;
    color: var(--accent-green);
    margin-top: 32px;
    margin-bottom: 12px;
    text-align: center;
    text-decoration: underline;
    text-decoration-color: rgba(61,214,140,0.4);
    text-underline-offset: 4px;
}

.notes-content h4 {
    font-size: 1.5rem;
    color: var(--text-heading);
    background-color: var(--h4-bg);
    display: table;
    padding: 10px 22px;
    border: 2px solid var(--border-main);
    border-radius: 6px;
    margin: 12px auto 16px auto;
    text-align: center;
    border-left: 4px solid var(--accent-amber);
}

.notes-content p,
.notes-content .notes-p {
    font-size: 1.1rem;
    line-height: 1.85;
    color: var(--text-primary);
    margin-bottom: 18px;
}

.notes-content ul {
    padding-left: 42px;
    margin-left: 4px;
    margin-bottom: 22px;
}

.notes-content ol {
    padding-left: 42px;
    margin-bottom: 22px;
}

.notes-content li {
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.notes-content strong {
    color: #f0f2f8;
    font-weight: 700;
}

.notes-content a {
    color: var(--accent-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.notes-content a:hover {
    color: var(--accent-green);
}

.notes-content u {
    text-decoration-color: var(--accent-amber);
    text-underline-offset: 3px;
}

/* ==========================================
   HIGHLIGHTED TERMS
   ========================================== */
/* Styling for <mark> — used in note content to call out key terms
   with an amber highlight, distinct from the green/blue accent used
   for links and headings elsewhere. */

.notes-content mark {
    background-color: rgba(240,165,0,0.22);
    color: var(--accent-amber);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    border-bottom: 1.5px solid var(--accent-amber);
}

/* ==========================================
   TOOLTIP HOVER DEFINITIONS
   ========================================== */
/* Pure-CSS hover tooltips for desktop (.tooltip-box appears on
   .tooltip-target:hover below — no JS involved). On touch devices
   this box stays hidden entirely (see the mobile override further
   down) and main.js's "Tooltip Mobile Listener" opens the same
   content in the #popup-overlay modal instead, since there's no
   hover to trigger this. main.js's "Desktop Tooltip Edge Collision"
   handler also nudges .tooltip-box left/right at runtime via
   margin-left, on top of the centering this file sets up. */

.tooltip-target {
    position: relative;
    cursor: help;
}

.tooltip-box {
    position: absolute;
    bottom: 130%;
    left: 50%;
      transform: translateX(-50%);
    width: 460px;
    max-width: calc(100vw - 32px);
    background: var(--tooltip-bg);
    border: 2px solid var(--tooltip-border);
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.55);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.tooltip-target:hover .tooltip-box {
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
}

.tooltip-title {
    display: block;
    color: var(--accent-green);
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-main);
    padding-bottom: 6px;
}

.tooltip-text {
    display: block;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 400;
    text-align: left;
    line-height: 1.6;
}

.notes-content .tooltip-text ul {
    margin: 8px 0 0 0;
    padding-left: 18px;
    list-style-type: disc;
    display: block;
    margin-bottom: 0;
}

.notes-content .tooltip-text li {
    font-size: 0.95rem !important;
    line-height: 1.5;
    margin-bottom: 5px;
    color: var(--text-primary) !important;
    text-align: left;
    display: list-item;
}

.notes-content .tooltip-text li:last-child {
    margin-bottom: 0;
}

/* ==========================================
   QUESTION DROPDOWNS
   ========================================== */
/* Native <details>/<summary> accordions used for practice questions —
   no JS needed for the open/close itself (the browser handles that);
   this just styles the two states and rotates .dropdown-arrow via the
   [open] attribute selector further down. */

.question-dropdown {
    background: var(--bg-card);
    border: 2px solid var(--border-main);
    border-radius: 10px;
    margin: 22px 0;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: border-color 0.2s;
}

.question-dropdown:hover {
    border-color: var(--accent-blue);
}

.question-dropdown summary {
    padding: 13px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background-color: var(--dropdown-sum);
    list-style: none;
    transition: background 0.2s;
    border-left: 4px solid var(--accent-blue);
}

.question-dropdown summary::-webkit-details-marker { display: none; }

.question-dropdown summary strong {
    font-size: 1.1rem;
    color: var(--text-primary);
}

.question-dropdown .dropdown-arrow {
    font-size: 1rem;
    color: var(--accent-green);
    transition: transform 0.25s ease;
    flex-shrink: 0;
    margin-left: 12px;
}

.question-dropdown summary:hover {
    background-color: #30364a;
}

.question-dropdown[open] summary .dropdown-arrow {
    transform: rotate(180deg);
}

.question-answer {
    padding: 20px 24px;
    border-top: 1px solid var(--border-main);
    background-color: var(--dropdown-ans);
}

.question-answer p {
    font-size: 1.1rem;
    color: var(--text-primary) !important;
    margin-bottom: 14px;
    line-height: 1.8;
}

.question-answer p:last-child { margin-bottom: 0; }
.question-answer p:first-child { margin-top: 0 !important; }

.question-answer ol,
.question-answer ul {
    padding-left: 28px;
    margin-bottom: 14px;
}

.question-answer li {
    font-size: 1.05rem;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.7;
}



/* ==========================================
   INLINE FRACTIONS (no MathJax)
   ========================================== */

/* Plain CSS stacked fraction — numerator over a line over denominator.
   Use this instead of $\frac{}{}$ for the odd one-off fraction, since
   any $, \(, \[ or \begin{ anywhere on the page trips main.js's
   pageHasMath check and pulls in the full MathJax library just to
   typeset it. This has none of those characters, so it stays free.
   Markup:
     <span class="frac"><span class="num">1</span><span class="den">2</span></span>
*/
.notes-content .frac {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    font-size: 0.85em;
    line-height: 1.15;
    margin: 0 2px;
}

.notes-content .frac .num {
    padding: 0 3px 1px;
    border-bottom: 1.5px solid currentColor;
}

.notes-content .frac .den {
    padding: 1px 3px 0;
}



/* ==========================================
   NOTES TABLES
   ========================================== */

/* Scroll container — the table itself is left free to size to its
   content (most rows wrap their text and never come close to this),
   but a couple of the polyatomic-ion tables run long enough on a
   narrow phone that it's worth having a fallback rather than letting
   cells get crushed. main.js toggles .is-scrollable on this wrapper
   only when a table actually overflows it. */
.notes-content .table-wrapper {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 28px auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border-accent) transparent;
}

.notes-content .table-wrapper::-webkit-scrollbar {
    height: 6px;
}

.notes-content .table-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.notes-content .table-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--border-accent);
    border-radius: 6px;
}

/* Quiet right-edge fade instead of a hard cutoff — a hint that
   there's more to scroll to, only shown when it's actually true. */
.notes-content .table-wrapper.is-scrollable::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    background: linear-gradient(to right, transparent, var(--bg-card));
    border-radius: 0 10px 10px 0;
    pointer-events: none;
}

.notes-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-card);
    border: 2px solid var(--border-main);
    border-radius: 10px;
    overflow: hidden;
}

.notes-content table caption {
    caption-side: top;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-green);
    margin-bottom: 14px;
}

.notes-content thead th {
    background: var(--h4-bg);
    color: var(--text-heading);
    font-weight: 700;
    text-align: left;
    padding: 13px 18px;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
    border-bottom: 2px solid var(--border-accent);
}

.notes-content tbody td {
    padding: 12px 18px;
    border-top: 1px solid var(--border-main);
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.6;
    vertical-align: top;
    transition: background-color 0.15s ease;
}

/* Avoids a doubled-up line sitting right under the header's own
   2px accent border. */
.notes-content tbody tr:first-child td {
    border-top: none;
}

.notes-content tbody tr:hover td {
    background-color: rgba(61,214,140,0.08);
}



/* ==========================================
   IMAGES
   ========================================== */
/* Default styling for a standalone image inside note content — capped
   width, centered, with the same border/shadow treatment used on the
   video placeholders and side-by-side images elsewhere in this file. */

.notes_image {
    width: 600px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 16px auto 24px auto;
    border-radius: 8px;
    border: 1.5px solid var(--border-main);
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

/* ==========================================
   SIDE-BY-SIDE IMAGE & TEXT LAYOUT
   ========================================== */

.media-side-by-side {
    display: flex;
    align-items: center;       /* Centers text vertically relative to the image */
    gap: 24px;                 /* Space between text and image */
    margin: 24px 0;
}

.media-side-by-side .side-text {
    flex: 1;                   /* Text expands to fill available space */
}

.media-side-by-side .side-image {
    flex: 0 0 320px;           /* Fixed image width; adjust as needed */
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1.5px solid var(--border-main);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* On mobile screens, stack the text and image vertically */
@media (max-width: 768px) {
    .media-side-by-side {
        flex-direction: column;
    }
    
    .media-side-by-side .side-image {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* ==========================================
   VIDEO CONTAINERS
   ========================================== */
/* Two states for the same slot. Before playback: .video-placeholder is
   a plain clickable thumbnail image with a play-button overlay. After
   the user clicks it, main.js's playEmbeddedVideo() swaps the
   placeholder for a real <iframe> inside .video-container — the
   fixed-size iframe + CSS transform scaling here (see the .video-
   container iframe rule and main.js's "Video Image-to-Iframe" section)
   is a workaround for embedded video players that don't reflow to
   fit small containers on their own. */

.video-container {
    display: block;
    position: relative;
    margin: 24px auto;
    text-align: center;
    max-width: 640px;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #000;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    border: 3px solid var(--border-main);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
    transform-origin: top left;
}

/* New Placeholder Elements */
.video-placeholder {
    position: relative;
    cursor: pointer;
    display: block;
    width: 100%;
    border: 3px solid var(--border-main);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.video-thumbnail {
    width: 100%;
    height: auto;
    display: block;
}

/* Play Button Overlay matching your theme styles */
.play-button-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4); /* Subtle dimming over the thumbnail image */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.play-button-overlay span {
    background: var(--bg-card);
    color: var(--accent-green);
    border: 2px solid var(--border-main);
    font-size: 1.6rem;
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding-left: 5px; /* Centers the triangle icon optically */
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Hover effects matching your link and dropdown aesthetic */
.video-placeholder:hover {
    border-color: var(--accent-green);
    box-shadow: var(--shadow-glow);
}

.video-placeholder:hover .play-button-overlay {
    background-color: rgba(0, 0, 0, 0.2); /* Brightens the image slightly on hover */
}

.video-placeholder:hover .play-button-overlay span {
    color: #fff;
    background: var(--accent-green);
    border-color: var(--accent-green);
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(61,214,140,0.4);
}

/* ==========================================
   COPYRIGHT BANNER
   ========================================== */

.copyright-banner {
    margin-top: 50px;
    padding: 20px 24px;
    background: var(--bg-header);
    border: 1.5px solid var(--border-main);
    border-radius: 8px;
    border-top: 3px solid var(--accent-green);
    text-align: center;
}

.copyright-banner p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
    line-height: 1.6;
}

.copyright-banner p:last-child { margin-bottom: 0; }

.copyright-banner strong {
    color: var(--text-primary);
}

/* ==========================================
   SCROLL-TO-TOP BUTTON
   ========================================== */
/* Fades in via the .visible class, which main.js's scroll listener
   toggles once the page has scrolled past 400px. Opacity + pointer-
   events are both gated on .visible so the invisible button can't be
   accidentally clicked/tabbed to while hidden. */

#scroll-top-btn {
    position: fixed;
    bottom: 28px;
    right: 24px;
    z-index: 800;
    background: var(--accent-green);
    color: #111;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(61,214,140,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.2s;
}

#scroll-top-btn.visible {
    opacity: 1;
    pointer-events: auto;
}

#scroll-top-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(61,214,140,0.5);
}

/* ==========================================
   RESPONSIVE
   ========================================== */
/* The main mobile breakpoint (≤768px), consolidating most phone/small-
   tablet overrides in one place: tighter spacing, smaller type, tooltip
   boxes hidden outright (mobile uses the tap-to-open popup instead —
   see main.js and the popup modal styles further down), and a nested
   ≤480px tier below for the smallest phones. The periodic table has
   its own separate breakpoints (700px / landscape) further down,
   since its layout needs are different enough to warrant their own
   rules rather than fitting into this one. */

@media (max-width: 768px) {
    body { padding: 16px 8px; }

    .container {
        padding: 24px 16px 36px;
        border-radius: 8px;
    }

    .back-btn {
        margin-left: 54px;
        font-size: 0.82rem;
        padding: 5px 10px;
    }

    .notes-content h1 { font-size: 1.8rem; }
    .notes-content h2 { font-size: 1.35rem; padding: 8px 14px; }
    .notes-content h3 { font-size: 1.1rem; }
    .notes-content h4 { font-size: 1.2rem; }

    .notes-content p,
    .notes-content .notes-p,
    .notes-content li { font-size: 1rem; }

    .notes-content table caption { font-size: 0.9rem; }
    .notes-content thead th { font-size: 0.85rem; padding: 10px 12px; }
    .notes-content tbody td { font-size: 0.92rem; padding: 10px 12px; }

    /* New Mobile Tooltip Rule: Hide the floating box completely */
  .tooltip-box {
      display: none !important;
  }

    .note-item-wrapper {
        width: 90%;
    }

/* ==========================================
       MATHJAX MOBILE OPTIMIZATION
       ========================================== */

    /* Normal inline equations (Default state) */
    mjx-container:not([display="true"]) {
        display: inline-block;
        vertical-align: middle;
    }

    /* Only applied by JavaScript when the math is actually too wide */
    mjx-container.scrollable-inline-math {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* Display equations (Always handled as blocks) */
    mjx-container[display="true"] {
        display: block;
        text-align: center;
        margin: 1em 0;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* H4 Tags */
    .notes-content h4 {
        overflow-x: auto;
        max-width: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 480px) {
    .notes-content h1 { font-size: 1.5rem; }
    .notes-content h2 { font-size: 1.15rem; }
}



/* ==========================================
   TOOLTIP POPUP MODAL (MOBILE TAP-TO-VIEW)
   ========================================== */
/* The modal main.js opens when a .tooltip-target is tapped on a
   touch device (see "Tooltip Mobile Listener" in main.js — desktop
   never shows this, it uses the pure-CSS hover box from the TOOLTIP
   HOVER DEFINITIONS section instead). .tap-word marks the inline
   trigger word itself; #popup-overlay/#custom-popup are the modal;
   #close-popup and clicking the dark backdrop both close it. */

/* Style for the interactive word */
.tap-word {
  color: var(--accent-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.2s;
}

.tap-word:hover {
  color: var(--accent-green);
}

/* Fullscreen dark overlay */
#popup-overlay {
  position: fixed;
  inset: 0; /* This replaces top, bottom, left, right, width, and height! */
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

/* The popup box */
#custom-popup {
  background-color: var(--bg-card);
  color: var(--text-primary);
  width: 85%;
  max-width: 450px;
  box-sizing: border-box;
  padding: 30px 20px 20px 20px;
  border-radius: 12px;
  border: 2px solid var(--border-accent); /* green accent, like your h2 */
  position: relative;
  box-shadow: var(--shadow-soft), var(--shadow-glow);
  max-height: 80vh;
  overflow-y: auto;
}

/* Popup heading */
#custom-popup h2 {
  font-size: 1.25rem;
  color: var(--text-heading);
  text-align: center;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-main);
}

/* Popup body text */
#popup-text {
  font-size: 1rem;
  color: var(--text-primary);
  line-height: 1.7;
}

/* X close button — matches your .nav-close-btn pattern */
#close-popup {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  font-size: 26px;
  cursor: pointer;
  color: var(--text-secondary);
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}

#close-popup:hover {
  color: var(--accent-green);
  background: rgba(61, 214, 140, 0.1);
}

/* Generic "force this element off" helper — the !important makes sure
   it wins regardless of what other display value a component's own
   rules set. Used to hide #popup-overlay when the modal is closed. */
.hidden {
  display: none !important;
}



/* ── PAGINATION SYSTEM ── */
/* Styles for the .note-page show/hide mechanism — main.js's showPage()
   is what actually adds/removes .active; this just defines what each
   state looks like, plus the Next/Prev button bar. */

/* Hidden by default, shown only when active */
.note-page {
    display: none;
    animation: fadeIn 0.4s ease-in-out;
}

.note-page.active {
    display: block;
}

/* Container for the Next/Prev buttons */
.pagination-controls {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--border-main);
}

/* Button style matching your .back-btn aesthetic */
.page-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    color: var(--accent-green);
    border: 1.5px solid var(--accent-green);
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}

.page-nav-btn:hover {
    background: var(--accent-green);
    color: #111;
}

/* Disable button when on first/last page */
.page-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    border-color: var(--text-secondary);
    color: var(--text-secondary);
}


/* MCQ Load Button — the dashed "Practice MCQs" header before it's been
   clicked. main.js's loadMCQSection() removes the mcq-load-btn class
   once loaded, so this styling (and the pointer cursor/hover lift)
   only ever applies to the not-yet-loaded state; the loaded state
   falls back to your normal h3 styling from NOTES CONTENT TYPOGRAPHY. */
h3.mcq-load-btn {
    background-color: var(--bg-card);
    border: 2px dashed var(--accent-green);
    border-radius: 8px;
    padding: 12px 24px;
    display: block;
    max-width: 400px;
    margin: 32px auto 12px auto;
    cursor: pointer;
    text-decoration: none !important; /* Temporarily removes native h3 underline */
    box-shadow: var(--shadow-soft);
    transition: all 0.2s ease;

    /* 📱 FIX 3: Force Mobile Touch Optimization */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

h3.mcq-load-btn:hover {
    border-style: solid;
    background-color: rgba(61, 214, 140, 0.05);
    box-shadow: var(--shadow-glow);
    transform: translateY(-1px);
}

/* Chevron arrows for the two "master" <details> dropdowns (notes
   outline / fractions videos) — a rotated square border-corner rather
   than an icon font or image. main.js's handleMasterVideoLoad toggle
   listener lazy-loads the fractions dropdown's content on open; the
   arrow rotation itself is pure CSS via the [open] selector below and
   needs no JS. */
.video-master-arrow, .notes-master-arrow {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--accent-green);  /* Clean theme-colored lines */
    border-bottom: 2px solid var(--accent-green);
    transform: rotate(45deg);                     /* Rotates square to point downward initially */
    transition: transform 0.25s ease;             /* Smooth flip animation */
    margin-right: 4px;                            /* Perfect spacing against container edge */
}

/* Rotates the new minimalist geometric arrows cleanly when opened */
details.notes-master-dropdown[open] .notes-master-arrow,
details.video-master-dropdown[open] .video-master-arrow {
    transform: rotate(-135deg) !important;
}

/* Hides default native layout summary layout markers in Webkit/Safari browsers */
details.notes-master-dropdown summary::-webkit-details-marker,
details.video-master-dropdown summary::-webkit-details-marker {
    display: none;
}

/* ==========================================
   INTEGRATED PERIODIC TABLE (STATIC)
   ========================================== */
/* Purely presentational — every .element-cell, its category color
   strip, and the detail panel's content are all generated by main.js's
   "Static Periodic Table Generator" section. Nothing here should need
   to change unless the generated markup's structure changes too. */

.periodic-table-section {
    margin: 40px 0;
    padding: 24px;
    background-color: var(--bg-card);
    border: 2px solid var(--border-main);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
    width: 100%;
}

.periodic-table-container {
    width: 100%;
}

.table-scroll-wrapper {
    width: 100%;
    overflow: visible; /* Eliminates nested container-level scrollbars */
}

/* Grid definition: 
   - 19 columns: 1 (for period numbers) + 18 groups (1fr each)
   - 11 rows: 1 header row, 7 period rows, 1 spacer row, 2 f-block rows
*/
.periodic-table-grid {
    display: grid !important;
    /* The magic fix: minmax(0, 1fr) forces columns to shrink instead of overflowing */
    grid-template-columns: 30px repeat(18, minmax(0, 1fr)) !important;
    grid-template-rows: 25px repeat(7, 70px) 15px repeat(2, 70px) !important;
    gap: 4px;
    width: 100%;
    max-width: 100%;
}

/* Coordinate Header Labels */
.group-number {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: center;
    user-select: none;
    border-bottom: 1px solid rgba(160, 168, 188, 0.15);
    padding-bottom: 4px;
}

.period-number {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    user-select: none;
    border-right: 1px solid rgba(160, 168, 188, 0.15);
    padding-right: 4px;
}

.series-label {
    font-size: 0.62rem;
    white-space: nowrap;
}

/* Element Cell Stylings (Clean, Solid, and Non-interactive) */
.element-cell {
    background-color: var(--bg-container);
    border: 1px solid var(--border-main);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 4px;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Disables all mouse highlights/clicks cleanly */
    /* These two lines allow the cell to squish without breaking the layout */
    overflow: hidden; 
    min-width: 0;
}

.element-cell .elem-num {
    font-size: 0.6rem;
    color: var(--text-secondary);
    line-height: 1;
    font-weight: 600;
    align-self: center;
}

.element-cell .elem-sym {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-heading);
    line-height: 1;
    margin: 1px 0;
}

.element-cell .elem-name {
    font-size: 0.55rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.element-cell .elem-mass {
    font-size: 0.55rem;
    color: var(--text-secondary);
    line-height: 1;
    opacity: 0.85;
}

/* Left Indicator Color Strips (also used by the detail panel's symbol box) */
.element-cell.nonmetal, .detail-symbol-box.nonmetal { border-left: 3px solid var(--accent-blue); }
.element-cell.noble-gas, .detail-symbol-box.noble-gas { border-left: 3px solid #b388ff; }
.element-cell.alkali, .detail-symbol-box.alkali { border-left: 3px solid var(--accent-amber); }
.element-cell.alkaline-earth, .detail-symbol-box.alkaline-earth { border-left: 3px solid #ffe082; }
.element-cell.metalloid, .detail-symbol-box.metalloid { border-left: 3px solid var(--accent-green); }
.element-cell.halogen, .detail-symbol-box.halogen { border-left: 3px solid #80deea; }
.element-cell.transition-metal, .detail-symbol-box.transition-metal { border-left: 3px solid #90caf9; }
.element-cell.post-transition, .detail-symbol-box.post-transition { border-left: 3px solid #a5d6a7; }
.element-cell.lanthanide, .detail-symbol-box.lanthanide { border-left: 3px solid #f48fb1; }
.element-cell.actinide, .detail-symbol-box.actinide { border-left: 3px solid #ffab91; }

/* Clean standard non-interactive cells */
/* Every .static-cell element also carries the .element-cell class (see
   the JS that builds these), so only properties that need to differ
   from .element-cell are listed here — the layout/padding properties
   .element-cell already sets don't need repeating, and box-sizing is
   already covered by the global reset at the top of this file. */
.element-cell.static-cell {
    cursor: default !important;
    pointer-events: none; /* Disables hover states and clicks completely */
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ── Element detail panel ──
   Sits in the block that's naturally empty on every periodic table —
   periods 1–3 have no groups 3–12, since transition metals don't start
   until period 4. Hidden by default; the "enable interactivity" query
   further down turns it on together with clicking. */
.element-detail-panel {
    display: none;
    grid-row: 2 / 5;
    grid-column: 4 / 14;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    background-color: var(--bg-page);
    border: 1px dashed var(--border-main);
    border-radius: 6px;
    padding: 10px 18px;
    overflow: hidden;
}

.detail-placeholder {
    margin: 0;
    text-align: center;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--text-secondary);
}

.detail-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.detail-symbol-box {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background-color: var(--bg-container);
    border: 1px solid var(--border-main);
    border-radius: 4px;
}

.detail-symbol-num {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1;
}

.detail-symbol-sym {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-heading);
    line-height: 1.2;
}

.detail-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-heading);
}

.detail-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.detail-desc {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-primary);
}

/* ── Mobile: scroll instead of squish ──
   Below 700px, `minmax(0, 1fr)` was cramming all 18 columns down to
   roughly 12px each while rows stayed a fixed 70px tall — unreadable
   slivers. Below this breakpoint, columns get a fixed, legible width
   instead and the wrapper scrolls horizontally — the standard pattern
   for wide reference tables on small screens. Nothing above 700px
   changes. */
@media (max-width: 700px) {
    .periodic-table-section {
        padding: 12px 8px;
    }

    .periodic-table-container::before {
        content: "Scroll to see all 18 groups →";
        display: block;
        font-size: 0.7rem;
        color: var(--text-secondary);
        text-align: right;
        margin-bottom: 6px;
    }

    .table-scroll-wrapper {
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 10px; /* keeps the scrollbar clear of the last row */
    }

    .periodic-table-grid {
        grid-template-columns: 30px repeat(18, 46px) !important;
        grid-template-rows: 22px repeat(7, 56px) 12px repeat(2, 56px) !important;
        gap: 3px;
        width: max-content !important;
        max-width: none !important;
    }
}

/* ── Phone in landscape: shrink columns further to cut down on
   remaining scroll, now that rotating has freed up extra width.
   Self-contained (doesn't rely on the ≤700px query above — a rotated
   phone is very often wider than 700px, e.g. ~850px on current
   iPhones), so every value it needs is set here directly. On most
   current phones this fits with little or no scrolling left; older/
   smaller phones may still need a bit — the wrapper still scrolls
   as a fallback. */
@media (orientation: landscape) and (max-height: 500px) {
    .periodic-table-section {
        padding: 10px 8px;
    }

    .table-scroll-wrapper {
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 8px;
    }

    .periodic-table-grid {
        grid-template-columns: 30px repeat(18, 38px) !important;
        grid-template-rows: 18px repeat(7, 46px) 10px repeat(2, 46px) !important;
        gap: 2px;
        width: max-content !important;
        max-width: none !important;
    }
}

/* ── Phone in portrait: table stays fully usable — just swap the
   hint text to mention rotating, since that gives a wider view with
   less scrolling than staying upright. Overrides only the `content`
   of the ≤700px hint above; everything else about the table (visible,
   scrollable, same size) is unchanged. */
@media (orientation: portrait) and (max-width: 500px) {
    .periodic-table-container::before {
        content: "Rotate for a wider view, or scroll to see all 18 groups →";
    }
}

/* ── Enable clicking/tapping elements — only when sideways or wide ──
   Cells are pointer-events:none by default (see .static-cell above),
   so on a cramped upright phone they simply aren't clickable at all —
   nothing extra needed there. This query turns clicking back on, and
   reveals the detail panel, in either of two cases: the phone is
   rotated to landscape (any width), or the viewport is wide enough
   that it was never cramped to begin with (>700px, matching the
   breakpoint used above). */
@media (orientation: landscape), (min-width: 701px) {
    .element-cell.static-cell {
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    .element-cell.static-cell:hover {
        border-color: var(--text-heading);
    }

    .element-detail-panel {
        display: flex;
    }
}

/* ==========================================
   DYNAMIC COLOR SECTION BOX
   ========================================== */
/* A full-bleed callout box that breaks out of .container's padding to
   span edge-to-edge. --box-color isn't defined anywhere in this file —
   it's meant to be set per-instance with an inline style="--box-color:
   ..." in the HTML, falling back to the default dark shade below when
   omitted. .rectangle further down uses the same pattern. */

.example-box {
    background-color: var(--box-color, #1e2330);
    background-image: none;
    
    /* Pulls the box outward by 40px to match the container's padding: 40px 40px 50px */
    margin-left: -40px;
    margin-right: -40px;
    
    /* Re-applies 40px horizontal padding so content aligns with container text */
    padding: 32px 40px;
    
    /* Flush top and bottom borders separating it from upper/lower content */
    border-top: 1.5px solid var(--border-main);
    border-bottom: 1.5px solid var(--border-main);
    border-left: none;
    border-right: none;
    border-radius: 0;
}



/* ==========================================
   TWO-UP RECTANGLE GRID
   ========================================== */
/* A generic 2-column grid for arbitrary content blocks in notes (not
   tied to any particular topic) — pair up .rectangle children inside
   a .rectangle-container. Each rectangle takes --box-color the same
   way .example-box above does. A trailing odd-numbered-out rectangle
   automatically spans the full width instead of leaving a gap next
   to it. */

/* The main container holding your rectangles */
.rectangle-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Creates two equal-sized rectangles per row */
    gap: 1.5rem;
    width: 100%;
    margin: 1.5rem 0;
}

/* The individual rectangles */
.rectangle {
    background-color: var(--box-color, transparent);
    padding: 1.5rem;
    border-radius: 4px;
    min-height: 150px; /* Gives them some height */
}

/* If a rectangle is the LAST one AND an ODD number (like the 3rd one), 
   stretch it across the full width */
.rectangle:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* On mobile screens, stack all rectangles vertically */
@media (max-width: 768px) {
    .rectangle-container {
        grid-template-columns: 1fr; 
    }
}



/* ==========================================
   SMART COLUMNS
   ========================================== */
/* A second, more flexible 2-column layout: unlike the rectangle grid
   above, columns here can hold different amounts of content without
   stretching to match each other's height (see align-items below).
   .desktop-left/.desktop-right-col define the two columns on wide
   screens; on mobile they collapse into a single ordered column via
   the .mobile-1..5 order classes in the media query below. */

.smart-columns {
    display: flex;
    align-items: flex-start;   /* each column keeps its own natural height
                                   instead of stretching to match the taller
                                   one - this is what was causing the gap */
    gap: 1.5rem;
    width: 100%;
    margin: 1.5rem 0;
}

/* Desktop column */
.desktop-left,
.desktop-right-col {
    flex: 1 1 0;
    min-width: 0;              /* lets long words / images shrink instead of
                                   overflowing the column */
}


/* Mobile */
@media (max-width: 768px) {

    .smart-columns {
        flex-direction: column;
    }

    /* .desktop-right-col exists only to keep the image and the block below
       it flowing in one column on desktop. On mobile it needs to disappear
       so its children can reorder independently alongside .desktop-left -
       display:contents does exactly that without touching the DOM. */
    .desktop-right-col {
        display: contents;
    }

    .mobile-1 { order: 1; }
    .mobile-2 { order: 2; }
    .mobile-3 { order: 3; }
    .mobile-4 { order: 4; }
    .mobile-5 { order: 5; }
}