/* ---------------------------------------------------------------------------
   Shared brand foundation: design tokens, plus styling for elements that
   appear on more than one page.

   This file exists because custom.css is linked through @section Styles and so
   loads on the HOME PAGE ONLY -- it carries a global .d-flex override that
   must not leak site-wide. The palette and the service-card rules below were
   stranded inside it, which meant:

     - portfolio.css, which IS linked site-wide, referenced var(--bp-light)
       that was undefined anywhere but the home page, so the rule quietly did
       nothing on /Covers;
     - the Why Choose Us card treatment could not reach the shared
       _HowDoesItWork block on /Covers and /Interiors.

   Both were MOVED here, not duplicated. Linked in _Layout before
   portfolio.css and footer.css so those can resolve these tokens.
   --------------------------------------------------------------------------- */

:root {
    --bp-navy: #1B2A4A;
    --bp-slate: #6C7A94;
    --bp-light: #F4F5F8;
    --bp-body: #555555;
    /* Display face for hero text. Now the same family as the rest of the site,
       so this points at the theme's heading variable rather than restating the
       stack -- one place to change it, in wwwroot/css/fonts.css. The fallback
       after the comma covers the case where fonts.css has not applied. */
    --bp-display-font: var(--heading-font, "Cormorant Garamond", Garamond, Georgia, serif);
}

/* ---------------------------------------------------------------------------
   Shared card treatment for .services__one blocks.

   Used by "Why Choose Us" on the home page and by the shared _HowDoesItWork
   block on /Covers and /Interiors -- which is exactly why it cannot live in
   the home-only stylesheet.
   --------------------------------------------------------------------------- */
/* ---------------- Why Choose Us: equal-height cards ----------------
   "Industry Expertise" has the longest body copy, so its card grew taller
   than the other three and the row stopped lining up along the bottom.
   Bootstrap already stretches the columns to the row height -- it is the
   .single-service card inside each one that was sizing to its own content.
   height:100% resolves against the stretched column, and making the card a
   flex column lets the text block absorb the slack so every card starts and
   ends on the same line. */
/* The column becomes the flex container so its single card stretches to the
   row height. This replaces height:100% on the card, which was wrong: the
   theme also gives .single-service a margin-top of 60px
   (asset/sass/style.css:5202) to make room for the icon tile it pulls up by
   -30px. height:100% resolves against the already-stretched column, so the
   card occupied 100% PLUS that 60px margin and overflowed its column by 60px.

   That overflow is what pushed the cards down over the "View Pricing"
   button on /Covers and /Interiors, where only .pt-50 (50px) separates them.
   The home page hid the symptom because a section-padding block follows it.

   Stretching via flex accounts for the margin, so the card ends exactly at
   the column's bottom edge.

   The :not() matters. Each .services__one block opens with a heading column
   -- <div class="col-10 services__one-title"> holding an h2 and an intro p --
   and [class*="col-"] matches that too. Flexing it laid the h2 and the p out
   as a ROW, so the heading sat on the left with its paragraph beside it on
   the right, on the home page's "Why Choose Us" and on "How Does It Work?"
   wherever _HowDoesItWork renders. Only the card columns want flex. */
.services__one [class*="col-"]:not(.services__one-title) {
    display: flex;
}

.services__one .single-service {
    /* grow to fill the column's width; height comes from the default
       align-items: stretch on the column above */
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* the theme only transitions transform; colour needs to ease too */
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.35s ease,
                background-color 0.35s ease;
}
    /* Hover: the card fills with brand navy and the copy flips to off-white.
       :focus-within mirrors it so keyboard users get the same feedback.
       Accent orange is deliberately untouched -- the brief reserves it for
       the logo icon only. */
    .services__one .single-service:hover,
    .services__one .single-service:focus-within {
        background-color: var(--bp-navy);
        transform: translateY(-10px);
        box-shadow: 0 22px 44px rgba(27, 42, 74, 0.30);
    }
        .services__one .single-service h4,
        .services__one .single-service p {
            transition: color 0.35s ease;
        }
        .services__one .single-service:hover h4,
        .services__one .single-service:focus-within h4,
        .services__one .single-service:hover p,
        .services__one .single-service:focus-within p {
            color: #F2F0EA;
        }
        /* the icon tile inverts so it stays legible on the navy ground */
        .services__one .single-service .services__one-single-service-icon i {
            transition: background-color 0.35s ease, color 0.35s ease,
                        transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
        }
        .services__one .single-service:hover .services__one-single-service-icon i,
        .services__one .single-service:focus-within .services__one-single-service-icon i {
            background-color: #F2F0EA;
            color: var(--bp-navy);
            transform: translateY(-4px) scale(1.06);
        }
@media (prefers-reduced-motion: reduce) {
    .services__one .single-service,
    .services__one .single-service h4,
    .services__one .single-service p,
    .services__one .single-service .services__one-single-service-icon i {
        transition: none;
    }
    .services__one .single-service:hover,
    .services__one .single-service:focus-within {
        transform: none;
    }
}
    /* the copy takes the extra height, not the icon */
    .services__one .single-service .services__one-single-service-content {
        flex: 1 1 auto;
    }

/* ---------------------------------------------------------------------------
   Required-field marker for the Contact form.
   --------------------------------------------------------------------------- */
.bp-form-label {
    display: block;
    margin-bottom: 6px;
    color: var(--bp-navy);
    font-size: 16px;
    line-height: 1.4;
}

.bp-required {
    color: #C0392B;
    /* Asterisk precedes the label text, so the gap belongs on its right. */
    margin-right: 2px;
}

.bp-required-note {
    color: var(--bp-body);
    font-size: 15px;
    margin-bottom: 18px;
}

/* ---------------------------------------------------------------------------
   Horizontal overflow guard.

   The ebook section positions .phone at right: -12%, a deliberate overhang, and
   nothing in the ancestor chain clipped it -- so on a narrow screen that
   overhang gave the whole page a horizontal scrollbar.

   overflow-x: clip rather than hidden: clip does not create a scroll container,
   so it cannot break `position: sticky` on the header the way hidden can, and
   it does not silently become a scrollable box.

   This is a containment rule, not a cure-all. Anything that overflows should
   still be fixed at the source; scrollWidth === clientWidth is the check.
   --------------------------------------------------------------------------- */
html,
body {
    overflow-x: clip;
}