/**
 * Monochrome Editor Bridge
 * -------------------------------------------------------------------------
 * Core WordPress blocks output their own class names (.wp-block-button,
 * .wp-block-table, .wp-block-quote, etc.) that know nothing about the
 * Monochrome Framework. This file is the translation layer: it takes what
 * WordPress generates and repaints it using the framework's own tokens and
 * component patterns, so a page built entirely in the block editor looks
 * the same as the framework's own demo.html.
 *
 * Loaded after framework.css, both on the front end and inside the editor
 * (see functions.php). Nothing in here invents new visual language, it
 * only redirects WordPress's default block output to existing framework
 * tokens (--color-*, --space-*, --radius-*, --fs-*, --shadow-*).
 */


/* ==========================================================================
   1. BUTTONS  (core/button)
   Bridges to .btn / .btn-primary / .btn-outline
   ========================================================================== */

.wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.5rem 1.1rem;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    background-color: var(--color-action);
    color: var(--color-text-inverse);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
}
.wp-block-button__link:hover {
    background-color: var(--color-action-hover);
    color: var(--color-text-inverse);
}

/* Core's "Outline" button style */
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    color: var(--color-action);
    border-color: var(--color-action);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: var(--color-surface-alt);
    color: var(--color-text);
}

/* Core's "Fill" is the default above; map "Secondary"-style outline variant
   editors sometimes create via custom color picks to the framework's
   secondary look when the border color equals gray-200 */
.wp-block-buttons { gap: var(--space-3); }


/* ==========================================================================
   2. QUOTE & PULLQUOTE  (core/quote, core/pullquote)
   theme.json already sets border/color/font-style for core/quote; this
   fills in spacing and the pullquote variant, which theme.json can't reach.
   ========================================================================== */

.wp-block-quote {
    padding-left: var(--space-4);
    margin-bottom: var(--space-5);
}
.wp-block-quote cite,
.wp-block-quote__citation {
    display: block;
    margin-top: var(--space-2);
    font-style: normal;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.wp-block-pullquote {
    text-align: center;
    padding: var(--space-6) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.wp-block-pullquote blockquote {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    color: var(--color-text);
}
.wp-block-pullquote cite {
    display: block;
    margin-top: var(--space-3);
    font-size: var(--fs-sm);
    font-style: normal;
    color: var(--color-text-muted);
}


/* ==========================================================================
   3. TABLE  (core/table)
   Bridges to .table

   Hardened with !important on the visual properties below. WordPress ships
   its own default table CSS as part of wp-block-library(-theme), and
   depending on exact plugin/theme load order that stylesheet can print
   after this one, at comparable specificity, and silently win individual
   properties. This must not be left to chance, so every property that
   defines the framework's actual table look is pinned explicitly. This is
   the theme's own component design, it always wins here, full stop.
   ========================================================================== */

.wp-block-table {
    margin-bottom: var(--space-5) !important;
}
.wp-block-table table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-family: var(--font-sans) !important;
    font-size: var(--fs-base) !important;
    color: var(--color-text) !important;
    background-color: var(--color-bg) !important;
}
.wp-block-table th,
.wp-block-table td {
    padding: var(--space-3) var(--space-4) !important;
    border: none !important;
    border-bottom: 1px solid var(--color-border) !important;
    text-align: left !important;
    vertical-align: middle !important;
}
.wp-block-table th {
    font-weight: var(--fw-semibold) !important;
    color: var(--color-text) !important;
    background-color: var(--color-surface) !important;
}
.wp-block-table tbody tr:last-child td,
.wp-block-table tbody tr:last-child th {
    border-bottom: none !important;
}

/* Core's "Stripes" table style variation, bridged to the framework's
   .table-striped look */
.wp-block-table.is-style-stripes table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) td,
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) th {
    background-color: var(--color-surface) !important;
}


/* ==========================================================================
   4. LISTS  (core/list)
   ========================================================================== */

.wp-block-list {
    padding-left: 1.25rem;
    margin-bottom: var(--space-4);
}
.wp-block-list li { margin-bottom: var(--space-2); }


/* ==========================================================================
   5. SEPARATOR  (core/separator)
   theme.json sets the color token; this sets the framework's actual
   thickness/margin pattern (see framework.css hr rule) instead of core's
   thicker default.
   ========================================================================== */

.wp-block-separator {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-5) 0;
    opacity: 1;
}
.wp-block-separator.is-style-wide { width: 100%; }
.wp-block-separator.is-style-dots {
    border: none;
    text-align: center;
    line-height: 1;
}
.wp-block-separator.is-style-dots::before {
    color: var(--color-text-muted);
}


/* ==========================================================================
   6. CODE & PREFORMATTED  (core/code, core/preformatted)
   Bridges to framework's <code>/<pre> tokens (see framework.css section 3)
   ========================================================================== */

.wp-block-code,
.wp-block-preformatted {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    overflow-x: auto;
}
.wp-block-code code { background: none; border: none; padding: 0; }


/* ==========================================================================
   7. IMAGE / GALLERY CAPTIONS  (core/image, core/gallery)
   ========================================================================== */

.wp-block-image figcaption,
.wp-block-gallery figcaption,
.wp-block-embed figcaption {
    margin-top: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    text-align: center;
}
.wp-block-image img,
.wp-block-gallery img {
    border-radius: var(--radius-md);
}
.wp-block-gallery {
    gap: var(--space-3);
}


/* ==========================================================================
   8. GROUP / COVER used as a card  (core/group, core/cover)
   Editors can add the "card" class in the block's Advanced > Additional
   CSS class(es) field to opt a Group block into the framework's card look.
   ========================================================================== */

.wp-block-group.card,
.wp-block-cover.card {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.wp-block-group.card > .wp-block-group__inner-container,
.wp-block-group.card {
    padding: var(--space-5);
}


/* ==========================================================================
   9. SEARCH BLOCK  (core/search)
   Bridges to .form-control / .btn
   ========================================================================== */

.wp-block-search__input {
    font: inherit;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    color: var(--color-text);
}
.wp-block-search__input:focus {
    outline: none;
    border-color: var(--gray-500);
    box-shadow: 0 0 0 3px var(--color-action-muted);
}
.wp-block-search__button {
    padding: 0.5rem 1.1rem;
    font-weight: var(--fw-medium);
    border-radius: var(--radius-md);
    background-color: var(--color-action);
    color: var(--color-text-inverse);
    border: none;
}
.wp-block-search__button:hover { background-color: var(--color-action-hover); }


/* ==========================================================================
   10. COMMENT FORM  (core/post-comments-form and legacy comment form)
   Bridges to .form-control / .form-check / .btn
   ========================================================================== */

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.wp-block-post-comments-form input[type="text"],
.wp-block-post-comments-form input[type="email"],
.wp-block-post-comments-form input[type="url"],
.wp-block-post-comments-form textarea {
    width: 100%;
    font: inherit;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    color: var(--color-text);
    margin-bottom: var(--space-3);
}
.comment-form input:focus,
.comment-form textarea:focus,
.wp-block-post-comments-form input:focus,
.wp-block-post-comments-form textarea:focus {
    outline: none;
    border-color: var(--gray-500);
    box-shadow: 0 0 0 3px var(--color-action-muted);
}
.comment-form input[type="submit"],
.wp-block-post-comments-form input[type="submit"] {
    display: inline-flex;
    padding: 0.5rem 1.1rem;
    font-weight: var(--fw-medium);
    border-radius: var(--radius-md);
    background-color: var(--color-action);
    color: var(--color-text-inverse);
    border: none;
    cursor: pointer;
}
.comment-form input[type="submit"]:hover,
.wp-block-post-comments-form input[type="submit"]:hover {
    background-color: var(--color-action-hover);
}


/* ==========================================================================
   11. FILE BLOCK  (core/file)
   Bridges the download button to .btn-outline
   ========================================================================== */

.wp-block-file__button {
    display: inline-flex;
    padding: 0.4rem 0.9rem;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-action);
    color: var(--color-action);
    text-decoration: none;
    background: none;
}
.wp-block-file__button:hover {
    background-color: var(--color-surface-alt);
}


/* ==========================================================================
   12. NAVIGATION BLOCK  (core/navigation)
   Bridges the site's primary nav to .navbar-nav link behavior
   ========================================================================== */

.wp-block-navigation-item__content {
    color: var(--color-text);
    text-decoration: none;
    font-weight: var(--fw-medium);
}
.wp-block-navigation-item__content:hover {
    color: var(--color-action-hover);
}
.wp-block-navigation__submenu-container {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    box-shadow: var(--shadow-md);
}


/* ==========================================================================
   13. TAGS / CATEGORIES  (core/post-terms)
   Bridges to .badge-outline
   ========================================================================== */

.wp-block-post-terms a {
    display: inline-flex;
    padding: 0.2rem 0.65rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
    text-decoration: none;
    margin: 0 var(--space-1) var(--space-1) 0;
}
.wp-block-post-terms a:hover {
    border-color: var(--gray-400);
    color: var(--color-text);
}


/* ==========================================================================
   14. EDITOR-ONLY NICETIES
   Keeps the block editor canvas visually consistent with the front end,
   including the 960px content width from theme.json.
   ========================================================================== */

.editor-styles-wrapper {
    font-family: var(--font-sans);
    color: var(--color-text);
    background-color: var(--color-bg);
}


/* ==========================================================================
   15. FIXED-POSITION OVERLAYS vs. WORDPRESS'S CONSTRAINED LAYOUT WIDTH

   THE BUG: opening a modal only darkened a 960px-wide column in the middle
   of the screen instead of the full viewport.

   THE CAUSE: WordPress's block-theme layout system applies max-width plus
   margin-inline:auto to every DIRECT CHILD of the "constrained" content
   area (the same mechanism that gives the page its 960px default width
   from theme.json) unless that child is marked alignwide/alignfull. A
   Custom HTML block renders its markup with no extra wrapper element, so
   anything written as a top-level element inside one, such as
   <div class="modal-backdrop">, becomes a direct child of that constrained
   container and inherits the very same 960px max-width and centering
   meant for paragraphs and images.

   Normally that's invisible for a static block, but .modal-backdrop and
   .modal both use position:fixed with inset:0 (all four sides pinned to
   the viewport). When a max-width and inset are BOTH present on the same
   element, the browser lets max-width win and centers the remaining box
   with the auto margins, exactly matching the "the dark overlay is a
   961px-ish column in the middle of the page" symptom.

   THE FIX: unconditionally reset max-width and the inline margins on every
   fixed-position overlay component that must span the full viewport.
   !important is used deliberately here, not as a general habit: this is a
   narrow, fully enumerated list of overlay components, and WordPress's own
   generated selector for this behavior is auto-numbered per block instance
   (e.g. .wp-container-core-group-is-layout-7), so its exact specificity
   isn't something a theme can reliably out-rank through normal cascade
   order alone. This is the correct, permanent fix, not a workaround, and
   it will keep working even if a future WordPress core update changes
   exactly how that per-instance class is generated.
   ========================================================================== */

.modal,
.modal-backdrop,
.toast-container {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* The drawer already has its own fixed width (min(360px, 90vw)) and is
   pinned to one edge, so only max-width/margin need resetting here too,
   its actual width is untouched. */
.drawer {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ==========================================================================
   16. EARLIER HAMBURGER BREAKPOINT FOR THE NAVIGATION BLOCK

   The Navigation block's "Overlay Menu" setting only offers Mobile /
   Always / Never in the editor UI. "Mobile" doesn't mean "whenever it
   doesn't fit", it means a single hardcoded breakpoint baked into
   WordPress core's own CSS: 600px, regardless of theme, regardless of how
   many nav items you have or how wide your logo/site title is. If items
   start crowding or wrapping before the viewport actually reaches 600px,
   that's why, WordPress genuinely has no way to detect it needs the
   hamburger any earlier. There is no theme.json setting or block attribute
   for this; the only override path is CSS, which is what this does.

   This does NOT change the block's own "Overlay Menu: Mobile" setting,
   and does NOT touch the Navigation block's JS (the click-to-open/close
   behavior is pure CSS visibility toggling driven by the .is-menu-open
   class, so overriding the breakpoint here can't break that toggle).

   HOW IT WORKS: WordPress's own default CSS shows the hamburger button
   and hides the inline menu row below 600px, then flips both above
   600px. The first rule below forces hamburger-mode unconditionally at
   EVERY width (this also harmlessly covers the sub-600px range WordPress
   already handled correctly). The single media query then flips back to
   the normal inline menu, but at OUR chosen width instead of WordPress's
   600px. !important is used on both sides deliberately, the exact same
   reasoning as the table fix earlier: this needs to win regardless of
   whether WordPress core's own block-library CSS happens to print before
   or after this stylesheet.

   TO CHANGE THE BREAKPOINT: edit the single "900px" value below to
   whatever width your nav actually needs. Test by slowly resizing a
   browser window and watching for the exact point items start crowding,
   then set the number a little above that.
   ========================================================================== */

.wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
}
.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none !important;
}

@media (min-width: 900px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none !important;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: flex !important;
    }
}


/* ==========================================================================
   17. STICKY FOOTER (footer pinned to viewport bottom on short pages)

   On a page/post/archive with little content, the footer would otherwise
   render right after the content ends, wherever that happens to be,
   leaving a stretch of blank page below it instead of sitting at the
   bottom edge of the screen.

   Every WordPress block theme template is unconditionally wrapped in
   <div class="wp-site-blocks">, WordPress's own documentation is explicit
   that this wrapper cannot be removed, which makes it a safe, permanent
   hook for this rather than something that could vanish in an update.

   THE TECHNIQUE: make .wp-site-blocks a full-viewport-height flex column,
   then push the footer down with margin-top:auto instead of growing the
   content area to fill space. This is deliberately the simpler of the two
   common approaches: it works regardless of how the content area itself
   is structured (a single <main>, several sibling blocks, whatever a
   given template does), since it doesn't need to identify or target that
   content wrapper at all, only the footer.

   Twenty Twenty-Five's header template part renders with tagName:"header"
   (an actual <header> element), and its footer template part follows the
   same convention, rendering as an actual <footer> element. The child
   combinator (.wp-site-blocks > footer) intentionally targets only that
   top-level template part, not any other <footer> that might appear
   deeper in the page (a single post's own entry-footer, for example).

   If this doesn't visibly work: inspect the real footer element on the
   live site and confirm it's actually an immediate child of
   .wp-site-blocks and genuinely a <footer> tag, then adjust the selector
   below to match whatever it actually is.
   ========================================================================== */

.wp-site-blocks {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh; /* accounts for mobile browser chrome; ignored by browsers that don't support dvh, 100vh above still applies for them */
}

.wp-site-blocks > footer {
    margin-top: auto;
}