/* ==========================================================================
   Price List template
   Palette follows the existing site: #54192D maroon, #FBF8F3 cream,
   #CD7E7A rose. Type follows Mundial Narrow like the other templates.
   ========================================================================== */

/* IvyPresto Display Light Italic.
   Declared here because the theme's existing @font-face (in
   template-treatments.css) points at "IvyPrestoDisplay-LightItalic.ttf",
   a filename that does not exist - the file on disk is spaced. This uses the
   Elementor-managed upload, which resolves on both environments. */
@font-face {
    font-family: 'IvyPresto Display Light Italic';
    src: url('/wp-content/uploads/2025/06/IvyPresto-Display-Light-Italic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

.pricelist-template {
    background-color: #54192D;
    color: #FBF8F3;
}

/* ------------------------------------------------------------------ hero */

.pl-hero {
    padding: 90px 40px 70px;
    text-align: center;
}

.pl-hero-title {
    font-family: 'Mundial Narrow Light', sans-serif;
    font-size: 30px;
    font-weight: 300;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #CD7E7A;
    margin: 0;
}

/* ----------------------------------------------------------------- bands */

.pl-band {
    position: relative;
    min-height: 340px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.pl-band-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}


.pl-band-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
    align-items: start;
    padding: 60px 70px;
}

.pl-band-title {
    font-family: 'Mundial Narrow Light', sans-serif;
    font-size: 26px;
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #FBF8F3;
    margin: 0 0 34px;
    line-height: 1.3;
    width: 40%;
}

.pl-band-desc {
    font-family: 'Mundial Narrow Light', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 25px;
    color: #FBF8F3;
    max-width: 42ch;
    margin: 0;
}

.pl-band-cost-label {
    font-family: 'Mundial Narrow Light', sans-serif;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #FBF8F3;
    margin: 0 0 12px;
}

.pl-band-cost-text {
    font-family: 'Mundial Narrow Light', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 25px;
    color: #FBF8F3;
    margin: 0 0 14px;
}

/* Matches the existing .pricing link component from lifestages-tmp2.css.
   That stylesheet is only enqueued on the Lifestages TMP2 template, so the
   declarations are repeated here rather than reusing the class.
   !important is needed because the theme resets every <button> to a pink
   (#cc3366) 1px box, and that reset wins even against a later same-specificity
   rule. */
.pl-band-cta {
    font-family: 'IvyPresto Display', serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    font-style: normal;
    line-height: 22.5px;
    color: #FBF8F3 !important;
    text-decoration: underline !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 8px 16px 8px 0 !important;
    cursor: pointer;
    transition: opacity 0.25s ease;
}

.pl-band-cta:hover,
.pl-band-cta:focus,
.pl-band-cta:active {
    background: none !important;
    border: none !important;
    color: #FBF8F3 !important;
    text-decoration: underline !important;
    opacity: 0.7;
}

/* ---------------------------------------------------------------- modal */

.pl-modal[hidden] {
    display: none;
}

.pl-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.pl-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 6, 11, 0.72);
}

.pl-modal-dialog {
    position: relative;
    background: #CD7E7A;
    color: #1E1E1C;
    border-radius: 10px;
    width: min(1054px, 100%);
    max-height: 88vh;
    overflow-y: auto;
    padding: 44px 29px;
}

.pl-modal-close {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 40px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    color: #54192D !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    transition: opacity 0.25s ease;
}

.pl-modal-close:hover,
.pl-modal-close:focus,
.pl-modal-close:active {
    background: none !important;
    border: none !important;
    color: #54192D !important;
    opacity: 0.6;
}

.pl-modal-title {
    font-family: 'Mundial Narrow Light', sans-serif;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0 0 12px;
    color: #54192D;
}

.pl-modal-intro {
    font-family: 'Mundial Narrow Light', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    margin: 0 0 28px;
    color: #1E1E1C;
}

.pl-modal-footnote {
    font-family: 'Mundial Narrow Light', sans-serif;
    font-size: 16px;
    font-weight: 300;
    margin: 24px 0 0;
    color: #1E1E1C;
}

/* ---------------------------------------------------------------- table */

.pl-table {
    width: 100%;
    /* closes the last row so the footnote sits below a rule */
    border-bottom: 1px solid rgba(30, 30, 28, 0.28);
}

/* The grid lives on each rate row, not on the service, so a row's four cells
   can be repositioned independently on mobile. The service is just a group. */
.pl-table-head,
.pl-row {
    display: grid;
    /* Duration and Rate are capped rather than fractional: their content is
       short, so fr units just left them holding empty space. The slack goes
       to the name and description columns. */
    grid-template-columns: 1.4fr 2.6fr 110px 56px;
    gap: 16px;
    align-items: start;
}

.pl-table-head {
    font-family: 'Mundial Narrow Light', sans-serif;
    font-size: 16px;
    letter-spacing: 0.08em;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(30, 30, 28, 0.45);
    color: #54192D;
}

.pl-service-row {
    padding: 20px 0;
}

.pl-service-row + .pl-service-row {
    border-top: 1px solid rgba(30, 30, 28, 0.28);
}

.pl-cell {
    font-family: 'Mundial Narrow Light', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.65;
    color: #1E1E1C;
}

.pl-cell-name {
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 20px;
    color: #54192D;
    font-weight: 500;
}

/* A service can have several rate rows (Telehealth has two). Rows after the
   first are preceded by a divider showing they continue the same service -
   the solid rule between services does the opposite job.
   It sits between the row grids rather than inside one, so the rule is
   unbroken: drawing a border on each cell left it split at the column gaps. */
.pl-row-divider {
    width: 100%;
    height: 0;
    border-top: 1px dashed rgba(30, 30, 28, 0.4);
    margin: 20px 0;
}

/* Notes ("Valid for 8 weeks") break out of Mundial and use the display face.
   The only IvyPresto face declared is 300, so 700 is synthesised by the
   browser - there is no bold .ttf on the server to load. */
.pl-cell-note {
    display: block;
    margin-top: 6px;
    font-family: 'IvyPresto Display Light Italic', serif;
    font-weight: 700;
    font-style: italic;
    color: #54192D;
}

/* Durations can be prose - "From early labour until you meet your baby" -
   so they must wrap inside the column. nowrap here pushed the text out of
   its 110px track and over the Rate value. */
.pl-cell-duration {
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Rates are short numbers; keep those on one line */
.pl-cell-rate {
    white-space: nowrap;
    text-align: right;
}

/* ---------------------------------------------------- signature services */

.pl-services {
    /* The embedded Elementor template owns its own spacing */
    padding: 0;
}

/* Elementor boxes this template to a centred 1440px container, while the
   category bands are full-bleed with 70px gutters. Match the bands so the
   heading and cards line up with the band copy on wide screens. */
.pl-services > .elementor > .e-con {
    padding: 60px 70px !important;
}

.pl-services .e-con-inner {
    max-width: 100% !important;
}








/* ------------------------------------------------------------ community */

.pl-community {
    padding: 40px 0 0;
    text-align: center;
}

.pl-community-heading {
    font-family: 'Mundial Narrow Light', sans-serif;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.08em;
    color: #FBF8F3;
    margin: 0 0 10px;
}

.pl-community-text {
    font-family: 'Mundial Narrow Light', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #FBF8F3;
    margin: 0 0 30px;
}



/* --------------------------------------------------------------- tablet */

@media (max-width: 1024px) {
    .pl-band-inner {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 50px 40px;
    }

    .pl-services-grid {
        grid-template-columns: repeat(3, 1fr);
        padding: 0 40px;
    }

    .pl-services-heading {
        padding: 0 40px;
    }
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 767px) {
    /* Community heading and line get the same 20px gutters as the bands */
    .pl-community-heading,
    .pl-community-text {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Match the bands' 20px mobile gutters. The outer container is zeroed so
       the carousel can run edge to edge, which left the heading flush against
       the screen edge - so pad the heading and controls directly. */
    .pl-services .elementor-widget-heading,
    .pl-services .lifestages-splide-controls {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Mobile: the carousel shows one card at a time, so surface the arrows.
       The shell's track is empty - only its controls are wanted. */
    .pl-services .lifestage-slider-container {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .pl-services .splide-track-wrapper {
        display: block !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .pl-services .lifestages-splide-controls {
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 44px;
        padding: 0 !important;
        margin: 24px 0 0 !important;
    }

    .pl-services .lifestages-splide-controls .elementor-widget-image {
        width: auto !important;
        cursor: pointer;
    }

    /* heading -> carousel -> arrows */
    .pl-services .elementor-widget-heading { order: 1 !important; }
    .pl-services .signature-services       { order: 2 !important; }
    .pl-services .lifestage-slider-container { order: 3 !important; }

    /* On mobile the carousel sets its own gutters, so drop the outer padding */
    .pl-services > .elementor > .e-con {
        padding: 44px 0 !important;
    }


    .pl-hero {
        padding: 60px 20px 44px;
    }

    .pl-band {
        min-height: 0;
    }

    .pl-band-inner {
        padding: 40px 20px;
        gap: 22px;
    }

    .pl-band-title {
        /* 40% of a phone-width column would wrap to a sliver */
        width: 100%;
    }

    .pl-band-desc {
        max-width: none;
    }

    .pl-modal {
        padding: 20px 12px;
    }

    .pl-modal-dialog {
        padding: 34px 18px;
        max-height: 92vh;
    }

    /* Four columns will not fit a phone, so the table drops to three: the
       description moves out of its own column and sits under the service
       name, while Duration and Rate keep their headings and alignment. */
    .pl-table-head,
    .pl-row {
        grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 0.5fr);
        gap: 12px;
    }

    /* "Service Description" — no column of its own to label any more */
    .pl-table-head span:nth-child(2) {
        display: none;
    }

    .pl-service-row {
        padding: 18px 0;
    }

    /* 20px + letter-spacing makes single words like "PHYSIOTHERAPY" wider
       than the column, and they spilled over the Duration values. */
    .pl-cell-name {
        grid-column: 1;
        grid-row: 1;
        font-size: 16px;
        overflow-wrap: break-word;
    }

    .pl-cell-duration {
        grid-column: 2;
        grid-row: 1;
    }

    .pl-cell-rate {
        grid-column: 3;
        grid-row: 1;
        /* left, to sit under the Rate heading rather than the dialog edge */
        text-align: left;
    }

    /* Spans all three columns. Confined to column 1 it wrapped inside 155px
       of a 315px row - 14 to 18 lines per service with the rest of the row
       empty beside it. Nothing sits next to it on this row, so the width is
       free: descriptions drop to 7-9 lines and the table loses 40% of its
       height. */
    .pl-cell-desc {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: 12px;
    }

    /* Continuation rows carry no service name, so that cell is dropped. The
       description stays on row 2 like every other row - pulling it up to row
       1 would now overlap Duration and Rate, since it spans all columns. */
    .pl-cell-name.pl-cell-continued {
        display: none;
    }

    .pl-services {
        padding: 44px 0;
    }

    .pl-services-heading {
        padding: 0 20px;
        margin-bottom: 24px;
    }

    .pl-services-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 20px;
        gap: 12px;
    }

    .pl-community-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* The shared template carries an empty slider shell. Hide it on desktop only:
   the grid shows every card there, so no arrows are needed. On mobile its
   controls drive the carousel - see the max-width query above. Scoped to a
   min-width query because this rule sits after that query in the file, and an
   unscoped !important here would win at every width. */
@media (min-width: 768px) {
    .pl-services .lifestage-slider-container {
        display: none !important;
    }
}

/* Emphasis inside headings uses the serif italic, as in "JOIN our COMMUNITY" */
.pricelist-template h1 em,
.pricelist-template h2 em,
.pricelist-template h3 em,
.pl-community-heading em {
    font-family: 'IvyPresto Display Light Italic', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    text-transform: none;
    letter-spacing: 0.02em;
}

/* Links in the community line inherit the surrounding colour */
.pl-community-text a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity 0.25s ease;
}

.pl-community-text a:hover,
.pl-community-text a:focus {
    color: inherit;
    text-decoration: underline;
    opacity: 0.7;
}