/* LD Developer — Base theme styles not covered by theme.json */

/* Sticky footer layout */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.wp-site-blocks {
    flex-grow: 1;
}

/* ---------------------------------------------------------------
   Full-bleed bands sit flush

   Core lays out the flow containers with
   `:where(.is-layout-flow) > * { margin-block-start: 24px }`. Between two
   ordinary blocks that is the right rhythm, but between two full-width
   coloured sections it shows up as a 24px strip of page background — a
   white line between the hero and the band under it.

   Every section pattern carries its own top and bottom padding, so the gap
   between them should be nothing. `:where()` contributes no specificity, so
   a single class selector is enough to override it.
   --------------------------------------------------------------- */
:where(.is-layout-flow) > .alignfull,
:where(.is-layout-constrained) > .alignfull,
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer {
    margin-block-start: 0;
}

/* Anchor scroll offset for sticky header */
.anchor,
[id] {
    scroll-margin-top: 5em;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Skip to content link */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    padding: 8px 16px;
    background: var(--wp--preset--color--dark, #141414);
    color: #ffffff;
    text-decoration: none;
    border-radius: 0 0 4px 4px;
    transition: top 0.2s ease;
}
.skip-to-content:focus {
    top: 0;
}

/* Header logo sizing.
   A client's logo may be a wide wordmark or a square mark, and the block's
   width attribute alone cannot serve both — a 200px width that suits a
   wordmark makes a square mark 200px tall and triples the header height.
   Pinning height and letting width follow gives every client the same header
   height whatever their logo's aspect ratio.

   `height` must be definite, not `max-height`: an SVG whose file declares
   only a viewBox has no intrinsic size to resolve `width: auto` against, and
   the logo collapses to zero. Verified against this site's circular mark. */
.site-header .wp-block-site-logo img {
    height: var(--ld-header-logo-height, 56px);
    width: auto;
    max-width: 100%;
}

/* Current page in navigation.
   Core emits .current-menu-item (and .current_page_item for the page that is
   an ancestor of the current one), but the theme styled neither, so every nav
   item read identically and the navigation gave no sense of place. Every
   client design so far has wanted a version of this — Northline marks the
   active page in brass across all eight pages.

   Colour comes from a preset rather than a literal so a style variation
   retunes it with everything else. The underline is a separate signal from
   colour: colour alone fails for anyone who cannot distinguish the two hues,
   and on a coloured header the accent may not carry enough contrast on its
   own. `currentColor` on the underline keeps the two in step whatever the
   preset resolves to. */
/* The doubled class is not a typo. Core ships
       .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content
       { color: inherit }
   at specificity 0,3,0 so that nav links follow the Navigation block's own
   colour setting. A sane `.current-menu-item > a` is 0,2,1 and loses to it, and
   `inherit` then resolves to whatever the header is set to — on a header with
   white text the active item silently renders white like every other item, which
   is exactly the defect this rule exists to fix. Matching core's doubling puts
   this at 0,4,0 and wins without resorting to !important. */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.wp-block-navigation .current_page_item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content.wp-block-navigation-item__content {
    color: var(--wp--preset--color--primary);
}

/* Kept separate and unqualified: text-decoration is not in core's inherit rule,
   so it needs no specificity fight, and a custom-link markup variant that misses
   the class above still gets the underline. */
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation .current_page_item > a,
.wp-block-navigation .current-menu-ancestor > a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    text-decoration-color: currentColor;
}

/* Navigation submenu.
   The theme styled nothing here, which left core's defaults: a 200px panel that
   wraps any label longer than about fifteen characters, 6px link padding, and no
   hover state. On the first client site "Bathroom Remodeling" and "Property
   Maintenance" both broke onto two lines.

   Colour is deliberately NOT set here. The Navigation block has its own
   submenu controls (Styles > Submenu & overlay), so a site sets them in the
   editor; a rule here would beat that choice the way the sticky header used to.
   What is set is only what the block cannot express. */
.wp-block-navigation .wp-block-navigation__submenu-container {
    min-width: max-content;
    padding-block: 6px;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding: 10px 20px;
    white-space: nowrap;
}

/* The panel hangs from the right edge of its parent item rather than the left.
   The navigation sits on the right of the header, so a left-anchored panel opens
   towards the page edge and, on the last item before the call-to-action, past it.
   Anchoring right opens it back across the nav, where there is always room. */
.wp-block-navigation .wp-block-navigation__submenu-container {
    left: auto;
    right: 0;
}

/* A submenu nested inside another still opens sideways, so leave those alone —
   only the first level hangs from the navigation bar. */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
    left: 100%;
    right: auto;
}

/* Hover gets a tint as well as the accent colour. Colour alone left the hit area
   ambiguous on a dark panel, where a 12px uppercase label is a small target and
   the change is easy to miss. The tint is mixed from the brand accent rather
   than a flat grey, so it retunes with a style variation like everything else. */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
    color: var(--wp--preset--color--primary);
    background-color: color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent);
}

/* A submenu item for the page you are on gets the same brass treatment as the
   top level, without the underline — the panel is already a tight list. */
.wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content {
    color: var(--wp--preset--color--primary);
    text-decoration: none;
}