/* outdoors.css - Outdoor Wi-Fi
 *
 * Built on the site's existing tokens rather than a new palette: the brand
 * green, Montserrat headings, Open Sans body, and the same green-gradient plus
 * dot texture used on the availability panel. The page should read as part of
 * communityfiber.net, not as a campaign microsite bolted on.
 */

.outdoor-page {
    color: var(--npt-black);
}

/* --- Hero ---------------------------------------------------------------- */
.od-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(48px, 7vw, 88px) 20px;
}


.od-hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.1rem, 6vw, 3.4rem);
    font-weight: 800;
    line-height: 1.08;
    margin: 0 0 18px;
    text-wrap: balance;
}

.od-hero-sub {
    font-size: 1.12rem;
    line-height: 1.65;
    color: #475569;
    margin: 0 0 28px;
    max-width: 52ch;
}

.od-hero-price {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--cfn-dark-green, #0B8C38);
    margin: -12px 0 28px;
    max-width: 52ch;
}


.od-hero-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.18);
}

/* --- Buttons ------------------------------------------------------------- */
.od-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* Fitts: a target big enough to hit without aiming. */
    min-height: 52px;
    padding: 14px 30px;
    border: 0;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.od-btn--primary { background: var(--cfn-green, #03A63C); color: #ffffff; }
.od-btn--primary:hover {
    background: var(--cfn-dark-green, #0B8C38);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(3, 166, 60, 0.3);
}
.od-btn--ghost {
    background: #ffffff;
    color: var(--cfn-dark-green, #0B8C38);
    border: 1px solid #cbd5e1;
}
.od-btn--ghost:hover { background: #f1f5f9; }
.od-btn:focus-visible { outline: 3px solid var(--cfn-dark-green, #0B8C38); outline-offset: 3px; }
.od-btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }

/* --- Sections ------------------------------------------------------------ */
.od-section { padding: clamp(48px, 6vw, 76px) 20px; }
.od-section--tint { background: var(--npt-white, #F8FAFC); }
.od-inner { max-width: 1080px; margin: 0 auto; }

.od-h2-centered,
.od-lede h2,
.od-two-col h2,
.od-cta h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 4vw, 2.3rem);
    line-height: 1.18;
    margin: 0 0 16px;
    text-wrap: balance;
}
.od-h2-centered { text-align: center; }
.od-sub-centered {
    text-align: center;
    color: #64748b;
    margin: 0 auto 34px;
    max-width: 56ch;
}

.od-lede { max-width: 62ch; margin: 0 auto; text-align: center; }

/* In a two-column row the lede sits beside an image, so it aligns left and
   centres against it vertically rather than floating at the top. */
.od-two-col .od-lede { margin: 0; text-align: left; }
.od-lede p { color: #475569; font-size: 1.05rem; line-height: 1.7; }

.od-callout {
    margin: 22px 0 0;
    padding: 14px 18px;
    border-left: 3px solid var(--cfn-green, #03A63C);
    background: #ffffff;
    border-radius: 0 8px 8px 0;
    text-align: left;
    color: #334155;
}

/* .od-lede (class+element, specificity 0-1-1) otherwise beats a bare
   .od-price-big (0-1-0) and silently wins the font-size, which is why this
   was rendering at body-paragraph size no matter what was set here. Scoped
   under .od-lede to outrank it for real. */
.od-lede .od-price-big {
    /* Plain inline flow, not flex: an inline-flex box gives the <small>
       its own separate box, and background-clip: text then paints two
       disconnected gradients instead of one continuous one — the "seam"
       that read as janky. Letting it flow as normal inline text keeps a
       single gradient across the whole "$15/mo". Same size as .od-hero h1
       so it carries the same weight as the page's own headline. */
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2.1rem, 6vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -1px;
    margin: 22px 0 0;
}

.od-price-big small {
    /* Deliberately not part of the gradient — .text-gradient's transparent
       fill is inherited by default, which made "/mo" the same size-reading
       weight as "$15" and the two competed. Overriding both properties back
       to a solid, muted colour at a fraction of the size is what actually
       reads as "$15" with a small unit after it, not two stacked numbers. */
    font-size: 1rem;
    font-weight: 700;
    color: #94a3b8;
    -webkit-text-fill-color: #94a3b8;
    margin-left: 3px;
}

.od-fine { color: #64748b; font-size: 0.85rem; line-height: 1.55; }

.od-support-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 28px;
    max-width: 780px;
    margin: 0 auto 24px;
    text-align: left;
}

.od-support-grid h3 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    margin: 0 0 8px;
    color: var(--npt-black);
}

.od-support-grid p {
    color: #475569;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}

.od-support-fine { max-width: 780px; margin: 0 auto; text-align: left; }

/* --- Use cases ----------------------------------------------------------- */

/* --- How it works. Numbers are real sequence, not decoration. ------------- */
.od-steps {
    counter-reset: od-step;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 26px;
}
/* The step centres as a unit under the centred section heading. A centred
   bubble over left-aligned text reads as a mistake rather than a choice, so
   the heading and copy come with it. */
.od-steps li {
    counter-increment: od-step;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* In normal flow rather than absolutely positioned, so centring is the
   column's job and the bubble cannot drift out of it. */
.od-steps li::before {
    content: counter(od-step);
    margin-bottom: 14px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cfn-green, #03A63C);
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 700;
}
.od-steps h3 { font-family: var(--font-heading); font-size: 1.1rem; margin: 0 0 8px; }
.od-steps p { color: #475569; line-height: 1.6; margin: 0; max-width: 34ch; }

/* --- Standard vs custom -------------------------------------------------- */
.od-two-col {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}
.od-two-col h3 { font-family: var(--font-heading); font-size: 1.05rem; margin: 22px 0 6px; }
.od-two-col p { color: #475569; line-height: 1.65; margin: 0; }

.od-requirements {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 24px;
}
.od-requirements ul { margin: 0 0 16px; padding-left: 1.1em; }
.od-requirements li { margin-bottom: 8px; color: #475569; }
.od-requirements li::marker { color: var(--cfn-green, #03A63C); }

/* --- Form --------------------------------------------------------------- */
.od-form-root {
    max-width: 720px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: clamp(20px, 4vw, 34px);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

/* Visibility of system status: where you are, and how much is left. */
.od-progress {
    list-style: none;
    display: flex;
    gap: 6px;
    margin: 0 0 28px;
    padding: 0;
    overflow-x: auto;
}
.od-progress li {
    flex: 1 1 0;
    min-width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #94a3b8;
    font-size: 0.72rem;
    text-align: center;
}
.od-progress-num {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.82rem;
}
.od-progress li.is-current { color: var(--npt-black); font-weight: 700; }
.od-progress li.is-current .od-progress-num { background: var(--cfn-green, #03A63C); color: #fff; }
.od-progress li.is-done .od-progress-num { background: #bbf7d0; color: #166534; }

.od-step:focus { outline: none; }
.od-step-count { color: #64748b; font-size: 0.8rem; margin: 0 0 4px; text-transform: uppercase; letter-spacing: 0.08em; }
.od-step-title { font-family: var(--font-heading); font-size: 1.35rem; margin: 0 0 6px; }
.od-step-intro { color: #64748b; margin: 0 0 24px; }

.od-field { margin: 0 0 22px; border: 0; padding: 0; }
.od-label {
    display: block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.98rem;
    margin: 0 0 6px;
    padding: 0;
}
.od-hint { color: #64748b; font-size: 0.85rem; margin: 0 0 10px; }

.od-input {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font: inherit;
    background: #fff;
}
.od-input:focus-visible {
    outline: none;
    border-color: var(--cfn-green, #03A63C);
    box-shadow: 0 0 0 3px rgba(3, 166, 60, 0.18);
}
.od-input[aria-invalid="true"] { border-color: #dc2626; }

.od-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.od-choice {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 18px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.od-choice input { position: absolute; opacity: 0; pointer-events: none; }
.od-choice:hover { background: #f8fafc; }
.od-choice:has(input:checked) {
    border-color: var(--cfn-green, #03A63C);
    background: #e6f6ec;
    font-weight: 700;
}
.od-choice:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(3, 166, 60, 0.22); }

.od-error { color: #b91c1c; font-size: 0.85rem; margin: 8px 0 0; }
.od-error--form { margin-top: 16px; }

.od-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}
.od-nav .od-btn { flex: 0 1 auto; }

/* --- Map ---------------------------------------------------------------- */
.od-map-block { margin: 26px 0 0; padding-top: 22px; border-top: 1px solid #e2e8f0; }
.od-map {
    width: 100%;
    height: clamp(260px, 45vh, 420px);
    border-radius: 12px;
    background: #eef2f6;
    border: 1px solid #cbd5e1;
}
.od-map-status { color: #64748b; font-size: 0.85rem; margin: 10px 0; }
.od-map-actions { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; }
.od-map-distance { color: var(--cfn-dark-green, #0B8C38); font-weight: 700; }

/* --- Review ------------------------------------------------------------- */
.od-outcome {
    padding: 20px 22px;
    border-radius: 12px;
    border-left: 4px solid var(--cfn-green, #03A63C);
    background: #f6faf7;
    margin-bottom: 24px;
}
.od-outcome h3 { font-family: var(--font-heading); margin: 0 0 8px; font-size: 1.15rem; }
.od-outcome p { margin: 0 0 10px; color: #475569; line-height: 1.6; }
.od-outcome--custom_install,
.od-outcome--network_review,
.od-outcome--availability_review { border-left-color: #b45309; background: #fffbeb; }
.od-reasons { margin: 10px 0; padding-left: 1.1em; color: #475569; }
.od-reasons li { margin-bottom: 6px; }

.od-summary { display: grid; gap: 0; margin: 0 0 24px; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.od-summary > div { display: grid; grid-template-columns: 42% 1fr; gap: 12px; padding: 11px 16px; border-bottom: 1px solid #eef2f6; }
.od-summary > div:last-child { border-bottom: 0; }
.od-summary dt { color: #64748b; font-size: 0.88rem; margin: 0; }
.od-summary dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.od-terms { border-top: 1px solid #e2e8f0; padding-top: 20px; }
.od-terms h3 { font-family: var(--font-heading); font-size: 1.05rem; margin: 0 0 10px; }
.od-terms ul { margin: 0 0 18px; padding-left: 1.1em; color: #475569; }
.od-terms li { margin-bottom: 6px; }

/* Unmistakable while terms are unapproved. */
.od-draft-warning {
    padding: 14px 16px;
    border: 2px dashed #b45309;
    border-radius: 10px;
    background: #fffbeb;
    color: #7c2d12;
    margin: 0 0 18px;
}

.od-consent { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; line-height: 1.55; color: #334155; }
.od-consent input { margin-top: 4px; width: 20px; height: 20px; flex: 0 0 auto; }

/* --- Confirmation ------------------------------------------------------- */
.od-done { text-align: center; padding: 20px 0; }
.od-done:focus { outline: none; }
.od-done h3 { font-family: var(--font-heading); font-size: 1.5rem; margin: 0 0 12px; }
.od-done-lead { font-size: 1.05rem; color: var(--npt-black); margin: 0 0 14px; }
.od-done p { color: #475569; line-height: 1.65; }

.od-noscript { padding: 16px; background: #fffbeb; border-radius: 10px; color: #7c2d12; }

/* --- FAQ ---------------------------------------------------------------- */
.od-faq { max-width: 780px; }
.od-faq-item { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 12px; }
.od-faq-item summary {
    cursor: pointer;
    padding: 16px 20px;
    font-family: var(--font-heading);
    font-weight: 600;
    list-style: none;
}
.od-faq-item summary::-webkit-details-marker { display: none; }
.od-faq-item summary::after { content: "+"; float: right; color: var(--cfn-green, #03A63C); font-weight: 700; }
.od-faq-item[open] summary::after { content: "\2212"; }
.od-faq-item summary:focus-visible { outline: 3px solid var(--cfn-dark-green, #0B8C38); outline-offset: -3px; border-radius: 12px; }
.od-faq-body { padding: 0 20px 18px; color: #475569; line-height: 1.65; }
.od-faq-body p { margin: 0; }

/* --- Closing CTA -------------------------------------------------------- */
.od-cta {
    padding: clamp(48px, 6vw, 76px) 20px;
    text-align: center;
    background: linear-gradient(45deg, var(--cfn-green, #03A63C), #a8e063);
    color: #ffffff;
    position: relative;
    overflow: hidden;
}
.od-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
}
.od-cta .od-inner { position: relative; z-index: 1; }
.od-cta h2 { color: #ffffff; }
.od-cta p { color: rgba(255, 255, 255, 0.92); margin: 0 0 24px; }
.od-cta .od-btn--primary { background: #ffffff; color: var(--cfn-dark-green, #0B8C38); }
.od-cta .od-btn--primary:hover { background: #f1f5f9; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
    .od-hero { grid-template-columns: 1fr; padding-top: 32px; }
    .od-hero-media { order: -1; }
    .od-two-col { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .od-progress-label { display: none; }
    .od-nav { flex-direction: column-reverse; }
    .od-nav .od-btn { width: 100%; }
    .od-summary > div { grid-template-columns: 1fr; gap: 2px; }
    .od-choice { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .od-btn { transition: none; }
    .od-btn:hover { transform: none; }
}

/* The honeypot fields. Same rule the other form pages carry, repeated here
   because it lives in each page stylesheet rather than in global.css. Without
   it the traps render as visible inputs. */
.visual-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* --- Where it goes -----------------------------------------------------
   Four photographs in a 2x2, cropped to one ratio with object-position
   holding each subject, since the sources range from portrait to 3:2. The
   places we have no photograph of are listed as text chips below rather than
   filled with stock. */
.od-gallery {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.od-shot {
    position: relative;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .16);
}

.od-shot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Per-photo crops. The barn shot is portrait and its subject sits high; the
   dock shot would otherwise give half the tile to sky. */
.od-shot--barn img { object-position: center 34%; }
.od-shot--dock img { object-position: center 58%; }

/* A wash so the caption stays readable over the photograph. */
.od-shot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(4, 40, 18, .82) 0%, rgba(4, 40, 18, .2) 46%, transparent 72%);
}

.od-shot span {
    position: relative;
    z-index: 1;
    padding: 18px 20px;
    max-width: 88%;
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.25;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

.od-also {
    margin: 30px 0 14px;
    text-align: center;
    color: #475569;
    font-weight: 600;
}

.od-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.od-tags li {
    padding: 9px 18px;
    border: 1px solid #cfe6d7;
    border-radius: 999px;
    background: #ffffff;
    color: var(--cfn-dark-green, #0B8C38);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
}

@media (max-width: 700px) {
    .od-gallery { grid-template-columns: 1fr; }
    .od-shot { aspect-ratio: 3 / 2; }
    .od-tags li { font-size: 0.84rem; padding: 8px 14px; }
}

/* Product and install imagery sitting beside copy in a two-column row. */
.od-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}

/* The product renders are white on white, so they need a ground to sit on.
   Photographs bring their own and get a shadow instead. */
.od-media--panel {
    background: linear-gradient(160deg, #f1f7f2 0%, #e4efe7 100%);
    border-radius: 20px;
    padding: clamp(18px, 3vw, 34px);
}

.od-media--panel img { border-radius: 12px; }

.od-media--photo img { box-shadow: 0 18px 40px rgba(15, 23, 42, .14); }

@media (max-width: 860px) {
    .od-media { order: -1; }
    .od-media img { max-width: 380px; margin: 0 auto; }
}