/**
 * YourDaysOut home redesign — hero, consumer strip, section headings, business strip
 * and the site-wide navy footer.
 *
 * Loaded after style.min.css and tokens.css (see AppAsset), so it can lean on the
 * existing tokens rather than redefining colours. Everything shared between the hero,
 * the business strip and the footer comes from the same three variables below, which is
 * what keeps the three navy panels identical.
 *
 * Sizing rules of thumb used throughout:
 *   - content-driven heights only, never fixed heights that would clip editable copy;
 *   - panels align to the existing .container/.container-small gutters;
 *   - body copy stays >= 16px on mobile;
 *   - interactive controls aim for a 44px tap target.
 */

:root {
    /* Brand orange, matching the logo artwork. */
    --ydo-orange: #ef711d;
    --ydo-orange-soft: rgba(239, 113, 29, 0.12);
    /* Pale ground shared by the consumer strip. */
    --ydo-pale: #f4f6f9;
    /* Shared radius for the new panels. */
    --ydo-panel-radius: 12px;
    /* Vertical rhythm between the new home sections - the consumer strip, both widgets and the
       business strip, plus the seam above the footer (the footer has no outer margin of its own, so
       whatever ends the page sets that one). Not the same number as style.css's --section-gap, which
       still drives .content's own padding and therefore the single seam above Featured. */
    --ydo-section-gap: 24px;
}

/* Screen-reader-only helper (Bootstrap 3 ships .sr-only, but the redesigned
   style.css does not always reach these contexts — define it defensively). */
.ydo-hero .sr-only,
.ydo-footer .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Keep the new logo legible and correctly proportioned in the header.
   Deliberately height-driven with `width: auto`: a percentage max-width on an SVG
   inside the shrink-to-fit .navbar-brand flex container resolves against an
   indefinite width and collapses the mark to zero, which is also why the SVG files
   themselves carry intrinsic width/height attributes. */
.ydo-brand-logo {
    height: 38px;
    width: auto;
    max-width: none;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.ydo-hero {
    padding-top: 24px;
}

.ydo-hero-panel {
    display: grid;
    /* ~60% navy content / ~40% photo. */
    grid-template-columns: 6fr 4fr;
    /* The seasonal colour when Home Page Content carries one, the brand navy otherwise —
       see HomeContent::colorStyle(), which writes the custom property onto .ydo-hero only
       when an admin has set it. */
    background: var(--ydo-hero-bg, var(--ydo-navy));
    border-radius: var(--ydo-panel-radius);
    overflow: hidden;
    /* No fixed height: the panel grows with the editable headline/copy. */
    align-items: stretch;
}

/* With no image saved, the copy simply takes the full width. */
.ydo-hero--no-image .ydo-hero-panel {
    grid-template-columns: 1fr;
}

.ydo-hero-content {
    /* 56-64px vertical, 40-48px horizontal. */
    padding: 60px 44px;
    color: var(--ydo-hero-text, #fff);
    min-width: 0;
}

.ydo-hero-headline {
    margin: 0 0 16px;
    color: var(--ydo-hero-text, #fff);
    font-size: 48px;
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.02em;
    /* Long editable headings must wrap, never overflow. */
    overflow-wrap: break-word;
}

.ydo-hero-copy {
    margin: 0 0 28px;
    /* Slightly quieter than the headline. color-mix keeps that relationship whatever colour
       the admin picked; a browser without it simply gets the full-strength text colour. */
    color: var(--ydo-hero-text, rgba(255, 255, 255, 0.88));
    color: color-mix(in srgb, var(--ydo-hero-text, #fff) 88%, transparent);
    font-size: 16px;
    line-height: 1.55;
    max-width: 46em;
    overflow-wrap: break-word;
}

/* At least 24px between the copy and the search. */
.ydo-hero-search {
    margin-top: 24px;
    max-width: 560px;
}

.ydo-hero-form {
    margin: 0;
}

/* Hidden ArticleSearch inputs must not reserve layout space. */
.ydo-hero-form .hidden {
    display: none !important;
}

.ydo-hero-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 10px;
    padding: 6px;
}

.ydo-hero-field-icon {
    position: absolute;
    left: 18px;
    color: #8a93a3;
    font-size: 15px;
    pointer-events: none;
}

.ydo-hero-field-input {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

/* The :not() chain mirrors style.css's global input rule
   (`.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])`,
   specificity 0-4-0). Without matching it, that rule's `padding: 0 14px` and
   1px border win here and the search icon sits on top of the placeholder's first
   letter. Two ancestor classes put this at 0-5-0, so it wins outright rather than
   depending on stylesheet order. */
.ydo-hero-field .form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    width: 100%;
    height: 44px;
    border: 0;
    box-shadow: none;
    outline: none;
    padding: 0 12px 0 38px;
    font-size: 16px;
    color: var(--ydo-navy);
    background: transparent;
    border-radius: 0;
}

.ydo-hero-field .form-control::placeholder {
    color: #8a93a3;
    opacity: 1;
}

.ydo-hero-submit {
    flex: 0 0 auto;
    height: 44px;
    min-width: 104px;
    padding: 0 22px;
    border: 0;
    border-radius: 8px;
    background: var(--discover-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

.ydo-hero-submit:hover,
.ydo-hero-submit:focus {
    background: var(--discover-primary-hover);
    color: #fff;
}

.ydo-hero-near {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    min-height: 44px;
    padding: 0 20px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

.ydo-hero-near:hover,
.ydo-hero-near:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
    color: #fff;
}

.ydo-hero-media {
    position: relative;
    min-height: 100%;
}

.ydo-hero-media picture,
.ydo-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
}

.ydo-hero-media img {
    object-fit: cover;
    /* object-position is set inline from the admin's focal point. */
}

/* Visible keyboard focus across the new components. */
.ydo-hero-field .form-control:focus-visible,
.ydo-hero-submit:focus-visible,
.ydo-hero-near:focus-visible,
.ydo-section-link:focus-visible,
.ydo-btn-outline-navy:focus-visible,
.ydo-btn-white-navy:focus-visible,
.ydo-footer a:focus-visible {
    outline: 3px solid var(--ydo-orange);
    outline-offset: 2px;
}

/* ---- Hero: tablet ---- */
@media (max-width: 1023.98px) {
    .ydo-hero-content {
        padding: 48px 36px;
    }

    .ydo-hero-headline {
        font-size: 40px;
    }
}

/* ---- Hero: mobile (photo column removed entirely) ---- */
@media (max-width: 767.98px) {
    .ydo-hero {
        padding-top: 16px;
    }

    .ydo-hero-panel {
        grid-template-columns: 1fr;
    }

    /* Not just hidden: the column is removed from the grid so it reserves no space,
       and the <picture> mobile source is a 1x1 GIF so the photo is never fetched. */
    .ydo-hero-media {
        display: none;
    }

    .ydo-hero-content {
        padding: 24px;
    }

    .ydo-hero-headline {
        font-size: 32px;
        line-height: 1.15;
    }

    .ydo-hero-copy {
        font-size: 16px;
        line-height: 1.5;
    }

    .ydo-hero-search {
        max-width: none;
    }

    /* Stack field, Search and Near me so nothing is squeezed below the tap target. */
    .ydo-hero-field {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 8px;
    }

    /* Field and button are stacked here, so pin the icon to the field row rather
       than letting it centre against the taller stacked box. */
    .ydo-hero-field-icon {
        top: 24px;
    }

    .ydo-hero-submit,
    .ydo-hero-near {
        width: 100%;
    }
}

/* ==========================================================================
   Consumer strip
   ========================================================================== */

.ydo-consumer-strip {
    margin: var(--ydo-section-gap) 0;
}

.ydo-consumer-panel {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(240px, 1fr);
    gap: 40px;
    align-items: center;
    background: var(--ydo-pale);
    border-radius: var(--ydo-panel-radius);
    padding: 32px 36px;
}

.ydo-consumer-heading {
    margin: 0 0 24px;
    color: var(--ydo-navy);
    font-size: 24px;
    font-weight: 700;
    overflow-wrap: break-word;
}

.ydo-consumer-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ydo-consumer-benefit {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.ydo-consumer-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ydo-orange);
    color: #fff;
    font-size: 18px;
}

.ydo-consumer-benefit-text {
    min-width: 0;
}

.ydo-consumer-benefit-title {
    margin: 0 0 4px;
    color: var(--ydo-navy);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.ydo-consumer-benefit-text p {
    margin: 0;
    color: #4a5568;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: break-word;
}

.ydo-consumer-account {
    /* Subtle vertical rule separating the account area on desktop. */
    border-left: 1px solid #dfe4ec;
    padding-left: 32px;
    min-width: 0;
}

.ydo-consumer-account-text {
    margin: 0 0 16px;
    color: var(--ydo-navy);
    font-size: 15px;
    line-height: 1.5;
    overflow-wrap: break-word;
}

.ydo-consumer-login {
    margin: 12px 0 0;
    font-size: 14px;
    color: #4a5568;
}

.ydo-consumer-login a {
    color: var(--discover-primary);
    font-weight: 600;
    text-decoration: underline;
}

/* Navy outline button (consumer strip CTA). */
.ydo-btn-outline-navy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 0 22px;
    border: 1px solid var(--ydo-navy);
    border-radius: 8px;
    background: #fff;
    color: var(--ydo-navy);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}

.ydo-btn-outline-navy:hover,
.ydo-btn-outline-navy:focus {
    background: var(--ydo-navy);
    color: #fff;
    text-decoration: none;
}

@media (max-width: 991.98px) {
    .ydo-consumer-panel {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .ydo-consumer-benefits {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ydo-consumer-account {
        /* Vertical rule becomes a horizontal divider once stacked. */
        border-left: 0;
        border-top: 1px solid #dfe4ec;
        padding-left: 0;
        padding-top: 24px;
    }
}

@media (max-width: 767.98px) {
    .ydo-consumer-strip {
        margin: 32px 0;
    }

    .ydo-consumer-panel {
        padding: 24px 20px;
    }

    .ydo-consumer-heading {
        font-size: 21px;
    }

    /* Body copy stays readable on phones. */
    .ydo-consumer-benefit-text p,
    .ydo-consumer-account-text,
    .ydo-consumer-login {
        font-size: 16px;
    }
}

/* ==========================================================================
   Section headings (Explore things to do / Explore events)
   ========================================================================== */

.ydo-widget {
    /* Also the gap above the footer: the footer carries no outer margin of its own, so whatever
       ends the page sets that seam (see .ydo-footer). */
    margin-bottom: var(--ydo-section-gap);
}

.ydo-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--ydo-navy);
}

.ydo-section-head-text {
    min-width: 0;
}

.ydo-section-title {
    margin: 0;
    color: var(--ydo-navy);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: break-word;
}

.ydo-section-subtitle {
    margin: 4px 0 0;
    color: #4a5568;
    font-size: 15px;
    line-height: 1.5;
    overflow-wrap: break-word;
}

.ydo-section-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    color: var(--discover-primary);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.ydo-section-link:hover,
.ydo-section-link:focus {
    color: var(--discover-primary-hover);
    text-decoration: underline;
}

.ydo-section-link .material-icons {
    font-size: 18px;
}

/* New h3 between each main row and its smaller-card row. */
.ydo-rail-heading {
    margin: 24px 0 12px;
    color: var(--ydo-navy);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: break-word;
}

@media (max-width: 767.98px) {
    .ydo-widget {
        margin-bottom: 32px;
    }

    /* Title, then subtitle, then the link — wrapping naturally, never overlapping. */
    .ydo-section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .ydo-section-title {
        font-size: 22px;
    }

    .ydo-section-subtitle {
        font-size: 16px;
    }

    .ydo-section-link {
        white-space: normal;
    }

    .ydo-rail-heading {
        font-size: 17px;
        margin-top: 20px;
    }
}

/* ==========================================================================
   Business strip
   ========================================================================== */

.ydo-business-strip {
    margin: var(--ydo-section-gap) 0;
}

.ydo-business-inner {
    /* Already inside .container-small — no extra gutters. */
    width: 100%;
}

.ydo-business-panel {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    background: var(--ydo-navy);
    border-radius: var(--ydo-panel-radius);
    padding: 24px 28px;
    color: #fff;
}

.ydo-business-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: var(--ydo-orange);
    color: #fff;
    font-size: 22px;
}

.ydo-business-text {
    flex: 1 1 340px;
    min-width: 0;
}

.ydo-business-heading {
    margin: 0 0 6px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: break-word;
}

.ydo-business-body {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    line-height: 1.5;
    /* Never truncated — the Connect sentence must stay readable in full. */
    overflow-wrap: break-word;
}

.ydo-business-cta {
    flex: 0 0 auto;
}

/* White button with a navy label (business strip CTA). */
.ydo-btn-white-navy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 24px;
    border-radius: 8px;
    background: #fff;
    color: var(--ydo-navy);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}

.ydo-btn-white-navy:hover,
.ydo-btn-white-navy:focus {
    background: #eaeef6;
    color: var(--ydo-navy);
    text-decoration: none;
}

@media (max-width: 767.98px) {
    .ydo-business-strip {
        margin: 32px 0;
    }

    .ydo-business-panel {
        padding: 22px 20px;
        gap: 14px;
    }

    .ydo-business-text {
        flex-basis: 100%;
    }

    .ydo-business-body {
        font-size: 16px;
    }

    .ydo-business-cta {
        flex-basis: 100%;
    }

    .ydo-btn-white-navy {
        width: 100%;
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.ydo-footer {
    background: var(--ydo-navy);
    color: rgba(255, 255, 255, 0.82);
    padding: 40px 0 28px;
    /* No outer margin: whatever ends the page already carries its own section gap (the Events
       widget's margin-bottom here, .content's padding-bottom elsewhere), and this margin stacked a
       third spacer on top of it - 48 + 40 + 48 of air before the navy panel. */
    margin-top: 0;
    font-size: 14px;
}

.ydo-footer a {
    color: rgba(255, 255, 255, 0.82);
}

.ydo-footer a:hover,
.ydo-footer a:focus {
    color: #fff;
    text-decoration: underline;
}

.ydo-footer-top {
    display: flex;
    flex-wrap: wrap;
    gap: 32px 48px;
    align-items: flex-start;
    justify-content: space-between;
}

.ydo-footer-brand {
    flex: 0 0 auto;
}

.ydo-footer-logo img {
    width: 190px;
    height: auto;
}

.ydo-footer-groups {
    display: flex;
    flex: 1 1 520px;
    flex-wrap: wrap;
    gap: 32px 48px;
    justify-content: flex-start;
}

.ydo-footer-group {
    min-width: 0;
    flex: 1 1 180px;
}

.ydo-footer-group--social {
    flex: 0 0 auto;
}

.ydo-footer-group-title {
    margin: 0 0 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.ydo-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Compact horizontal groups on desktop: two tidy columns of short links. */
    columns: 2;
    column-gap: 28px;
}

.ydo-footer-group--social .ydo-footer-links {
    columns: 1;
}

.ydo-footer-links li {
    break-inside: avoid;
    margin-bottom: 8px;
}

.ydo-footer-links a {
    display: inline-block;
    padding: 3px 0;
    line-height: 1.4;
}

.ydo-footer-social {
    display: flex;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ydo-footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 18px;
}

.ydo-footer-social-link:hover,
.ydo-footer-social-link:focus {
    background: var(--ydo-orange);
    color: #fff;
    text-decoration: none;
}

.ydo-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.ydo-footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ydo-footer-legal a {
    display: inline-block;
    padding: 4px 0;
    font-size: 13px;
}

.ydo-footer-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ydo-footer-copy {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.ydo-footer-credit {
    width: 74px;
    height: auto;
    opacity: 0.9;
}

@media (max-width: 767.98px) {
    .ydo-footer {
        padding: 32px 0 24px;
        font-size: 15px;
    }

    .ydo-footer-top {
        gap: 28px;
    }

    .ydo-footer-groups {
        flex: 1 1 100%;
        gap: 28px;
    }

    .ydo-footer-group {
        flex: 1 1 100%;
    }

    /* Two columns of links on phones rather than one very long list. */
    .ydo-footer-links {
        columns: 2;
        column-gap: 20px;
    }

    .ydo-footer-links a {
        padding: 6px 0;
        font-size: 15px;
    }

    .ydo-footer-bottom {
        margin-top: 24px;
    }

    .ydo-footer-legal {
        gap: 2px 18px;
    }

    .ydo-footer-legal a {
        font-size: 14px;
        padding: 6px 0;
    }
}

/* Very narrow phones: a single link column reads better than two cramped ones. */
@media (max-width: 359.98px) {
    .ydo-footer-links {
        columns: 1;
    }
}

/* ==========================================================================
   Home page section rhythm
   ========================================================================== */

/* Every section inside this wrapper ends with its own --ydo-section-gap margin, so the wrapper's
   bottom padding was a second spacer stacked on the last one. The top padding stays: that is the
   gap above Featured, and nothing above it provides one. Scoped to the home page because .content
   wraps the body of several other layouts too. */
.ydo-home-sections {
    padding-bottom: 0;
}


/* ---------- "My profile" menu ---------- */

/* The menu lists one entry per business the person can administer, which for staff accounts is
   thirty-odd: it ran off the bottom of the screen with nothing to scroll, so everything below the
   fold was simply unreachable. Below 992px the collapsed navbar already caps it (style.css, the
   .navbar-collapse .dropdown-menu block); this is the other half, where the menu hangs from the
   header as an absolutely positioned box and nothing constrains it.

   The menu opens at top:125% of the header, so the cap leaves room for that and a margin at the
   bottom. overscroll-behavior keeps the page behind still once the list reaches its end. */
@media (min-width: 992px) {
    .header .profile-link + .dropdown-menu {
        max-height: calc(100vh - 150px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}