/*!
 * TGM Elements — Public Styles
 *
 * Static fallbacks. Per-instance overrides are emitted inline by the
 * shortcode renderers (scoped to #unique-id).
 *
 * @copyright Copyright (c) 2026 Two Guys and a Mouse, LLC. All rights reserved.
 * @license   GPL-2.0-or-later https://www.gnu.org/licenses/gpl-2.0.html
 * @link      https://twoguysandamouse.com
 */

/* ─── Accordion (base) ─── */
.tgme-accordion { display: block; }
.tgme-acc-item { overflow: hidden; }
/* The header is a <button> (v0.5.2+ accessibility pass). Per-instance CSS
   from the shortcode renderer sets background/padding/font; this base layer
   just provides the universal reset + a visible focus ring so keyboard
   users always see where they are. */
.tgme-acc-header {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    user-select: none;
    cursor: pointer;
}
.tgme-acc-header:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}
/* The title span lets the visible text wrap independently of the icon's
   flex column. Inheriting font and color keeps it consistent with the
   button's per-instance styling. */
.tgme-acc-title { display: inline-block; }
/* No-JS / pre-init fallback: while the accordion has the `tgme-acc--pre-js`
   class (set by the renderer, removed by initAccordion() on DOMContentLoaded),
   any item rendered with `tgme-acc--open` shows its content even though the
   shortcode's inline CSS sets `.tgme-acc-content { max-height: 0 }`.
   Once JS removes the pre-js class, the JS-set inline `max-height: scrollHeight`
   takes over, which is what makes the close transition animate smoothly
   from real content height down to 0 instead of from 9999px (where ~98% of
   the transition was invisible, producing the "weird delay" Todd reported). */
.tgme-acc--pre-js .tgme-acc--open .tgme-acc-content { max-height: 9999px !important; }

/* ─── Textbox (base) ─── */
.tgme-textbox-wrap { box-sizing: border-box; }
.tgme-textbox      { box-sizing: border-box; word-wrap: break-word; }
.tgme-textbox-link { display: block; text-decoration: none; color: inherit; }

/* ─── Floating Menu (base) ─── */
.tgme-floating-nav {
    box-sizing: border-box;
}
.tgme-floating-nav .tgme-home-button,
.tgme-floating-nav .tgme-hamburger-button {
    font-family: inherit;
}
/* When .tgme-home-icon wraps a bundled-library SVG (span > svg), make the SVG
   fill the container so it tracks the responsive width/height rules below. */
.tgme-floating-nav .tgme-home-icon > svg {
    width: 100%;
    height: 100%;
    display: block;
}
.tgme-menu-panel {
    box-sizing: border-box;
}
.tgme-menu-panel .tgme-menu-list { list-style: none; padding: 0; margin: 0; }
.tgme-menu-panel .tgme-menu-list a { display: block; }

/* Prevent body scroll when menu is open */
body.tgme-menu-open { overflow: hidden; }

/* Responsive — mobile tightening */
@media (max-width: 768px) {
    .tgme-floating-nav .tgme-home-button,
    .tgme-floating-nav .tgme-hamburger-button {
        padding: 10px 12px;
    }
    .tgme-floating-nav .tgme-home-icon,
    .tgme-floating-nav .tgme-home-icon-img {
        width: 20px;
        height: 20px;
    }
    .tgme-floating-nav .tgme-home-text {
        font-size: 10px;
    }
    .tgme-floating-nav .tgme-hamburger-line {
        width: 20px;
    }
    .tgme-menu-panel {
        width: 280px !important;
    }
}