/* ══════════════════════════════════════════════════════════
   DOCS SECTION STYLES
   Only loaded on pages using the "Docs" page template.
   ══════════════════════════════════════════════════════════ */

/* ── Sidebar typography ──
   Requires the class 'docs-sidebar' to be added to the
   sidebar column block via Block Settings → Advanced → CSS class
   ────────────────────────────────────────────────────────── */

.docs-sidebar,
.docs-sidebar * {
    font-family: 'Inconsolata', monospace;
}

.docs-sidebar a {
    text-decoration: none;
}

.docs-sidebar a:hover {
    text-decoration: underline;
}

/* ── Sticky scrollable sidebar ──
   Pins below the header and scrolls independently when
   content exceeds the viewport height.
   ────────────────────────────────────────────────────────── */

.docs-sidebar {
    position: sticky;
    top: 100px;                          /* below the sticky header */
    height: calc(100vh - 120px);         /* viewport minus header + breathing room */
    overflow-y: auto;
    align-self: flex-start;             /* required for sticky to work in flex */
    padding-right: 1rem;

    /* Firefox scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

/* Custom scrollbar — subtle, on-brand (WebKit) */
.docs-sidebar::-webkit-scrollbar {
    width: 4px;
}

.docs-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.docs-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

.docs-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ── Mobile: sidebar unsticks and flows normally ── */
@media (max-width: 781px) {
    .docs-sidebar {
        position: static;
        height: auto;
        overflow-y: visible;
        padding-right: 0;
    }
}

/* ══════════════════════════════════════════════════════════
   FLOAT GROUPS
   Allows a WordPress Group block to sit inline within an
   article, with body text wrapping around it naturally.

   Use case: pull quotes, contextual ads, callout boxes.

   Usage: add one of the following CSS classes to the Group
   block via Block Settings → Advanced → Additional CSS class:

       float-left   — group floats to the left, text wraps right
       float-right  — group floats to the right, text wraps left

   The parent element (e.g. the Post Content block) must
   contain the floats. WordPress post content already
   establishes a block formatting context, so no extra
   markup is needed — but if floats ever escape their
   container, add overflow:hidden or a clearfix to the
   relevant wrapper.
   ══════════════════════════════════════════════════════════ */

/* ── Shared float styles ── */
.float-left,
.float-right {
    width: clamp(220px, 36%, 360px);   /* responsive width: never too narrow or too wide */
    margin-bottom: 1.5rem;             /* breathing room below the group */
    clear: none;                       /* allow multiple floats to sit beside each other */
}

/* ── Left-aligned: text wraps on the right ── */
.float-left {
    float: left;
    margin-right: 2rem;
    margin-left: 0;
}

/* ── Right-aligned: text wraps on the left ── */
.float-right {
    float: right;
    margin-left: 2rem;
    margin-right: 0;
}

/* ── Clearfix: ensures the article container always
      expands to contain its floated children ── */
.entry-content::after,
.wp-block-post-content::after {
    content: '';
    display: table;
    clear: both;
}

/* ── Mobile: floats drop out of flow and become full-width ──
      Below the mobile breakpoint the group stacks normally
      so it never squeezes the text column.
   ────────────────────────────────────────────────────────── */
@media (max-width: 781px) {
    .float-left,
    .float-right {
        float: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}