/* =========================================================
   SmartComplaints — Landing page (index)
   Palette: Citron CMS light theme (--cms-*, defined in common.css)
     bg      var(--cms-bg)                cream/off-white
     accent  var(--cms-primary)           amber/gold, from logo
   Type: IBM Plex Sans (single family, weight-driven hierarchy)

   RESPONSIVE STRATEGY — strict mobile-first.
   The stylesheet is written bottom-up: XXSM is the real base
   (no media query — it IS the default rendering), and every
   tier after it only ADDS or LOOSENS rules for more available
   space. Nothing here assumes a desktop layout that then gets
   squeezed down.

   Project tiers (min-width, enhancement order):
     XXSM   0      – extremely small mobile   (base, unprefixed)
     XS     360px  – small mobile
     SM     576px  – large phones / small tablets
     MD     768px  – tablets
     LG     992px  – laptops / small desktop
     XL     1200px – desktop
     XXL    1400px – large desktop
     XXLG   1600px – very large / high-res desktop

   Orientation + height are handled alongside width wherever a
   short viewport (mobile/tablet landscape) would otherwise force
   an oversized header or push controls below the fold.
   ========================================================= */


/* =========================================================
   1. XXSM — base (0px+)
   Everything below is the default, unconditional rendering.
   Priority: usability > decoration. Single column, no reliance
   on width for anything, compact spacing, generous touch target
   on the one interactive control, no possibility of horizontal
   overflow.
   ========================================================= */

/* -------- Header override (this page only) --------
   #con_head is NOT overridden here anymore: the frosted-glass
   header is common.css's site-wide default now (this page has no
   nav, but the header background/blur still applies), so this page
   just inherits it like every other page. */body.page-index .logo_cms_text {
    color: var(--cms-primary-dark);
    border-left-color: var(--cms-border-dark);
}

/* Logo sizing on the interior CMS pages is tuned tight because a
   nav toggler shares that same 60px header on mobile. This page
   (and login) has no nav toggler, so the logo can run noticeably
   bigger at every breakpoint without crowding anything — it's the
   only branding on screen and shouldn't read as an afterthought.
   .logo_img / .logo_cms_text are shared components whose "full
   size" default lives in common.css for MD and up, so — unlike
   everything else on this page — their small-screen sizes are
   scoped with bounded ranges rather than open-ended min-width,
   to avoid guessing at (or fighting) that shared default. */
@media (max-width: 359.98px) {
    body.page-index .logo_img {
        height: 36px;
    }

    body.page-index .logo_cms_text {
        font-size: 1.05rem;
        margin-left: 10px;
        padding-left: 10px;
    }
}

/* -------- Footer override (this page only) -------- */
body.page-index #con_foot {
    background: var(--cms-surface);
    border-top: 1px solid var(--cms-border);
}

body.page-index #foot_txt {
    color: var(--cms-text-muted);
}

#con_main:has(#con_landing) {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 !important;
    background: var(--cms-bg);
}

#con_landing {
    position: relative;
    width: 100%;
    max-width: 100%;
    /* flex:1 1 auto (not height:100%) — #con_main is a flex ITEM of
       body, sized by flex-grow rather than an explicit `height`, and
       CSS only resolves a percentage height against a containing
       block whose height is "specified explicitly"; a flex-grown
       block doesn't qualify. height:100%/min-height:100% here
       silently fell back to auto, so #con_landing shrank to its
       content's height instead of filling the space between header
       and footer — the hero rode high with dead space below instead
       of being vertically centered. Making #con_main a flex
       container (above) and letting #con_landing grow to fill it
       sidesteps percentage resolution entirely. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 0;
    box-sizing: border-box;

    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    background: var(--cms-bg);
}

/* Soft, even amber wash centered behind the hero — replaces a
   harder two-stop gradient so the color reads as one continuous
   surface instead of a visible band where it meets the header. */
#con_landing::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 38%, var(--cms-accent-soft) 0%, transparent 60%);
    opacity: .55;
    pointer-events: none;
    z-index: 0;
}

/* Faint dot-grid, fading out from the hero center — a quiet nod
   to the routing/network idea behind "workflow automation"
   rather than a decorative filler pattern. Sits behind content
   (z-index 0) and never intercepts clicks. */
#con_landing::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--cms-border-dark) 1px, transparent 1.6px);
    background-size: 26px 26px;
    opacity: .3;
    -webkit-mask-image: radial-gradient(circle at 50% 38%, black 0%, transparent 68%);
    mask-image: radial-gradient(circle at 50% 38%, black 0%, transparent 68%);
    pointer-events: none;
    z-index: 0;
}

/* -------- Top-right status pill --------
   Compact by default; only ever gets MORE spacious as width
   allows (see SM below). Currently commented out in the markup,
   kept ready for re-enabling. */
#landing_status {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 6px 12px;
    border-radius: 999px;
    background: var(--cms-surface);
    border: 1px solid var(--cms-border);
    color: var(--cms-text-light);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .02em;
    max-width: calc(100vw - 28px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#landing_status_dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3ddc84;
    box-shadow: 0 0 8px rgba(61, 220, 132, .5);
    flex-shrink: 0;
}

/* -------- Center content -------- */
#landing_content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 680px;
    padding: 0 18px;
    box-sizing: border-box;
}

#landing_badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: clamp(16px, 4vw, 26px);
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--cms-accent-soft);
    border: 1px solid var(--cms-border-dark);
    color: var(--cms-primary-dark);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
}

.landing_badge_icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

#landing_title {
    margin: 0 0 14px;
    color: var(--cms-text-dark);
    font-size: clamp(1.55rem, 7vw, 3.4rem);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -.01em;
    /* Never let a long single word (or a very narrow XXSM viewport)
       force horizontal scroll on the page. */
    overflow-wrap: break-word;
    word-break: break-word;
}

#landing_tagline {
    margin: 0 0 clamp(22px, 6vw, 36px);
    max-width: 460px;
    color: var(--cms-text-light);
    font-size: clamp(.88rem, 3vw, 1.02rem);
    font-weight: 400;
    line-height: 1.55;
}

/* -------- Process strip: log -> route -> track --------
   Illustrates the three-step flow named in the tagline above,
   so the icons carry real meaning rather than decorating.
   Currently commented out in the markup, kept ready to re-enable. */
#landing_steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 clamp(26px, 7vw, 48px);
}

.landing_step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--cms-text-light);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .01em;
    max-width: 72px;
}

.landing_step_icon {
    width: 20px;
    height: 20px;
    color: var(--cms-primary-dark);
    flex-shrink: 0;
}

.landing_step_divider {
    /* At the very narrowest widths the divider adds noise without
       adding meaning — hidden here, restored once there's room
       to breathe (see XS below). */
    display: none;
    width: 14px;
    height: 1px;
    margin-top: 10px;
    background: var(--cms-border-dark);
    flex-shrink: 0;
}

/* -------- Logo-shaped glowing CTA (no disc, glow hugs the logo itself) --
   clamp() already scales the touch target fluidly; its floor
   (52px) sits comfortably above the 44px minimum comfortable
   touch target at every tier. */
#landing_access {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    padding: clamp(14px, 3vw, 20px);
    border-radius: 50%;
    text-decoration: none !important;
    flex-shrink: 0;
    background: transparent !important;
    box-shadow: none !important;
    transition: transform .18s ease;
    -webkit-tap-highlight-color: transparent;
}

#landing_access:hover,
#landing_access:focus-visible {
    transform: translateY(-2px) scale(1.06);
}

#landing_access:active {
    transform: translateY(0) scale(.98);
}

/* Alert-style radar ping, centered behind the logo */
#landing_access::before,
#landing_access::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(50px, 10vw, 68px);
    height: clamp(50px, 10vw, 68px);
    border-radius: 50%;
    border: 2px solid #7a3308;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    animation: landing_access_ping 1.8s ease-out infinite;
}

#landing_access::after {
    animation-delay: .6s;
}

#landing_access:hover::before,
#landing_access:hover::after,
#landing_access:focus-visible::before,
#landing_access:focus-visible::after {
    animation-play-state: paused;
    opacity: 0;
}

@keyframes landing_access_ping {
    0% {
        transform: translate(-50%, -50%) scale(.8);
        opacity: .7;
        border-color: #7a3308;
    }
    70% {
        opacity: .15;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.1);
        opacity: 0;
        border-color: var(--cms-primary);
    }
}

#landing_access_icon {
    position: relative;
    z-index: 2;
    width: clamp(52px, 11vw, 72px);
    height: clamp(52px, 11vw, 72px);
    filter:
        drop-shadow(0 0 2px #fff4e0)
        drop-shadow(0 0 6px var(--cms-primary))
        drop-shadow(0 0 14px var(--cms-primary))
        drop-shadow(0 0 26px rgba(252, 124, 10, .8));
    animation: landing_access_icon_glow 1.6s ease-in-out infinite;
}

#landing_access:hover #landing_access_icon,
#landing_access:focus-visible #landing_access_icon {
    animation-play-state: paused;
    filter:
        drop-shadow(0 0 3px #fff8ec)
        drop-shadow(0 0 9px var(--cms-primary))
        drop-shadow(0 0 20px var(--cms-primary))
        drop-shadow(0 0 38px rgba(252, 124, 10, 1));
}

#landing_access_icon g,
#landing_access_icon path {
    fill: var(--cms-primary) !important;
}

@keyframes landing_access_icon_glow {
    0%, 60%, 100% {
        filter:
            drop-shadow(0 0 2px #fff4e0)
            drop-shadow(0 0 6px var(--cms-primary))
            drop-shadow(0 0 14px var(--cms-primary))
            drop-shadow(0 0 26px rgba(252, 124, 10, .8));
    }
    30% {
        filter:
            drop-shadow(0 0 3px #fff8ec)
            drop-shadow(0 0 9px var(--cms-primary))
            drop-shadow(0 0 20px var(--cms-primary))
            drop-shadow(0 0 38px rgba(252, 124, 10, 1));
    }
}

#landing_access_label {
    display: block;
    margin-top: 18px;
    color: var(--cms-text-dark);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--cms-border-dark);
}

/* -------- Footer line (in-page, distinct from #con_foot) -------- */
#landing_footer {
    position: static;
    margin-top: clamp(20px, 6vw, 40px);
    text-align: center;
    color: var(--cms-text-muted);
    font-size: .78rem;
    padding: 0 12px;
}

@media (prefers-reduced-motion: reduce) {
    #landing_access,
    #landing_access:hover,
    #landing_access:focus-visible,
    #landing_access:active {
        transition: none;
        transform: none;
        animation: none;
    }

    #landing_access_icon {
        animation: none;
    }

    #landing_access::before,
    #landing_access::after {
        display: none;
    }
}

/* -------- XXSM landscape --------
   On a short, wide phone screen (rotated) height is the scarce
   resource, not width — keep the hero compact top-to-bottom so
   nothing below the fold gets stranded, and let the page scroll
   naturally rather than trying to force everything to fit. */
@media (max-height: 420px) and (orientation: landscape) {
    #con_landing {
        padding: 16px 0;
        justify-content: flex-start;
    }

    #landing_badge {
        margin-bottom: 10px;
    }

    #landing_title {
        font-size: clamp(1.25rem, 5vw, 1.8rem);
        margin-bottom: 8px;
    }

    #landing_tagline {
        margin-bottom: 12px;
    }

    #landing_steps {
        margin-bottom: 14px;
    }

    #landing_access_label {
        margin-top: 12px;
    }
}


/* =========================================================
   2. XS — enhancement (360px+)
   Normal small phones: there's a little more breathing room —
   restore the step divider and let the badge/label sit at their
   intended (non-cramped) sizes.
   ========================================================= */
@media (min-width: 360px) {
    .landing_step_divider {
        display: block;
    }

    #landing_badge {
        gap: 7px;
        padding: 8px 18px;
        font-size: .72rem;
        letter-spacing: .08em;
    }

    #landing_access_label {
        font-size: clamp(.8rem, 2.4vw, 1rem);
        letter-spacing: .12em;
    }
}

@media (min-width: 360px) and (max-width: 575.98px) {
    body.page-index .logo_img {
        height: 40px;
    }

    body.page-index .logo_cms_text {
        font-size: 1.3rem;
        margin-left: 12px;
        padding-left: 12px;
    }
}


/* =========================================================
   3. SM — enhancement (576px+)
   Larger phones / small tablets: status pill, step strip and
   divider open back up to their full spacing now that a single
   column has real width to work with.
   ========================================================= */
@media (min-width: 576px) {
    #landing_status {
        top: 22px;
        right: 28px;
        padding: 7px 16px;
        font-size: .75rem;
    }

    #landing_steps {
        gap: 16px;
    }

    .landing_step {
        max-width: 84px;
        font-size: .76rem;
    }

    .landing_step_divider {
        width: 26px;
    }

    #landing_content {
        padding: 0 24px;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    body.page-index .logo_img {
        height: 44px;
    }

    body.page-index .logo_cms_text {
        font-size: 1.6rem;
    }
}


/* =========================================================
   4. MD — enhancement (768px+)
   Tablets. This is a single-focus landing hero rather than a
   data-entry screen, so there's no ticket-info/ticket-details
   split to introduce here — the enhancement is simply more
   generous vertical rhythm now the header no longer needs to
   economize on logo size (falls back to the common.css default).
   ========================================================= */
@media (min-width: 768px) {
    #con_landing {
        padding: 40px 0;
    }
}

/* Tablet landscape: still height-constrained relative to a
   portrait tablet, so trim vertical rhythm the same way mobile
   landscape does, just with more headroom to work with. */
@media (min-width: 768px) and (max-height: 600px) and (orientation: landscape) {
    #con_landing {
        padding: 20px 0;
    }

    #landing_badge {
        margin-bottom: 14px;
    }

    #landing_steps {
        margin-bottom: 20px;
    }
}


/* =========================================================
   5. LG — enhancement (992px+)
   Small desktops / laptops: comfortable whitespace, stronger
   hierarchy — content width opens up slightly beyond the mobile
   680px cap.
   ========================================================= */
@media (min-width: 992px) {
    #landing_content {
        max-width: 720px;
    }
}


/* =========================================================
   6. XL — enhancement (1200px+)
   Standard desktop: nothing structural changes for a centered
   hero like this one — the fluid clamp() typography and existing
   max-width already give balanced proportions and comfortable
   whitespace without new rules.
   ========================================================= */


/* =========================================================
   7. XXL — enhancement (1400px+)
   Large desktop: cap growth so the hero doesn't stretch toward
   the edges of a wide viewport — width is capped, not content.
   ========================================================= */
@media (min-width: 1400px) {
    #landing_content {
        max-width: 740px;
    }
}


/* =========================================================
   8. XXLG — enhancement (1600px+)
   Very large / high-res desktop. Controls and type stay put —
   the goal is preserved reading width and hierarchy, not bigger
   everything just because the viewport is bigger. Only the
   ceiling on content width nudges up slightly, and whitespace
   around it absorbs the rest.
   ========================================================= */
@media (min-width: 1600px) {
    #landing_content {
        max-width: 760px;
    }

    #landing_title {
        font-size: 3.8rem;
    }

    #landing_tagline {
        max-width: 540px;
        font-size: 1.1rem;
    }
}