/*
 * Whittier page only.
 *
 * Loaded by lambda_child_enqueue_styles() when is_page_template('Whittier.php'),
 * after partials/css/style.css. The <body> also carries .whittier-page, so scope
 * every rule with it — nothing here may reach the other city pages.
 */

/* ------------------------------------------------------------------ *
 * Hero
 *
 * The shared hero is a yellow band with a cut-out photo in a narrow right
 * column. The Whittier comp instead runs the photo full-bleed behind the
 * whole band, darkens it, and centres white text over it. The markup stays
 * as it is; the right-hand column is dropped and the left one goes full width.
 * ------------------------------------------------------------------ */

/* an inline <style> block ships .head-yl-bg { background-size: 42% auto !important }
   and positions it bottom-right, which is what turns the photo into a small panel */
.whittier-page .head-yl-bg {
    position: relative;
    background-color: #231f20;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.whittier-page .head-yl-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .7);
    pointer-events: none;
}

.whittier-page .head-yl-bg > .container {
    position: relative;
    z-index: 1;
}

/* the photo is the background here, so the right-hand column has nothing to show */
.whittier-page .head-yl-bg .col-3,
.whittier-page .head-yl-bg .col-lg-2 {
    display: none;
}

.whittier-page .head-yl-bg .col-9,
.whittier-page .head-yl-bg .col-lg-8 {
    flex: 0 0 100%;
    max-width: 100%;
}

/* .text-div is a grid capped at 860px and sitting at the left of the column,
   so text-align alone leaves the whole block off-centre on the page */
/* minmax(0, 1fr) pins the grid column to the container instead of letting it
   grow to the widest child — otherwise the 900px wrapper below sizes the column
   and its own max-width:100% resolves against itself, so it stays 900 on a phone */
.whittier-page .head-yl-bg .text-div {
    text-align: center;
    width: 100%;
    max-width: none;
    justify-items: center;
    grid-template-columns: minmax(0, 1fr);
}

/* the parent theme sets h1.NewH1 { color: #000 !important }, so this has to match it */
.whittier-page .head-yl-bg .NewH1,
.whittier-page .head-yl-bg .NewH4,
.whittier-page .head-yl-bg .NewH1 strong,
.whittier-page .head-yl-bg p {
    color: #fff !important;
}

/* comp spacing: 164px above the title, none between title and copy,
   20px before the button, 135px below it. Desktop only — on a phone the comp
   has nothing to say and that much padding just pushes the copy off the fold. */
@media (min-width: 576px) {
    .whittier-page .head-yl-bg {
        padding-top: 164px;
        padding-bottom: 135px;
    }
}

/* the shared stylesheet drops the hero photo under 576px and relies on the
   inline <img> in the right-hand column, which this page hides — so the photo
   goes back via the custom property Whittier.php sets alongside it */
@media (max-width: 575px) {
    .whittier-page .head-yl-bg {
        background-image: var(--whittier-hero-bg) !important;
    }
}

.whittier-page .head-yl-bg .NewH1 {
    margin-bottom: 0;
}

/* .text-div and its inner wrapper are grids with a 10px row-gap, and the empty
   NewH4 takes a row of its own — together that is the 20px the comp does not have */
.whittier-page .head-yl-bg .text-div,
.whittier-page .head-yl-bg .text-div > div {
    row-gap: 0;
}

.whittier-page .head-yl-bg .text-div .NewH4:empty {
    display: none;
}

/* comp: 20px between the copy and the button, and 37px of side padding on the pill */
.whittier-page .head-yl-bg .custom-button {
    margin-top: 20px;
    padding-left: 37px;
    padding-right: 37px;
}

/* The comp's 900px measure has to go on the inner wrapper, not on the paragraph.
   That wrapper is a grid capped at 784px by the theme; widening only the
   paragraph made its grid track 900 inside a 784 box, so the copy and the button
   spilled ~58px to the right while the h1 — a child of .text-div, not of the
   wrapper — stayed centred. Below ~1200px that misalignment is plainly visible. */
.whittier-page .head-yl-bg .text-div > div {
    width: 900px;
    max-width: 100%;
}

/* comp: Raleway Bold 20px / 30px, not the shared Regular 16px / 26px */
.whittier-page .head-yl-bg .text-div p {
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    font-weight: 700;
}

/* the comp's 20/30 is a desktop measure; at phone widths it runs to 14 lines */
@media (min-width: 576px) {
    .whittier-page .head-yl-bg .text-div p {
        font-size: 20px;
        line-height: 30px;
    }
}

/* .text-div and its inner wrapper are display:grid, so the button is a grid item
   and text-align does nothing to it — it has to be placed with justify-self.
   inline-flex also stops it stretching to the full column width. */
.whittier-page .head-yl-bg .custom-button {
    display: inline-flex;
    justify-self: center;
}

/* the shared hero is yellow, so its button is black; over the dark photo the
   comp uses the same yellow pill as every other button on the page */
.whittier-page .head-yl-bg .custom-button,
.whittier-page .head-yl-bg .custom-button:hover,
.whittier-page .head-yl-bg .custom-button:focus {
    background: #fff100;
    color: #231f20;
}

/* inline links in the black cards render black and undecorated, which is
   invisible on that background — the comp underlines them in the body colour */
.whittier-page .trust-card-desc a {
    color: inherit;
    text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 * Cash Options — comp measurements
 *
 * 30px from the intro to the first card, 20px between cards, 34px of card
 * padding (33 + the 1px border) and 20px between the check icon and the title.
 * ------------------------------------------------------------------ */

.whittier-page .trust .trust-title {
    font-weight: 700;
}

.whittier-page .trust .trust-cards {
    margin-top: 30px;
    gap: 20px;
}

/* 32 top / 33 + 1px border at the sides / 44 bottom, measured off the comp's cards */
.whittier-page .trust .trust-card {
    padding: 32px 33px 44px;
    margin: 0;
}

/* the icon ships as an inline-block, so it sits on a baseline and picks up ~8px
   of descender space under it; as a block the 20px margin is the whole gap */
.whittier-page .trust .trust-icon {
    display: block;
    line-height: 0;
    margin-bottom: 20px;
}

.whittier-page .trust .trust-card-title {
    margin-top: 0;
}

/* the comp crops both side-by-side photos to 562x657; the shared markup lets
   them collapse to whatever the text column happens to be tall */
.whittier-page .secure-storage-section .img-div img {
    aspect-ratio: 562 / 657;
    height: auto;
    object-fit: cover;
}

/* comp column widths: 500px both sides on "Bring Items In", 500/532 on
   "What We Can't Accept". The text block is centred against the photo in the
   comp exactly as it is here, so the width is what sets everything else.
   Desktop only — the comp is a 1920 layout, and these parents are flex boxes
   that size to their content, so a fixed width here overflows a phone. */
@media (min-width: 992px) {
    .whittier-page .secure-storage-section.pb-0 .NewH3,
    .whittier-page .secure-storage-section.pb-0 .text-div p {
        width: 500px;
        max-width: 100%;
    }

    .whittier-page .secure-storage-section:not(.pb-0) .NewH3 {
        width: 500px;
        max-width: 100%;
    }

    .whittier-page .secure-storage-section:not(.pb-0) .text-div p {
        width: 532px;
        max-width: 100%;
    }
}

.whittier-page .secure-storage-section .custom-button {
    padding-left: 37px;
    padding-right: 37px;
}

/* ------------------------------------------------------------------ *
 * Section headings
 *
 * The template hard-codes which of the two lines is wrapped in <strong>,
 * and the comp does not always agree. Whittier.php tags these two sections
 * so each can be corrected without touching the other city pages.
 * ------------------------------------------------------------------ */

/* comp: "Clearing Out a Family Home?" regular, "Start Here" bold */
.whittier-page .whittier-clearing-out .what-title .NewH3:first-child,
.whittier-page .whittier-clearing-out .what-title .NewH3:first-child strong {
    font-weight: 400 !important;
}

/* .what-title holds h3, h3, p — so the second line is nth-of-type(2), not :last-child */
.whittier-page .whittier-clearing-out .what-title .NewH3:nth-of-type(2) {
    font-weight: 700 !important;
}

/* comp: the whole "How Long a Pawn Loan Lasts and What Happens Next" is bold */
.whittier-page .whittier-how-long .what-title .NewH3,
.whittier-page .whittier-how-long .what-title .NewH3 strong {
    font-weight: 700 !important;
}

/* ------------------------------------------------------------------ *
 * The two grey card sections — comp measurements
 *
 * In the comp each heading is a single text node, so its two lines sit
 * flush; here they are two <h3>s with a gap. Card internals match the
 * Cash Options cards: 34px padding, 32px above the icon, 20px under it,
 * 8px under the card title.
 * ------------------------------------------------------------------ */

/* .what-title is a column flex with a 20px row-gap; the comp's heading is one
   text node (lines flush) with 10px to the paragraph under it */
.whittier-page .whittier-clearing-out .what-title,
.whittier-page .whittier-how-long .what-title {
    row-gap: 0;
    margin-bottom: 0;
}

.whittier-page .whittier-clearing-out .what-title .NewH3,
.whittier-page .whittier-how-long .what-title .NewH3 {
    margin: 0;
}

.whittier-page .whittier-clearing-out .what-title p {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}

/* comp: 21px from the intro to the cards here, 68px under the heading there */
.whittier-page .whittier-clearing-out .two-div {
    margin-top: 21px;
}

.whittier-page .whittier-how-long .two-div {
    margin-top: 68px;
}

.whittier-page .whittier-clearing-out .two-div > div,
.whittier-page .whittier-how-long .two-div > div {
    padding: 32px 34px;
}

/* the card is a column flex with an 8px row-gap — which is already the comp's
   title-to-copy distance — so 12px here makes the icon-to-title gap the comp's 20 */
.whittier-page .whittier-clearing-out .two-div > div > svg,
.whittier-page .whittier-how-long .two-div > div > svg {
    display: block;
    margin-bottom: 12px;
}

/* ------------------------------------------------------------------ *
 * "What We Buy and Lend Against" cards
 *
 * The comp uses a 190x190 thumbnail in the corner of each card rather than
 * the full-card-width image the shared stylesheet renders.
 * ------------------------------------------------------------------ */

/* 190x190 thumbnails as in the comp. `contain`, not `cover`: these are product
   shots with their own transparent margin, and cropping them to fill the box
   pushes the product hard against the card corner (most visible on the laptop). */
.whittier-page .what-we-section.location .block-g > div > img {
    width: 190px;
    height: 190px;
    object-fit: contain;
    object-position: center;
}

/* the comp underlines the inline links; unstyled they are the same black as the
   copy around them and read as plain text */
.whittier-page .what-we-section.location .block-g p a {
    color: inherit;
    text-decoration: underline;
}

/* the yellow banner is set in caps in the comp */
.whittier-page .what-we-section.location .NewH2 {
    text-transform: uppercase;
}

/* comp: 20px between the yellow band and "Near Whittier"; the 20px row-gap
   already covers it, so the banner's own bottom margin has to go */
.whittier-page .what-we-section.location .what-title {
    row-gap: 20px;
}

.whittier-page .what-we-section.location .NewH2 {
    margin-bottom: 0 !important;
}

/* the comp runs the banner on one line, 1423px wide — wider than the theme's
   1170px container. Left inside it the line just overflows to the right and
   gets clipped, so the heading itself is widened to the viewport and the span
   centres inside that. Narrower screens keep wrapping, as they already did. */
@media (min-width: 1500px) {
    .whittier-page .what-we-section.location .NewH2 {
        position: relative;
        width: 100vw;
        max-width: 100vw;
        left: 50%;
        transform: translateX(-50%);
    }

    .whittier-page .what-we-section.location .NewH2 span {
        white-space: nowrap;
    }
}

/* the comp staggers the two columns: the left one starts 113px lower */
@media (min-width: 992px) {
    .whittier-page .what-we-section.location .two-div > .block-g:first-child {
        margin-top: 113px;
    }
}

/* ------------------------------------------------------------------ *
 * "Why Whittier Customers Choose Goodfellas"
 *
 * The shared section drops the photo in with no scrim, which leaves the
 * copy unreadable over this particular image. The comp darkens it to 80%
 * and keeps both heading lines white.
 * ------------------------------------------------------------------ */

.whittier-page .top-cash-section {
    position: relative;
}

.whittier-page .top-cash-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(35, 31, 32, .8);
    pointer-events: none;
}

.whittier-page .top-cash-section > .container {
    position: relative;
    z-index: 1;
}

.whittier-page .top-cash-section .NewH3 strong {
    color: #fff !important;
}

/* comp: both heading lines are Raleway Bold 36px and the copy is Medium */
.whittier-page .top-cash-section .NewH3 {
    font-weight: 700 !important;
}

.whittier-page .top-cash-section .text-div p {
    font-weight: 500;
}

.whittier-page .top-cash-section .custom-button {
    padding-left: 37px;
    padding-right: 37px;
}

/* ------------------------------------------------------------------ *
 * Contact — comp measurements
 *
 * The comp puts 35px under the heading and 83px between contact rows (the
 * rows are 52px, so a 31px gap), and starts the form panel at the column edge.
 * ------------------------------------------------------------------ */

.whittier-page section.form-section .info {
    margin-top: 35px;
    gap: 31px;
}

.whittier-page section.form-section .tab-content-row {
    margin-left: 0;
}

/* ------------------------------------------------------------------ *
 * FAQ — comp measurements
 *
 * The list runs 846px wide (the shared column gives 750), sits 41px under
 * the heading, and leaves 10px between one answer and the next question.
 * ------------------------------------------------------------------ */

@media (min-width: 992px) {
    .whittier-page section.faq .row > [class*="col-"] {
        flex: 0 0 auto;
        width: 876px;
        max-width: 100%;
    }
}

.whittier-page section.faq .faq-title {
    margin-bottom: 41px;
}

/* the items carry a 16px bottom margin that collapses over anything smaller,
   so it has to be cleared before the comp's 10px can take effect */
.whittier-page section.faq .faq-item {
    margin-bottom: 0;
}

.whittier-page section.faq .faq-item + .faq-item {
    margin-top: 10px;
}

/* ------------------------------------------------------------------ *
 * "Call or Visit Goodfellas Pawn Shop Near Whittier"
 *
 * The comp puts a yellow band on a black section, with a dark pill button
 * — the inverse of the shared light-grey treatment.
 * ------------------------------------------------------------------ */

/* #0c0c0d is the comp's colour for this whole block, and it is what the contact
   section below already uses — anything else leaves a visible seam between them.
   No bottom padding either: the comp leaves 150px under the band, and the contact
   section's own top padding already provides it. */
.whittier-page section.process {
    background: #0c0c0d;
    padding-bottom: 0;
}

/* the comp runs the yellow band edge to edge, with the copy centred inside it */
.whittier-page section.process > .container {
    max-width: 100% !important;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.whittier-page section.process .process-div {
    background: #fff100;
    padding: 84px 24px;
}

/* comp: the heading is Raleway Bold 64px over a 904px measure, the copy sits
   in a narrower 768px column, and there is 15px before the button */
.whittier-page section.process .process-title {
    max-width: 904px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 700;
}

/* the comp's 64px only makes sense at desktop widths */
@media (min-width: 992px) {
    .whittier-page section.process .process-title {
        font-size: 64px;
    }
}

.whittier-page section.process .process-desc {
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
}

.whittier-page section.process .custom-button {
    margin-top: 15px;
    padding-left: 37px;
    padding-right: 37px;
}

.whittier-page section.process .custom-button,
.whittier-page section.process .custom-button:hover,
.whittier-page section.process .custom-button:focus {
    background: #231f20;
    color: #fff;
}
