/* Page-specific composition rules that don't belong in generic components. */

/* ---------- Hero ---------- */
.sd-hero {
    background: var(--sd-gradient-hero);
    padding-block: clamp(3rem, 8vw, 6rem);
    position: relative;
    overflow: hidden;
}

.sd-hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .5;
    z-index: 0;
}

.sd-hero-blob.one {
    width: 380px;
    height: 380px;
    background: var(--sd-brand-soft);
    top: -120px;
    right: -100px;
}

/* Single smooth wave across the lower portion of the hero, with a crisp
   white stroke tracing its crest (dark fill below, light hero gradient
   above) — a single flowing curve rather than a repeating ripple. Sized so
   it comfortably clears the headline on typical viewport heights;
   overflow:hidden on .sd-hero clips it cleanly on shorter heroes. Text that
   structurally sits in this dark zone (the subtitle paragraph and any small
   secondary note) is switched to a light color below — see
   ".sd-hero .text-secondary-sd" — rather than the headline, which stays in
   the light zone above the wave. */
/* Home hero wave — scoped with :not(.section-sm) so none of this can ever
   leak onto the other hero pages, which have their own separate, already-
   working ::after rule further down.

   Two layers, not one, because a background-color placed on the same
   element as the wave image fills the ENTIRE box uniformly (including the
   transparent-above-the-curve part of that image) — the dark color was
   showing through right from the top of the box, not just below the fixed-
   height image as intended. Splitting it in two fixes that: ::before is a
   plain solid-color box (guaranteed dark from --sd-wave-top-home down to
   the bottom, however tall that ends up being), and ::after is only the
   170px-tall wave *graphic*, positioned so its bottom edge lines up exactly
   with ::before's top edge — the curve fades to solid dark right at that
   seam, so the two layers read as one continuous shape. */
.sd-hero:not(.section-sm)::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: var(--sd-wave-top-home, 480px);
    bottom: -1px;
    height: auto;
    z-index: 0;
    pointer-events: none;
    background-color: #0A2E1C;
}

.sd-hero:not(.section-sm)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    /* Anchored by "top" (measured from the actual headline height via JS —
       see site.js) rather than a viewport-height-based height, and using a
       FIXED pixel image height (not stretched to the hero's own height) —
       both needed because the hero's content height (and so the naive "% of
       box" math) swings 3-4x between desktop (text/mockup side by side) and
       mobile (stacked), which a proportional approach can't stay safe across. */
    top: calc(var(--sd-wave-top-home, 480px) - 170px);
    height: 170px;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 170px;
    /* Shared graphic — see --sd-wave-hero in theme.css. Its shallowest point
       (y=88 of 170) is at the far left edge, i.e. still ~92px of dark above
       the seam there, which is more clearance than the old flat-plateau shape
       gave; everywhere else the curve sits higher again. That matters most on
       narrow viewports, where the layout stacks and the subtitle spans nearly
       the full width instead of just the desktop left column. */
    background-image: var(--sd-wave-hero);
}

.sd-hero-content, .sd-hero-visual {
    position: relative;
    z-index: 1;
}

/* The shorter hero pages wrap their content directly in .container-sd
   (rather than a dedicated .sd-hero-content) with no explicit stacking
   order, so ::after would otherwise paint on top of and hide that content —
   generated content paints after an element's normal children regardless of
   DOM position. */
.sd-hero > .container-sd {
    position: relative;
    z-index: 1;
}

/* Extra breathing room between the headline and whatever follows it, so the
   wave transition below has room to sit cleanly between the two — the
   headline stays in the light zone, later hero text sits in the dark zone.
   Overrides Bootstrap's mb-* utility (which is also !important), hence the
   !important here rather than touching every hero view's markup. */
.sd-hero .display-hero {
    margin-bottom: 3.25rem !important;
}

/* The shorter "section-sm" hero variant (Features/Screenshots/Download/
   About/Contact/Support — eyebrow + headline + subtitle + optional button),
   using the same two-layer technique as the Home hero (see
   .sd-hero:not(.section-sm)::before/::after above) for the same reason: a
   background-color on the same element as the wave image bleeds through the
   image's transparent-above-the-curve area, and a proportionally-stretched
   image goes wrong once box height varies a lot between pages/viewports.
   ::before is the guaranteed-solid fill from the seam down to the bottom;
   ::after is only the fixed-height wave graphic, bottom-aligned to that seam. */
.sd-hero.section-sm::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    /* Fallback (no-JS) assumes a 2-line headline, the worst case, so the
       headline never gets covered even without the JS measurement below. */
    top: var(--sd-wave-top, 430px);
    bottom: -1px;
    height: auto;
    z-index: 0;
    pointer-events: none;
    background-color: #0A2E1C;
}

.sd-hero.section-sm::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--sd-wave-top, 430px) - 170px);
    height: 170px;
    z-index: 0;
    pointer-events: none;
    /* Re-asserted explicitly: the shared base rule's background-position/
       background-size differ (Home hero also uses this fixed-height, top-
       anchored image approach, but that's a separate rule scoped with
       :not(.section-sm) so it can't leak here) — kept explicit so this
       stays correct regardless of what the base rule does. */
    background-position: top center;
    background-size: 100% 170px;
    /* Same shared graphic as the Home hero (--sd-wave-hero in theme.css), so
       the transition reads identically on every page instead of these heroes
       having their own steeper variant. Clearance across the width is at
       least ~82px of dark above the seam, which covers these pages' centred
       headline + subtitle wrapping to more lines on narrow viewports. */
    background-image: var(--sd-wave-hero);
}

/* Paragraph/secondary text in the hero structurally sits in the dark wave
   zone, so it needs to be light instead of the site-wide muted gray.
   !important because .text-secondary-sd's own base color rule is also
   !important — without matching that, this override is silently ignored
   regardless of selector specificity. */
.sd-hero .text-secondary-sd {
    color: rgba(255, 255, 255, .92) !important;
}

.sd-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--sd-surface);
    border: 1px solid var(--sd-outline);
    border-radius: var(--sd-radius-pill);
    padding: .5rem 1.1rem;
    font-weight: 600;
    font-size: .875rem;
    box-shadow: var(--sd-shadow-sm);
}

/* ---------- Workflow steps ---------- */
.sd-workflow-step {
    text-align: center;
    padding: 1.5rem 1rem;
}

.sd-workflow-connector {
    display: none;
}

@media (min-width: 992px) {
    .sd-workflow-connector {
        display: block;
        border-top: 2px dashed var(--sd-outline);
        margin-top: 22px;
    }
}

/* ---------- Why SmartDukan / comparison ---------- */
.sd-benefit-list li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .6rem 0;
}

.sd-benefit-check {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--sd-brand-soft);
    color: var(--sd-brand-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .8rem;
}

/* ---------- Screenshots gallery ---------- */
.sd-screens-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding-block: 1rem;
    scroll-snap-type: x mandatory;
}

.sd-screens-track > * {
    scroll-snap-align: start;
    flex: none;
}

.sd-screens-track::-webkit-scrollbar {
    height: 8px;
}

.sd-screens-track::-webkit-scrollbar-thumb {
    background: var(--sd-outline);
    border-radius: var(--sd-radius-pill);
}

/* ---------- Download page ---------- */
.sd-install-steps {
    counter-reset: sd-step;
    list-style: none;
    padding: 0;
}

.sd-install-steps li {
    counter-increment: sd-step;
    position: relative;
    padding-left: 3rem;
    margin-bottom: 1.5rem;
}

.sd-install-steps li::before {
    content: counter(sd-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--sd-brand-soft);
    color: var(--sd-brand-strong);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- About page ---------- */
.sd-value-card {
    padding: 2rem;
}

/* ---------- Contact page ---------- */
.sd-map-placeholder {
    border-radius: var(--sd-radius-lg);
    background:
        linear-gradient(135deg, rgba(20,108,67,.08), rgba(20,108,67,.02)),
        repeating-linear-gradient(45deg, rgba(20,108,67,.05) 0 2px, transparent 2px 14px);
    border: 1px dashed var(--sd-outline);
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sd-text-secondary);
    text-align: center;
    padding: 2rem;
}

.sd-contact-form .form-control,
.sd-contact-form .form-select {
    border-radius: var(--sd-radius-sm);
    border-color: var(--sd-outline);
    padding: .75rem 1rem;
}

.sd-contact-form .form-control:focus,
.sd-contact-form .form-select:focus {
    border-color: var(--sd-brand);
    box-shadow: 0 0 0 4px var(--sd-brand-soft);
}

.sd-contact-info-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

/* ---------- Legal pages ---------- */
.sd-legal-content h2 {
    margin-top: 2.5rem;
    font-size: 1.35rem;
}

.sd-legal-content {
    max-width: 820px;
}

.sd-legal-content p, .sd-legal-content li {
    color: var(--sd-text-secondary);
}