/*
 * Contact page (/contact).
 *
 * Linked last in site.blade.php, after style.css and responsive.css, so it wins
 * the cascade without a single !important. Everything is scoped under
 * `.ct-page`.
 *
 * The page no longer uses the theme's `.contact-area.style-three.inner` shell.
 * That shell exists to hang a white card off a hero photo with `margin: -313px`
 * (reset to 0 by `.inner`), and its `.single-contact-box` carries a hard
 * `margin-right: 60px` built for a two-thirds column -- neither survives a
 * responsive rebuild. The form fields are ours here too, so none of the theme's
 * `.single-input-box` rules apply.
 *
 * Bump the ?v= query string in site.blade.php after editing this file.
 */

/* ------------------------------------------------------------------ tokens */

.ct-page {
    --ct-green: #71b745;
    --ct-dark: #00181a;
    --ct-ink: #1c1c1c;
    --ct-muted: #5c6b66;
    --ct-cream: #f7f6ee;
    --ct-line: #e3e6df;
}

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

.ct-page .ct-hero {
    position: relative;
    padding: 90px 0 96px;
    background: url(../images/top-banner.png) center center / cover no-repeat;
    overflow: hidden;
}

.ct-page .ct-hero:before {
    position: absolute;
    content: '';
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(0, 24, 26, 0.92) 0%,
        rgba(0, 24, 26, 0.74) 55%,
        rgba(113, 183, 69, 0.42) 100%
    );
}

.ct-page .ct-hero .container {
    position: relative;
    z-index: 1;
}

.ct-page .ct-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(113, 183, 69, 0.9);
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 4px;
    margin-bottom: 18px;
}

.ct-page .ct-hero h1 {
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(32px, 5.2vw, 56px);
    line-height: 1.1;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
}

.ct-page .ct-hero-lead {
    color: #e7f1e0;
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.65;
    max-width: 620px;
    margin: 18px 0 0;
}

/* ----------------------------------------------------------------- buttons */

.ct-page .ct-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 14px 32px;
    border-radius: 5px;
    border: 2px solid transparent;
    transition: 0.4s;
}

.ct-page .ct-btn-primary {
    background: var(--ct-green);
    color: #fff;
    border-color: var(--ct-green);
}

.ct-page .ct-btn-primary:hover:not(:disabled) {
    background: var(--ct-dark);
    color: #fff;
    border-color: var(--ct-dark);
}

.ct-page .ct-btn-primary:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.ct-page .ct-btn-dark {
    background: var(--ct-dark);
    color: #fff;
    border-color: var(--ct-dark);
}

.ct-page .ct-btn-dark:hover {
    background: transparent;
    color: var(--ct-dark);
}

/* -------------------------------------------------------------------- body */

.ct-page .ct-body {
    background: var(--ct-cream);
    padding: 84px 0 92px;
}

.ct-page .ct-card {
    background: #fff;
    border: 1px solid var(--ct-line);
    border-radius: 10px;
    padding: 38px 36px 34px;
    height: 100%;
}

.ct-page .ct-card-head {
    margin-bottom: 26px;
}

.ct-page .ct-eyebrow {
    display: block;
    color: var(--ct-green);
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.ct-page .ct-card-head h2 {
    color: var(--ct-ink);
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.15;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
}

.ct-page .ct-card-head p {
    color: var(--ct-muted);
    font-size: 16px;
    line-height: 1.65;
    margin: 10px 0 0;
}

/* -------------------------------------------------------------------- form */

.ct-page .ct-field {
    margin-bottom: 20px;
}

.ct-page .ct-field label {
    display: block;
    color: var(--ct-ink);
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 7px;
}

.ct-page .ct-field input,
.ct-page .ct-field select,
.ct-page .ct-field textarea {
    display: block;
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--ct-line);
    border-radius: 8px;
    background: #fbfbf8;
    color: var(--ct-ink);
    font-size: 16px;
    line-height: 1.5;
    transition: 0.3s;
}

.ct-page .ct-field textarea {
    min-height: 150px;
    resize: vertical;
}

.ct-page .ct-field input::placeholder,
.ct-page .ct-field textarea::placeholder {
    color: #9aa8a3;
}

.ct-page .ct-field input:focus,
.ct-page .ct-field select:focus,
.ct-page .ct-field textarea:focus {
    outline: 0;
    background: #fff;
    border-color: var(--ct-green);
    box-shadow: 0 0 0 3px rgba(113, 183, 69, 0.16);
}

/* Native selects render their own arrow inconsistently once a background is
   set, so the caret is drawn here and the built-in one suppressed. */
.ct-page .ct-field select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 42px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235c6b66'%3E%3Cpath d='M8 11.5 2.5 6h11z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 13px;
}

.ct-page .ct-form-actions {
    margin-top: 6px;
}

.ct-page .ct-form-actions .ct-btn {
    width: 100%;
}

.ct-page .ct-form-note {
    color: var(--ct-muted);
    font-size: 15px;
    line-height: 1.6;
    margin: 16px 0 0;
}

/* --------------------------------------------------------------- info side */

.ct-page .ct-info {
    background: var(--ct-dark);
    border-radius: 10px;
    padding: 36px 32px 32px;
    height: 100%;
}

.ct-page .ct-info .ct-eyebrow {
    color: var(--ct-green);
}

.ct-page .ct-info h2 {
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 26px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 24px;
}

.ct-page .ct-info-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ct-page .ct-info-row:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.ct-page .ct-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(113, 183, 69, 0.16);
    color: var(--ct-green);
    font-size: 20px;
}

.ct-page .ct-info-label {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.ct-page .ct-info-value {
    display: block;
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    /* Long addresses must wrap rather than widen the card on a phone. */
    word-break: break-word;
}

a.ct-info-value:hover {
    color: var(--ct-green);
}

/* -------------------------------------------------------------- store list */

/* The /store cards (.str-card) are scoped to .str-page and built for a light
   band and a three-across grid, so this narrow dark column gets its own card:
   name, one line of context, and the arrow into the store's own page. */

.ct-page .ct-stores {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.ct-page .ct-store-card {
    /* The arrow sits in the second column, so it stays on the card's first
       line however far the name and its sub-line wrap. */
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2px 14px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    transition: 0.3s;
}

.ct-page .ct-store-card:hover {
    border-color: var(--ct-green);
    background: rgba(113, 183, 69, 0.12);
}

.ct-page .ct-store-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
}

.ct-page .ct-store-sub {
    grid-column: 1;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    line-height: 1.45;
}

.ct-page .ct-store-card i {
    grid-column: 2;
    grid-row: 1 / span 2;
    color: var(--ct-green);
    font-size: 16px;
}

.ct-page .ct-store-card:hover i {
    color: #fff;
}

/* ----------------------------------------------------------------- socials */

.ct-page .ct-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.ct-page .ct-social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 19px;
    transition: 0.3s;
}

.ct-page .ct-social:hover {
    background: var(--ct-green);
    color: #fff;
}

/* --------------------------------------------------------------------- cta */

.ct-page .ct-cta {
    padding: 0 0 96px;
    background: var(--ct-cream);
}

.ct-page .ct-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 34px;
    background: #fff;
    border: 1px solid var(--ct-line);
    border-radius: 10px;
    padding: 38px 42px;
}

.ct-page .ct-cta-text h3 {
    color: var(--ct-ink);
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(22px, 2.6vw, 28px);
    text-transform: uppercase;
    margin: 0 0 8px;
}

.ct-page .ct-cta-text p {
    color: var(--ct-muted);
    font-size: 16px;
    line-height: 1.65;
    max-width: 520px;
    margin: 0;
}

.ct-page .ct-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* -------------------------------------------------------------- responsive */

@media only screen and (max-width: 991px) {
    .ct-page .ct-hero {
        padding: 64px 0 70px;
    }

    .ct-page .ct-body {
        padding: 60px 0 64px;
    }

    .ct-page .ct-info {
        margin-top: 26px;
    }

    .ct-page .ct-cta {
        padding-bottom: 66px;
    }

    .ct-page .ct-cta-inner {
        padding: 32px 28px;
    }
}

@media only screen and (max-width: 767px) {
    .ct-page .ct-body {
        padding: 48px 0 54px;
    }

    .ct-page .ct-card {
        padding: 28px 22px 24px;
    }

    .ct-page .ct-info {
        padding: 28px 22px 24px;
    }

    .ct-page .ct-btn {
        padding: 13px 24px;
        font-size: 16px;
    }

    .ct-page .ct-cta-actions .ct-btn {
        flex: 1 1 100%;
    }

    .ct-page .ct-cta-inner {
        padding: 26px 22px;
    }
}