/* ==========================================================================
   Aussom Language Website - Main Stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   Custom Properties (Color Palette)
   -------------------------------------------------------------------------- */
:root {
    --color-teal:       #1AABAB;
    --color-teal-dark:  #0E7272;
    --color-red:        #D94438;
    --color-amber:      #F07530;
    --color-gold:       #F5C840;
    --color-navy:       #1A1E2E;
    --color-slate:      #252839;
    --color-gray-mid:   #4A4D5E;
    --color-gray-light: #F2F4F7;
    --color-cream:      #EDE8D8;
    --color-white:      #FFFFFF;
    --color-text-dark:  #1C1C2A;
    --color-text-muted: #6B6E82;

    --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "Courier New", Courier, monospace;

    --radius: 6px;
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.10);
    --section-pad: 72px 0;
}

/* --------------------------------------------------------------------------
   Base Reset and Body
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-base);
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-text-dark);
    background-color: var(--color-white);
    margin: 0;
    padding: 0;
}

a {
    color: var(--color-teal);
    text-decoration: none;
}

a:hover {
    color: var(--color-teal-dark);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Layout primitives and utilities (replaces Bootstrap 5)
   --------------------------------------------------------------------------
   Class names match the slice of Bootstrap we used so all existing
   markup keeps working unchanged. Breakpoints follow Bootstrap's
   conventions:
     md: >= 768px
     lg: >= 992px
     xl: >= 1200px
   -------------------------------------------------------------------------- */

/* ----- Containers ------------------------------------------------------- */
.container,
.container-fluid {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 12px;
    padding-left: 12px;
    box-sizing: border-box;
}
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }
.container-fluid { max-width: 100%; }

/* ----- Grid: rows and columns ------------------------------------------ */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -12px;
    margin-left: -12px;
}
/* Every column gets the row's gutter padding. Width comes from the
 * specific .col-* / .col-md-* / .col-lg-* / .col-xl-* class itself.
 * Default width when no breakpoint-specific class applies is 100%. */
.row > [class*="col-"] {
    padding-right: 12px;
    padding-left: 12px;
    box-sizing: border-box;
}
[class*="col-"] { width: 100%; }
.col-12 { width: 100%; }
.col-6  { width: 50%; }

@media (min-width: 768px) {
    .col-md-2 { width: 16.6667%; }
    .col-md-3 { width: 25%; }
    .col-md-4 { width: 33.3333%; }
    .col-md-6 { width: 50%; }
    .col-md-8 { width: 66.6667%; }
}
@media (min-width: 992px) {
    .col-lg-2 { width: 16.6667%; }
    .col-lg-3 { width: 25%; }
    .col-lg-4 { width: 33.3333%; }
    .col-lg-6 { width: 50%; }
    .col-lg-8 { width: 66.6667%; }
    .col-lg-9 { width: 75%; }
}
@media (min-width: 1200px) {
    .col-xl-2  { width: 16.6667%; }
    .col-xl-10 { width: 83.3333%; }
}

/* Gutters (vertical spacing between rows that wrap). g-3 ~ 1rem, g-4 ~ 1.5rem. */
.row.g-3 > [class*="col-"] { padding-bottom: 1rem; }
.row.g-4 > [class*="col-"] { padding-bottom: 1.5rem; }

/* ----- Display utilities ----------------------------------------------- */
.d-flex          { display: flex; }
.d-block         { display: block; }
.d-inline-block  { display: inline-block; }
.d-none          { display: none; }
@media (min-width: 992px) {
    .d-lg-flex         { display: flex !important; }
    .d-lg-block        { display: block !important; }
    .d-lg-inline-block { display: inline-block !important; }
    .d-lg-none         { display: none !important; }
}

/* ----- Flex helpers ---------------------------------------------------- */
.align-items-center      { align-items: center; }
.align-items-start       { align-items: flex-start; }
.justify-content-center  { justify-content: center; }
.justify-content-end     { justify-content: flex-end; }
.gap-2                   { gap: 0.5rem; }
.gap-3                   { gap: 1rem; }

/* ----- Spacing utilities (Bootstrap step is 0.25rem) ------------------- */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }

.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }

.me-2 { margin-right: 0.5rem !important; }
.ms-2 { margin-left: 0.5rem !important; }

@media (min-width: 768px) { .mb-md-0 { margin-bottom: 0 !important; } }
@media (min-width: 992px) {
    .mb-lg-0       { margin-bottom: 0 !important; }
    .ms-lg-auto    { margin-left: auto !important; }
}

.p-3  { padding: 1rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }

/* ----- Text utilities -------------------------------------------------- */
.text-center { text-align: center; }
.text-end    { text-align: right; }
.text-white  { color: var(--color-white); }
.text-muted  { color: var(--color-text-muted); }
.fw-bold     { font-weight: 600; }

/* ----- Backgrounds & position ----------------------------------------- */
.bg-dark    { background-color: var(--color-navy); }
.bg-light   { background-color: var(--color-gray-light); }
.rounded    { border-radius: var(--radius); }
.sticky-top {
    position: sticky;
    top: 0;
    z-index: 1020;
}

/* ----- Sizing ---------------------------------------------------------- */
.h-100 { height: 100%; }

/* ----- Card ------------------------------------------------------------ */
.card {
    background-color: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}
.card-body  { padding: 1.25rem; }
.card-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* ----- Breadcrumb ------------------------------------------------------ */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.95rem;
    color: var(--color-text-muted);
}
.breadcrumb-item              { display: inline-block; }
.breadcrumb-item + .breadcrumb-item          { padding-left: 0.5rem; }
.breadcrumb-item + .breadcrumb-item::before  {
    content: "/";
    padding-right: 0.5rem;
    color: var(--color-text-muted);
}
.breadcrumb-item.active { color: var(--color-text-dark); }
.breadcrumb-item a      { color: var(--color-teal); }

/* ----- Generic .btn baseline ------------------------------------------ */
.btn {
    display: inline-block;
    padding: 0.4rem 0.85rem;
    font-size: 0.95rem;
    line-height: 1.4;
    border-radius: var(--radius);
    border: 1px solid transparent;
    background-color: transparent;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}
.btn-sm { padding: 0.25rem 0.6rem; font-size: 0.85rem; }
.btn-outline-secondary {
    color: var(--color-text-muted);
    border-color: var(--color-text-muted);
    background-color: transparent;
}
.btn-outline-secondary:hover {
    background-color: var(--color-text-muted);
    color: var(--color-white);
    text-decoration: none;
}

/* ----- Navbar baseline ------------------------------------------------- */
.navbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.5rem 1rem;
    position: relative;
}
/* Inside the navbar, the container is a flex row too so brand and
 * menu sit side-by-side at desktop widths. */
.navbar > .container,
.navbar > .container-fluid {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
}
.navbar-brand {
    display: inline-flex;
    align-items: center;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    margin-right: 1rem;
    font-size: 1.1rem;
    text-decoration: none;
}
.navbar-toggler {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius);
    cursor: pointer;
    line-height: 1;
}
.navbar-toggler-icon {
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    vertical-align: middle;
}

/* ----- Mobile collapse via checkbox + label (pure CSS) ----------------
   The mobile navbar uses a hidden checkbox as state. A <label> styled
   like the old Bootstrap toggler flips the checkbox; the menu's
   visibility responds via the :checked sibling selector. Zero JS, and
   the layout interacts cleanly with flex (unlike <details>, which the
   browser UA stylesheet hides children of, fighting flex sizing).
   -------------------------------------------------------------------- */
.navbar-toggle-state {
    /* Hide the checkbox itself but keep it focusable via the label. */
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.navbar-nav {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
}
.navbar-nav .nav-item .nav-link {
    display: inline-block;
    padding: 0.5rem 1rem;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

/* Mobile (< lg): the menu is hidden until the checkbox is checked.
 * When shown, it wraps to a full-width row beneath the brand. */
.navbar-collapse {
    display: none;
    flex-basis: 100%;
    margin-top: 0.5rem;
}
.navbar-toggle-state:checked ~ .navbar-collapse {
    display: block;
}

/* At lg+ the toggler disappears and the menu is always inline. */
@media (min-width: 992px) {
    .navbar-toggler { display: none; }
    .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
        flex-grow: 1;
        margin-top: 0;
    }
    .navbar-expand-lg .navbar-nav {
        flex-direction: row;
    }
}

/* ----- Generic <details>-based collapse helper ------------------------
   Used by the docPage mobile sidebar where there is no need to flip
   layout at lg+ (the entire toggle is hidden via d-lg-none).
   -------------------------------------------------------------------- */
.collapse-toggle > summary {
    list-style: none;
    cursor: pointer;
}
.collapse-toggle > summary::-webkit-details-marker { display: none; }
.collapse-toggle > summary::marker                 { content: ""; }

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */
.aussom-navbar {
    background-color: var(--color-navy) !important;
    border-bottom: 2px solid var(--color-teal);
    padding: 0.6rem 0;
}

.aussom-navbar .navbar-brand {
    color: var(--color-white) !important;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.aussom-navbar .navbar-brand:hover {
    color: var(--color-teal) !important;
    text-decoration: none;
}

.aussom-navbar .navbar-brand img {
    height: 36px;
    width: auto;
}

.aussom-navbar .nav-link {
    color: rgba(255, 255, 255, 0.80) !important;
    font-weight: 500;
    padding: 0.4rem 1rem !important;
    transition: color 0.15s ease;
}

.aussom-navbar .nav-link:hover,
.aussom-navbar .nav-link.active {
    color: var(--color-teal) !important;
}

.aussom-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.25);
}

.aussom-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.nav-menu-header {
    font-weight: 700;
    color: var(--color-white) !important;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 0 !important;
    cursor: default;
}

.nav-product-item {
    padding-left: 1rem;
}

.nav-product-icon {
    height: 1em;
    width: auto;
    vertical-align: middle;
    margin-right: 0.25rem;
}

.nav-cta-btn {
    background-color: var(--color-teal) !important;
    color: var(--color-white) !important;
    border-radius: var(--radius) !important;
    padding: 0.35rem 1.1rem !important;
    font-weight: 600 !important;
    transition: background-color 0.15s ease !important;
    border: none;
}

.nav-cta-btn:hover {
    background-color: var(--color-teal-dark) !important;
    color: var(--color-white) !important;
    text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   Hero Section
   -------------------------------------------------------------------------- */
.aussom-hero {
    background-color: var(--color-navy);
    background-image: radial-gradient(ellipse at 70% 50%, rgba(26, 171, 171, 0.12) 0%, transparent 60%);
    color: var(--color-white);
    padding: 100px 0 90px;
    text-align: center;
}

.aussom-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 1.25rem;
    color: var(--color-white);
}

.aussom-hero h1 .hero-accent {
    background: linear-gradient(90deg, var(--color-teal), var(--color-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.aussom-hero .hero-lead {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.75);
    max-width: 580px;
    margin: 0 auto 2.25rem;
    line-height: 1.7;
}

.aussom-hero .hero-buttons {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn-aussom-primary {
    background-color: var(--color-teal);
    color: var(--color-white);
    border: 2px solid var(--color-teal);
    border-radius: var(--radius);
    padding: 0.65rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    display: inline-block;
    text-decoration: none;
}

.btn-aussom-primary:hover {
    background-color: var(--color-teal-dark);
    border-color: var(--color-teal-dark);
    color: var(--color-white);
    text-decoration: none;
}

.btn-aussom-outline {
    background-color: transparent;
    color: var(--color-white);
    border: 2px solid rgba(255, 255, 255, 0.50);
    border-radius: var(--radius);
    padding: 0.65rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
    display: inline-block;
    text-decoration: none;
}

.btn-aussom-outline:hover {
    border-color: var(--color-teal);
    color: var(--color-teal);
    text-decoration: none;
}

.btn-aussom-outline-dark {
    background-color: transparent;
    color: var(--color-teal);
    border: 2px solid var(--color-teal);
    border-radius: var(--radius);
    padding: 0.65rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    display: inline-block;
    text-decoration: none;
}

.btn-aussom-outline-dark:hover {
    background-color: var(--color-teal);
    color: var(--color-white);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Section Backgrounds
   -------------------------------------------------------------------------- */
.section-light {
    background-color: var(--color-gray-light);
    padding: var(--section-pad);
}

.section-dark {
    background-color: var(--color-slate);
    color: var(--color-white);
    padding: var(--section-pad);
}

.section-cream {
    background-color: var(--color-cream);
    padding: var(--section-pad);
}

.section-navy {
    background-color: var(--color-navy);
    color: var(--color-white);
    padding: var(--section-pad);
}

.section-heading {
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: inherit;
}

.section-subheading {
    font-size: 1.05rem;
    color: var(--color-text-muted);
    margin-bottom: 3rem;
}

.section-dark .section-subheading,
.section-navy .section-subheading,
.docs-hero .section-subheading,
.code-section .section-subheading {
    color: rgba(255, 255, 255, 0.60);
}

/* Download page card uses a fixed-height icon next to the title.
 * Centralized here instead of an inline style attribute. */
.download-card-icon {
    height: 40px;
    width: auto;
}

/* --------------------------------------------------------------------------
   Use-Case Cards
   -------------------------------------------------------------------------- */
.aussom-card {
    background-color: var(--color-white);
    border: 1px solid #e0e3ea;
    border-top: 4px solid var(--color-teal);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 2rem 1.75rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.aussom-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
}

.aussom-card .card-icon {
    width: 72px;
    height: 72px;
    object-fit: contain;
    margin-bottom: 1.25rem;
}

.aussom-card .card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 0.6rem;
}

.aussom-card .card-desc {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    flex-grow: 1;
    margin-bottom: 1.25rem;
}

.aussom-card .card-link {
    color: var(--color-teal);
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: auto;
}

.aussom-card .card-link:hover {
    color: var(--color-teal-dark);
}

/* --------------------------------------------------------------------------
   Feature Columns
   -------------------------------------------------------------------------- */
.feature-col {
    text-align: center;
    padding: 1.5rem 1rem;
}

.feature-col .feature-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 1rem;
}

.feature-col .feature-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

.feature-col .feature-desc {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Code Block / Snippet Section
   -------------------------------------------------------------------------- */
.code-section {
    background-color: var(--color-navy);
    padding: var(--section-pad);
}

.code-section .section-heading {
    color: var(--color-white);
}

.code-block {
    background-color: var(--color-slate);
    border-left: 4px solid var(--color-teal);
    border-radius: var(--radius);
    padding: 1.75rem 2rem;
    font-family: var(--font-mono);
    font-size: 0.88rem;
    line-height: 1.75;
    color: #cdd3de;
    overflow-x: auto;
    text-align: left;
    white-space: pre;
}

.code-block .tok-kw    { color: var(--color-teal); }
.code-block .tok-str   { color: var(--color-gold); }
.code-block .tok-cmt   { color: #6b7a99; font-style: italic; }
.code-block .tok-fn    { color: #82aaff; }
.code-block .tok-num   { color: var(--color-amber); }

/* --------------------------------------------------------------------------
   Get Started Section
   -------------------------------------------------------------------------- */
.get-started-section {
    background-color: var(--color-cream);
    padding: var(--section-pad);
    text-align: center;
}

.get-started-section .section-heading {
    color: var(--color-text-dark);
}

.get-started-section .section-subheading {
    color: var(--color-gray-mid);
}

.get-started-buttons {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.aussom-footer {
    background-color: var(--color-navy);
    color: rgba(255, 255, 255, 0.70);
    padding: 56px 0 32px;
    border-top: 2px solid var(--color-teal);
}

.aussom-footer .footer-logo {
    height: 32px;
    width: auto;
    margin-bottom: 0.75rem;
}

.aussom-footer .footer-tagline {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 0;
}

.aussom-footer .footer-col-heading {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.40);
    margin-bottom: 0.85rem;
}

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

.aussom-footer ul li {
    margin-bottom: 0.45rem;
}

.aussom-footer a {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.15s ease;
}

.aussom-footer a:hover {
    color: var(--color-teal);
    text-decoration: none;
}

.aussom-footer .footer-divider {
    border-color: rgba(255, 255, 255, 0.10);
    margin: 2.5rem 0 1.5rem;
}

.aussom-footer .footer-copy {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.30);
    text-align: center;
}

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */
.text-teal  { color: var(--color-teal) !important; }
.text-muted-light { color: rgba(255,255,255,0.60); }

.aussom-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-teal), transparent);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Aussom Highlighter Code Block
   -------------------------------------------------------------------------- */

/* Hidden code store (play button reads raw code from here) */
.aus-code-store {
    display: none;
}

/* Override Highlighter dark-theme chrome to match site palette */
.aus-highlighter {
    background: var(--color-slate) !important;
    border-radius: 0 !important;
    border: none !important;
    overflow: hidden;
}

.aus-header {
    background: rgba(0, 0, 0, 0.30) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    padding: 0.55rem 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

/* Three-dot editor chrome decoration */
.aus-header::before {
    content: "\25CF \25CF \25CF";
    font-size: 0.5rem;
    letter-spacing: 0.25rem;
    color: rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
}

.aus-lang-label {
    font-family: var(--font-mono) !important;
    font-size: 0.72rem !important;
    color: var(--color-teal) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
}

.aus-pre {
    background: var(--color-slate) !important;
    margin: 0 !important;
    padding: 1.5rem 2rem !important;
    font-family: var(--font-mono) !important;
    font-size: 0.88rem !important;
    line-height: 1.75 !important;
    overflow-x: auto;
    tab-size: 4;
}

/* Footer bar containing the "Try in Playground" button */
.aus-play-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0.45rem 1.25rem 0.6rem;
    background: rgba(0, 0, 0, 0.30);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* "Try in Playground" button */
.aus-play-btn {
    display: inline-block;
    background: transparent;
    border: 1px solid var(--color-teal);
    color: var(--color-teal);
    border-radius: 4px;
    padding: 0.2rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    user-select: none;
    white-space: nowrap;
}

.aus-play-btn:hover {
    background-color: var(--color-teal);
    color: var(--color-white);
}

/* Outer wrapper giving the block its border and rounded corners */
[data-testid="shiki-wrapper"] {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------------------
   Responsive Adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .aussom-hero {
        padding: 72px 0 60px;
    }

    .aussom-hero h1 {
        font-size: 2rem;
    }

    .aussom-hero .hero-lead {
        font-size: 1.05rem;
    }

    .hero-buttons,
    .get-started-buttons {
        flex-direction: column;
        align-items: center;
    }

    .section-heading {
        font-size: 1.6rem;
    }
}


/* ==========================================================================
   Docs Hub & Product Pages
   ========================================================================== */

/* Docs hero - reusable dark hero for docs/download pages */
.docs-hero {
    background-color: var(--color-navy);
    color: var(--color-white);
    padding: 72px 0 60px;
    text-align: center;
}

.docs-hero-compact {
    padding: 48px 0 40px;
}

.docs-hero-heading {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

.product-hero-icon {
    height: 56px;
    width: auto;
}

/* Product cards on the docs hub */
.product-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    min-height: 180px;
}

.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.product-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.product-card-link:hover {
    color: inherit;
}

.product-card-icon {
    height: 48px;
    width: auto;
    margin-bottom: 12px;
}


/* ==========================================================================
   Doc Sidebar
   ========================================================================== */

.doc-sidebar {
    padding: 16px 0;
}

.doc-sidebar-heading {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-gray-mid);
    margin-bottom: 8px;
    padding-left: 12px;
}

.doc-sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.doc-sidebar-list li {
    margin: 0;
}

.doc-sidebar-link {
    display: block;
    padding: 5px 12px;
    font-size: 0.88rem;
    color: var(--color-text-dark);
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.12s ease;
}

.doc-sidebar-link:hover {
    background-color: rgba(26, 171, 171, 0.08);
    color: var(--color-teal-dark);
}

.doc-sidebar-link.active {
    background-color: rgba(26, 171, 171, 0.12);
    color: var(--color-teal);
    font-weight: 600;
}

.doc-sidebar-col {
    border-right: 1px solid var(--bs-border-color, #dee2e6);
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    position: sticky;
    top: 80px;
}

/* Collapsible API sub-group */
.doc-sidebar-details {
    margin: 0;
}

.doc-sidebar-summary {
    cursor: pointer;
    display: block;
    padding: 5px 12px;
    font-size: 0.88rem;
    color: var(--color-text-dark);
    border-radius: 4px;
    list-style: none;
    user-select: none;
    transition: background-color 0.12s ease;
}

.doc-sidebar-summary::-webkit-details-marker {
    display: none;
}

.doc-sidebar-summary::before {
    content: "\25B8";
    display: inline-block;
    width: 0.9em;
    margin-right: 2px;
    font-size: 0.75em;
    color: var(--color-gray-mid);
    transition: transform 0.12s ease;
}

.doc-sidebar-details[open] > .doc-sidebar-summary::before {
    transform: rotate(90deg);
}

.doc-sidebar-summary:hover {
    background-color: rgba(26, 171, 171, 0.08);
    color: var(--color-teal-dark);
}

.doc-sidebar-sublist {
    padding-left: 14px;
    margin: 0 0 4px 0;
    border-left: 1px solid var(--bs-border-color, #dee2e6);
}


/* ==========================================================================
   Search Bar
   ========================================================================== */

.search-bar {
    position: relative;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: var(--radius);
    overflow: hidden;
}

.search-scope-tag {
    display: inline-block;
    background-color: var(--color-teal);
    color: var(--color-white);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 10px;
    margin-left: 8px;
    border-radius: 3px;
    white-space: nowrap;
}

.search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--color-white);
    font-size: 1rem;
    padding: 10px 14px;
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.search-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--color-white);
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    max-height: 400px;
    overflow-y: auto;
}

.search-result-item {
    display: block;
    padding: 10px 14px;
    text-decoration: none;
    text-align: left;
    color: var(--color-text-dark);
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.1s ease;
}

.search-result-item:hover {
    background-color: rgba(26, 171, 171, 0.06);
    color: var(--color-teal-dark);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-tag {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-teal);
    background: rgba(26, 171, 171, 0.10);
    padding: 2px 8px;
    border-radius: 3px;
    white-space: nowrap;
    margin-left: 8px;
}

.search-result-snippet {
    width: 100%;
    font-size: 0.82rem;
    color: #6c757d;
    margin-top: 2px;
    line-height: 1.4;
    max-height: 2.8em;
    overflow: hidden;
    text-align: left;
}

.search-result-snippet b {
    color: var(--color-teal);
    font-weight: 600;
}


/* ==========================================================================
   Doc Content (viewer)
   ========================================================================== */

.doc-page-section {
    min-height: calc(100vh - 300px);
    padding-top: 0;
    padding-bottom: 48px;
}

.doc-content {
    padding: 24px 32px;
    font-size: 0.95rem;
    line-height: 1.7;
}

.doc-content h1 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #dee2e6;
}

.doc-content h2 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: var(--color-teal-dark);
}

.doc-content h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.doc-content h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

/* Block code (`<pre><code>...</code></pre>`) in any markdown-
 * rendered region. overflow-x: auto keeps long source lines from
 * pushing the page wider than the viewport - the pre scrolls
 * internally instead. Without this, the about page's CLI
 * examples grow the body past 700px on a 320-360px phone. */
.doc-content pre,
.apac-about pre {
    background-color: var(--color-slate);
    color: #cdd3de;
    padding: 16px;
    border-radius: var(--radius);
    overflow-x: auto;
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 1rem 0;
}

/* Inline `code` in any markdown-rendered region: cream background
 * with teal-dark text. Scoped to .doc-content (package + doc page)
 * and .apac-about (landing page about copy) so the effect is only
 * inside rendered markdown, never in nav, hero, footer chrome. */
.doc-content code,
.apac-about code {
    background-color: var(--color-cream);
    color: var(--color-teal-dark);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.88em;
}

/* Block `<pre><code>` inherits the pre's own background, so the
 * inline-code styling above must be neutralised inside <pre>. */
.doc-content pre code,
.apac-about pre code {
    background: none;
    color: inherit;
    padding: 0;
}

.doc-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.doc-content th,
.doc-content td {
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    text-align: left;
}

.doc-content th {
    background-color: #f8f9fa;
    font-weight: 600;
}

.doc-content blockquote {
    border-left: none;
    padding: 0 0 0 4px;
    margin: 0.25rem 0 0.5rem 0;
    color: var(--color-text-dark);
    background-color: transparent;
    border-radius: 0;
}

.doc-content blockquote p {
    margin: 0;
    line-height: 1.6;
}

.doc-content ul,
.doc-content ol {
    padding-left: 24px;
}

.doc-content li {
    margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   API Doc Styles (Rust-inspired clean layout)
   -------------------------------------------------------------------------- */

/* Method list: each <li> is a method entry */
.doc-content h4 + ul {
    list-style: none;
    padding-left: 0;
}

.doc-content h4 + ul > li {
    margin-bottom: 0;
    padding: 20px 0 20px 0;
    border-bottom: 1px solid #e8e8e8;
}

.doc-content h4 + ul > li:last-child {
    border-bottom: none;
}

/* Method signature line */
.doc-content h4 + ul > li > p:first-child {
    font-family: var(--font-mono);
    font-size: 0.92rem;
    background-color: #f5f6f8;
    padding: 8px 12px;
    border-radius: var(--radius);
    border-left: 3px solid var(--color-teal);
    margin-bottom: 0.4rem;
}

/* @p / @r annotation sub-list */
.doc-content h4 + ul > li > ul {
    list-style: none;
    padding-left: 12px;
    margin-top: 0.4rem;
    margin-bottom: 0;
    font-size: 0.88rem;
    color: var(--color-gray-mid);
}

.doc-content h4 + ul > li > ul > li {
    margin-bottom: 2px;
    padding: 2px 0;
}

/* Members section: keep simple */
.doc-content h4 + ul > li > ul > li strong {
    color: var(--color-teal-dark);
}


/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.doc-breadcrumb {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    font-size: 0.85rem;
}


/* ==========================================================================
   Download Cards
   ========================================================================== */

.download-card {
    background-color: var(--color-white);
    border: 1px solid #e0e3ea;
    border-top: 4px solid var(--color-teal);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 2rem 1.75rem;
}

/* Product feature list on product pages */
.product-feature-list {
    padding-left: 20px;
    margin-top: 0.75rem;
}

.product-feature-list li {
    line-height: 1.6;
}


/* ==========================================================================
   Responsive: Docs pages
   ========================================================================== */

@media (max-width: 991px) {
    .doc-sidebar-col {
        max-height: none;
        position: static;
        border-right: none;
        border-bottom: 1px solid #dee2e6;
    }

    .doc-content {
        padding: 16px;
    }

    .docs-hero-heading {
        font-size: 1.8rem;
    }

    .product-hero-icon {
        height: 40px;
    }
}

/* ===================================================================
   apac-specific additions
   =================================================================== */

/* Top nav - matches .aussom-navbar on the aussom site: navy
 * background, 2px teal bottom border, brand text + 36px icon on
 * the left. Uses the .navbar / .container-fluid baseline from
 * earlier in this stylesheet so the pure-CSS hamburger toggle
 * (checkbox + label + sibling-combinator) just works on mobile. */
.apac-nav {
    background-color: var(--color-navy) !important;
    border-bottom: 2px solid var(--color-teal);
    padding: 0.6rem 0;
    color: var(--color-white);
}
.apac-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-white);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.03em;
    text-decoration: none;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}
.apac-brand:hover {
    color: var(--color-teal);
    text-decoration: none;
}
.apac-brand img { height: 36px; width: auto; }

/* Hamburger toggle - inherit position from the .navbar baseline,
 * tint to match apac chrome. The toggler is hidden at lg+ by the
 * .navbar-collapse media query so this only paints on mobile. */
.apac-nav .navbar-toggler {
    margin-left: auto;
    border-color: rgba(255, 255, 255, 0.25);
}

/* Right-side group: Aussom external link + search form. Inline
 * on desktop, stacked vertically when the hamburger expands the
 * collapse on mobile. */
.apac-nav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}
@media (min-width: 992px) {
    .apac-nav-right { margin-left: auto; }
}
@media (max-width: 991.98px) {
    .apac-nav-right {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 0.5rem 0;
    }
    /* Let the search input shrink on narrow viewports instead of
     * blowing out the page width. */
    .apac-nav-right .apac-search-form input[type="text"] {
        min-width: 0;
        width: 100%;
    }
}
.apac-nav-link {
    color: rgba(255, 255, 255, 0.80);
    text-decoration: none;
    font-weight: 500;
    padding: 0.4rem 1rem;
    transition: color 150ms ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.apac-nav-link:hover { color: var(--color-teal); }
.apac-nav-link-icon {
    height: 18px;
    width: 18px;
}

/* Search form (top nav variant + hero variant) */
.apac-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
}
.apac-search-form .search-icon { height: 18px; width: 18px; }
.apac-search-form input[type="text"] {
    padding: 6px 10px;
    border: 1px solid var(--color-gray-mid);
    border-radius: 4px;
    background-color: var(--color-white);
    color: var(--color-text-dark);
    min-width: 240px;
}
.apac-search-form button {
    padding: 6px 14px;
    background-color: var(--color-teal);
    color: var(--color-white);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 150ms ease;
}
.apac-search-form button:hover { background-color: var(--color-teal-dark); }

/* Hero (landing only) - matches .aussom-hero on the aussom site:
 * navy background with a subtle teal radial gradient, large
 * "APAC" word mark with the teal-to-gold accent treatment used
 * for "Write once." on aussom-lang.com. */
.apac-hero {
    background-color: var(--color-navy);
    background-image: radial-gradient(ellipse at 70% 50%, rgba(26, 171, 171, 0.12) 0%, transparent 60%);
    color: var(--color-white);
    padding: 100px 0 90px;
    text-align: center;
}
.apac-hero img.apac-hero-icon {
    height: 96px;
    width: 96px;
    margin-bottom: 16px;
}
.apac-hero h1 {
    margin: 0 0 1.25rem;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--color-white);
}
.apac-hero h1 .apac-hero-accent {
    background: linear-gradient(90deg, var(--color-teal), var(--color-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.apac-hero .apac-hero-subtitle {
    margin: 0;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.75);
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}

/* About copy section (rendered markdown). max-width matches
 * .apac-list-section so the about copy lines up with the
 * "Recently published" list below it. */
.apac-about {
    max-width: 1000px;
    margin: 0 auto;
    padding: 32px 16px;
}
@media (min-width: 768px) {
    .apac-about { padding: 48px 24px; }
}

/* Recently published + search results list. Mobile-first padding
 * so cards aren't pushed to a tiny ~270px column on a 320px phone. */
.apac-list-section {
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px 16px;
}
@media (min-width: 768px) {
    .apac-list-section { padding: 32px 24px; }
}
.apac-list-section h2 {
    margin: 0 0 24px;
}
.apac-card {
    display: block;
    padding: 16px 20px;
    margin-bottom: 12px;
    border: 1px solid var(--color-gray-light);
    border-radius: 6px;
    color: var(--color-text-dark);
    text-decoration: none;
    background-color: var(--color-white);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.apac-card:hover {
    border-color: var(--color-teal);
    color: var(--color-text-dark);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.apac-card-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    /* Allow name/version/type to wrap onto multiple rows on narrow
     * viewports instead of forcing a single line that would push
     * the type pill off the right edge. */
    flex-wrap: wrap;
}
.apac-card-name { word-break: break-word; }
.apac-card-name { font-weight: 700; font-size: 1.125rem; }
.apac-card-version { color: var(--color-text-muted); font-size: 0.95rem; }
.apac-card-type {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 4px;
    background-color: var(--color-gray-light);
    color: var(--color-text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.apac-card-desc {
    margin: 6px 0 4px;
    color: var(--color-text-dark);
}
.apac-card-date { color: var(--color-text-muted); font-size: 0.85rem; }

/* Search-page header strip. Mobile-first padding; "Search results
 * for X" h1 can wrap on long queries. */
.apac-search-header {
    background-color: var(--color-gray-light);
    padding: 20px 16px;
}
@media (min-width: 768px) {
    .apac-search-header { padding: 32px 24px; }
}
.apac-search-header-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.apac-search-header h1 {
    margin: 0;
    font-size: 1.75rem;
}
.apac-search-header img { height: 28px; width: 28px; }

/* No results line */
.apac-no-results {
    padding: 16px 0;
    color: var(--color-text-muted);
}

/* Pagination strip */
.apac-pagination {
    margin-top: 24px;
    text-align: center;
}
.apac-pagination a {
    display: inline-block;
    padding: 6px 14px;
    margin: 0 8px;
    border: 1px solid var(--color-teal);
    border-radius: 4px;
    color: var(--color-teal);
    text-decoration: none;
}
.apac-pagination a:hover {
    background-color: var(--color-teal);
    color: var(--color-white);
}

/* Package view header strip. Mobile-first: title stacks above
 * the download button by default; at >= 768px the two go side
 * by side with the button right-aligned. Title can shrink to its
 * min-content; long package names wrap on the version span so a
 * "really_long_package_name 1.0.0" doesn't push the button off
 * the right edge. */
.apac-pkg-header {
    background-color: var(--color-gray-light);
    padding: 20px 16px;
}
.apac-pkg-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}
.apac-pkg-header h1 {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.3;
    word-break: break-word;
}
.apac-pkg-header .apac-pkg-version { color: var(--color-text-muted); font-weight: 400; }
.apac-pkg-header .apac-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background-color: var(--color-teal);
    color: var(--color-white);
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 150ms ease;
    /* "Download zip" must read as one phrase - never split across
     * lines when the header gets scrunched. */
    white-space: nowrap;
}
.apac-pkg-header .apac-download-btn:hover { background-color: var(--color-teal-dark); color: var(--color-white); }
.apac-pkg-header .apac-download-btn img { height: 18px; width: 18px; }
@media (min-width: 768px) {
    .apac-pkg-header { padding: 24px; }
    .apac-pkg-header-inner {
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }
    .apac-pkg-header h1 { font-size: 1.75rem; }
    .apac-pkg-header .apac-download-btn {
        margin-left: auto;
        padding: 8px 16px;
    }
}

/* Package body: mobile-first single column with tighter padding
 * so the rendered markdown has room to breathe on a 320-360px
 * viewport. Sidebar stacks above content. At >= 768px the layout
 * promotes to the two-column grid with the sidebar on the left. */
.apac-pkg-body {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
}
@media (min-width: 768px) {
    .apac-pkg-body {
        padding: 24px;
        display: grid;
        /* minmax(0, 1fr) - not 1fr - so the content track does
         * not grow with its min-content. Without this, a wide
         * .aus-highlighter / .aus-pre / table / image inside the
         * rendered markdown forces the track wider than the
         * viewport, blows out the grid, and gives the page a
         * horizontal scrollbar even on desktop. */
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 32px;
    }
}

/* Aussom-Script's CodeView highlighter replaces server-rendered
 * <pre> blocks at runtime. It does not inherit the markdown
 * <pre>'s overflow-x: auto, so without this rule a long source
 * line forces the entire .doc-content / .apac-about wider than
 * the viewport. Containing it lets long lines scroll inside the
 * highlighter instead. */
.doc-content .aus-highlighter,
.apac-about .aus-highlighter,
.doc-content .aus-pre,
.apac-about .aus-pre {
    max-width: 100%;
    overflow-x: auto;
}
.apac-sidebar h3 {
    margin: 16px 0 8px;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
}
.apac-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}
.apac-sidebar li { margin: 4px 0; }
.apac-sidebar li.indent { margin-left: 16px; }
.apac-sidebar a { text-decoration: none; }
.apac-sidebar .apac-home-link {
    display: block;
    padding: 8px 0;
    font-weight: 700;
    border-bottom: 1px solid var(--color-gray-light);
    margin-bottom: 12px;
}
.apac-sidebar .apac-latest-marker {
    color: var(--color-teal);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 6px;
}

/* Footer */
.apac-footer {
    text-align: center;
    padding: 24px;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}