/**
 * base.css
 * ========
 * Global styles applied to every page via base.html.
 *
 * IFRAME ARCHITECTURE OVERVIEW
 * -----------------------------
 * The site uses two display modes for toolkit hub pages
 * (freight_tools, glass_artist_toolkit, it_tools, etc.):
 *
 *   MOBILE  (< 768px):  .non-iframe-cards are shown — simple Bootstrap cards
 *                        with a title, image, description, and a link button.
 *                        No iframes. Clean and fast on small screens.
 *
 *   DESKTOP (≥ 768px):  .iframe-cards are shown — the same tool pages are
 *                        embedded live inside <iframe> elements within
 *                        .iframe-card-wrapper cards. Users can interact with
 *                        each tool without navigating away from the hub page.
 *
 * When a tool page loads as the src of one of these iframes, base.html's
 * synchronous inline script immediately sets the 'embedded' class on <html>:
 *
 *     <script>if(window.self!==window.top)document.documentElement.classList.add('embedded');</script>
 *
 * This runs before CSS is fetched, so the html.embedded rules below apply
 * instantly with zero flash of the hidden elements. The deferred iframe-handler.js
 * then reads this class and handles JS-side cleanup (removing the repo link and
 * attribution paragraph — see iframe-handler.js for details).
 *
 * Everything visible-state-related for embedded pages is controlled here in CSS.
 * JavaScript does not toggle display or visibility for any of these rules.
 */


/* ── EMBEDDED PAGE: Hide site chrome ────────────────────────────────────────
   When a tool page is loaded inside a hub-page iframe, the navbar and footer
   are meaningless context — the user is already on the hub page that provides
   that navigation. Hiding them also eliminates the 100px body padding-top that
   compensates for the fixed navbar, which is reset below. */
html.embedded header,
html.embedded footer {
    display: none !important;
}

/* ── EMBEDDED PAGE: Hide secondary "Go to [toolkit]" buttons ────────────────
   Every tool page has a .btn.btn-secondary that links back to its parent
   toolkit hub (e.g., "Go to Freight Professional Toolkit"). When the tool
   is already embedded inside that hub page, this button is redundant and
   takes up vertical space that affects iframe sizing. */
html.embedded .btn.btn-secondary {
    display: none !important;
}

/* ── EMBEDDED PAGE: Remove body padding and scrollbars ──────────────────────
   base.html's <body> has padding-top: 100px to clear the fixed navbar.
   Inside an iframe the navbar is hidden, so that padding creates a large
   blank gap at the top of the embedded tool. overflow: hidden prevents the
   iframe from showing its own scrollbar — the hub page's iframe height is
   managed dynamically by iframe-handler.js so the content never needs to
   scroll inside the frame. */
html.embedded body {
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* ── EMBEDDED PAGE: Remove main padding ─────────────────────────────────────
   <main> also carries bottom padding (to clear the fixed footer). Inside an
   iframe the footer is hidden, so that padding is dead space. */
html.embedded main {
    padding: 0 !important;
    margin: 0 !important;
}

/* ── EMBEDDED PAGE: Allow containers to fill the iframe ─────────────────────
   Inside an iframe, the viewport is artificially constrained. Force the standard
   Bootstrap .container to utilize 100% of the iframe's width so wide elements
   (like calendars or data tables) don't trigger unnecessary scrollbars. */
html.embedded .container {
    max-width: 100% !important;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* ── EMBEDDED PAGE: Hide related-tools and educational content ───────────────
   Tool pages include a .related-tools-block section below the results area
   with explanatory text and cross-links to other tools. This content is
   valuable on the standalone tool page, but inside an iframe it adds vertical
   height that inflates the iframe size unnecessarily, and the cross-links
   would navigate the iframe window rather than the parent. Hidden here;
   the .related-tools-block class is applied in each tool template. */
.embedded .related-tools-block {
    display: none !important;
}


/* ── HUB PAGE: Responsive card switching ────────────────────────────────────
   Hub pages render two card sets for the same tools:
     .non-iframe-cards — link cards (mobile-appropriate, no iframes)
     .iframe-cards     — live embedded tool iframes (desktop only)
   CSS toggles which set is visible based on viewport width. JavaScript is
   not involved in this toggle. */

@media (min-width: 768px) {
    /* Desktop: show live iframes, hide plain link cards */
    .non-iframe-cards {
        display: none !important;
    }
    .iframe-cards {
        display: flex !important;
    }
}

@media (max-width: 767px) {
    /* Mobile: show plain link cards, hide iframes */
    .iframe-cards {
        display: none !important;
    }
    .non-iframe-cards {
        display: flex !important;
    }
}


/* ── UTILITIES ──────────────────────────────────────────────────────────────
   General-purpose classes available across all templates. */

/* Narrow content column — apply to a wrapping div to constrain prose width */
.u-container-narrow {
    width: 100%;
    max-width: 750px;
}

/* Replaces inline style="text-decoration: none;" on footer brand links */
.footer-brand-link {
    text-decoration: none;
}
.footer-brand-link:hover,
.footer-brand-link:focus {
    text-decoration: none;
}

/* Inline content links — subtle dotted underline that becomes solid on hover */
.content-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.content-link:hover,
.content-link:focus {
    border-bottom-style: solid;
    text-decoration: none;
}


/* ── BODY & LAYOUT ──────────────────────────────────────────────────────────
   The navbar is fixed-position, so body needs top padding to prevent content
   from sliding underneath it. The same value applies at all breakpoints. */
body {
    padding-top: 100px;
}

@media (max-width: 768px) {
    body {
        padding-top: 100px;
    }
}


/* ── FOOTER ─────────────────────────────────────────────────────────────────
   On mobile the footer flows with the document (position: relative) so it
   doesn't overlap content. On desktop it is fixed to the bottom of the
   viewport — main needs extra bottom padding to compensate so content
   isn't hidden behind it (see the main rules below). */
footer {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    margin: 0 auto;
    padding: 1rem 0;
    border-top: 1px solid #ccc;
    position: relative; /* Mobile: flows with document */
}

@media (min-width: 768px) {
    footer {
        position: fixed;
        bottom: 0;
    }
}


/* ── MAIN CONTENT AREA ──────────────────────────────────────────────────────
   On mobile the footer is not fixed, so a small buffer is enough.
   On desktop the footer is fixed at ~150px tall, so main needs equivalent
   bottom padding to ensure the last content element isn't hidden behind it. */
main {
    padding-bottom: 2rem; /* Mobile: small buffer above in-flow footer */
}

@media (min-width: 768px) {
    main {
        padding-bottom: 150px; /* Desktop: clear the fixed footer */
    }
}

/* ── RELATED TOOLS LINKS ────────────────────────────────────────────────────
   Styled anchor for cross-tool navigation within .related-tools-block.
   Inherits the dotted/solid underline behavior of .content-link but adds
   a muted teal accent so the links read as navigational rather than purely
   inline prose. The ::after arrow is decorative and hidden on hover. */
.related-tool-link {
    color: var(--bs-info); /* Bootstrap dark theme's muted teal */
    text-decoration: none;
    border-bottom: 1px dotted var(--bs-info);
    transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
    opacity: 0.8;
}
.related-tool-link:hover,
.related-tool-link:focus {
    border-bottom-style: solid;
    opacity: 1;
    text-decoration: none;
    color: var(--bs-info);
}

/* Improve contrast for muted/secondary text globally in dark mode */
[data-bs-theme="dark"] .text-secondary,
[data-bs-theme="dark"] .text-muted {
    color: #ced4da !important; /* Bootstrap's "gray-400" - much brighter */
}

/* Slightly brighten standard body text for better reading */
[data-bs-theme="dark"] {
    --bs-body-color: #f8f9fa; /* Bootstrap's "gray-100" */
}

/* ── PRINT: site-wide baseline ──────────────────────────────────────────────
   The navbar and footer are hidden in print via d-print-none on their
   elements (includes/navbar.html, includes/footer.html) — utility-class
   specificity is required there because the footer's .d-flex
   (display: flex !important) outranks any element-selector hide rule.

   Two things remain for every page:

   1. LAYOUT: body's 100px top padding (clears the fixed navbar) and main's
      150px bottom padding (clears the fixed footer) are dead space on paper
      once that chrome is hidden.

   2. COLOR: browsers strip background colors by default when printing but
      keep text color as-is, so the dark theme's near-white body text
      (--bs-body-color: #f8f9fa) and this file's brightened .text-muted
      (#ced4da) would print as light-gray-on-white. The variable overrides
      below reverse the dark theme for print only. This block sits at the
      end of the file, so at equal specificity it wins on source order
      against the dark-mode rules above.

   Per-tool print polish (e.g., the HOS Multi-Stop Trip Planner's trip
   sheet) stays in each tool's own stylesheet; this block only guarantees
   every page prints readable. */
@media print {
    body {
        padding-top: 0 !important;
    }
    main {
        padding-bottom: 0 !important;
    }

    /* Reverse the dark theme's color variables for paper. Components that
       derive from these (cards, tables, form text) follow automatically. */
    [data-bs-theme="dark"] {
        --bs-body-color: #000;
        --bs-body-bg: #fff;
        --bs-secondary-color: rgba(0, 0, 0, 0.75);
    }
    html, body {
        background: #fff !important;
        color: #000 !important;
    }

    /* Reverses this file's own dark-mode brightening of muted text
       (identical selectors, later in source, so it wins in print). */
    [data-bs-theme="dark"] .text-secondary,
    [data-bs-theme="dark"] .text-muted {
        color: #333 !important;
    }
}