/* ==========================================================================
   Cloud India Hub — hero, built to the supplied reference
   File: public/frontend/css/hero-search.css
   Load AFTER cih-theme.css.

   Namespaced `cih-`. `.hero` is already defined in index.css, ui-enhance.css
   and affiliate.css; `.search-box` in menu-css/web-menu.css. Nothing collides.

   Selectors are doubled (.cih-hero.cih-hero) for the same reason as
   cih-sections.css: the original <style> blocks render into the <body>, after
   this file's <link> in <head>, so equal-specificity rules of theirs win on
   document order.
   ========================================================================== */

.cih-hero.cih-hero {
    /* Set at runtime by the script in the partial, and only for a FIXED
       header — a sticky one is still in normal flow, so the hero already
       clears it and reserving its height again just adds a dead gap. */
    --cih-nav-h: 0px;

    position: relative;
    isolation: isolate;
    font-family: var(--cih-font);
    background:
        radial-gradient(60rem 34rem at 12% 8%, #e9e2ff 0%, rgba(233, 226, 255, 0) 62%),
        radial-gradient(52rem 30rem at 88% 4%, #e4ecff 0%, rgba(228, 236, 255, 0) 60%),
        linear-gradient(180deg, #f4f1ff 0%, #faf9ff 62%, #ffffff 100%);
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
    overflow: clip;
}

/* Background illustration. Inline SVG, roughly 2KB — deliberately not a
   raster image, since public/frontend/images is where the 14.8MB JPEG
   problem lives. */
.cih-hero.cih-hero .cih-hero__art {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Floating TLD chips, as in the reference. Decorative, hidden from assistive
   tech, removed entirely below 1100px where they would crowd the search bar. */
.cih-hero.cih-hero .cih-float {
    position: absolute;
    z-index: -1;
    font-family: var(--cih-mono);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #fff;
    padding: 0.5rem 0.95rem;
    border-radius: 0.7rem;
    box-shadow: 0 10px 24px rgba(21, 14, 46, 0.16);
    animation: cih-bob 7s ease-in-out infinite;
}

/* Positioned in the gutter beside the 1240px content column, never over it.
   Hidden below 1500px, where the gutter is too narrow to hold them without
   colliding with the search bar — which is exactly what happened first. */
.cih-hero.cih-hero .cih-float { display: none; }

@media (min-width: 1500px) {
    .cih-hero.cih-hero .cih-float { display: inline-block; }
    .cih-hero.cih-hero .cih-float--a { top: 16%; left: 1.5rem; background: var(--cih-tld-com); animation-delay: 0s;   rotate: -6deg; }
    .cih-hero.cih-hero .cih-float--b { top: 30%; right: 1.5rem; left: auto; background: var(--cih-brand); animation-delay: 1.6s; rotate: 4deg; }
    .cih-hero.cih-hero .cih-float--c { top: 48%; left: 2rem;   background: var(--cih-tld-in);  animation-delay: 3.2s; rotate: -3deg; }
}

@keyframes cih-bob {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -10px; }
}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

.cih-hero.cih-hero .cih-shell {
    width: min(1240px, calc(100% - 2.5rem));
    margin-inline: auto;
}

/* --------------------------------------------------------------------------
   1. Search band — sticky, sits first
   -------------------------------------------------------------------------- */

/* NOT sticky.
   It was, and that caused the scroll glitch: the whole band — tabs, bar,
   status line and price rail — pinned as one block and slid over the headline
   beneath it. A sticky element only works if what sits below it can scroll
   clear, and the hero content starts immediately after.
   The reference has no sticky bar either. Removing it deletes the whole class
   of bug rather than tuning offsets. */
.cih-hero.cih-hero .cih-searchband {
    position: relative;
    z-index: 2;
    /* .header-upper in menu-css/web-menu.css is position:sticky, z-index:999,
       93px tall. Without this clearance it pins over the tabs and the top of
       the search bar the moment you scroll — which is the "search bar gets
       cropped when I scroll up" bug. */
    padding: calc(var(--cih-nav-h, 0px) + clamp(1.5rem, 4vw, 3rem)) 0 0;
}

/* --- mode toggle: Domain Search / AI Domain Search, kept from the original
       page and styled to sit above the bar as in the reference --- */

.cih-hero.cih-hero .cih-tabs {
    display: inline-flex;
    gap: 0.25rem;
    margin: 0 auto 0.9rem;
    padding: 0.3rem;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--cih-line);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(21, 14, 46, 0.06);
}

.cih-hero.cih-hero .cih-tabs-wrap { display: flex; justify-content: center; }

.cih-hero.cih-hero .cih-tab {
    appearance: none;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--cih-muted);
    padding: 0.55rem 1.15rem;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 40px;
    transition: background 0.16s ease, color 0.16s ease;
}

.cih-hero.cih-hero .cih-tab[aria-selected="true"] {
    background: var(--cih-brand);
    color: #fff;
}

.cih-hero.cih-hero .cih-tab:focus-visible { outline: 3px solid var(--cih-ring); outline-offset: 2px; }

/* --- the bar --- */

.cih-hero.cih-hero .cih-searchbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid var(--cih-line);
    border-radius: 1rem;
    padding: 0.5rem 0.5rem 0.5rem 1.4rem;
    box-shadow: 0 18px 44px rgba(21, 14, 46, 0.10), 0 2px 6px rgba(21, 14, 46, 0.04);
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.cih-hero.cih-hero .cih-searchbar:focus-within {
    border-color: var(--cih-brand);
    box-shadow: 0 18px 44px rgba(109, 40, 217, 0.16), 0 0 0 4px var(--cih-ring);
}

.cih-hero.cih-hero .cih-searchbar.is-invalid { border-color: var(--cih-taken); }

.cih-hero.cih-hero .cih-searchbar__icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: var(--cih-brand);
}

/* Height is pinned here because home-page.css sets a global
   `input { padding:10px; margin-bottom:20px }` that would otherwise inflate
   the bar. */
.cih-hero.cih-hero .cih-searchbar__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 56px;
    margin: 0 !important;
    padding: 0 0.6rem !important;
    border: 0 !important;
    outline: 0;
    background: transparent !important;
    border-radius: 0 !important;
    font-family: var(--cih-font);
    font-size: clamp(0.95rem, 1.6vw, 1.05rem);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--cih-ink);
}

.cih-hero.cih-hero .cih-searchbar__input::placeholder {
    color: var(--cih-faint);
    font-weight: 400;
}

/* Flex line break. Off at desktop, on below 820px. */
.cih-hero.cih-hero .cih-break { display: none; }

/* TLD select, as in the reference. Appended to the typed name on submit when
   the visitor has not typed an extension themselves. */
.cih-hero.cih-hero .cih-tldsel {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding-left: 1rem;
    border-left: 1px solid var(--cih-line);
}

.cih-hero.cih-hero .cih-tldsel select {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    font-family: var(--cih-mono);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--cih-ink);
    padding: 0.5rem 1.5rem 0.5rem 0.35rem;
    min-height: 44px;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--cih-muted) 50%),
        linear-gradient(135deg, var(--cih-muted) 50%, transparent 50%);
    background-position: right 0.6rem center, right 0.25rem center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.cih-hero.cih-hero .cih-tldsel select:focus-visible { outline: 3px solid var(--cih-ring); outline-offset: 2px; }

.cih-hero.cih-hero .cih-searchband .cih-btn {
    flex: 0 0 auto;
    height: 56px;
    padding-inline: 2.1rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, var(--cih-brand-lift, #8b5cf6) 0%, var(--cih-brand) 55%, var(--cih-brand-deep) 100%);
}

.cih-hero.cih-hero .cih-searchband__status {
    min-height: 1.2rem;
    margin: 0.6rem 0 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cih-taken);
    text-align: center;
}

/* --------------------------------------------------------------------------
   2. TLD price rail — the row of chips under the bar
   -------------------------------------------------------------------------- */

.cih-hero.cih-hero .cih-rail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    list-style: none;
    margin: 1.4rem 0 0;
    padding: 0;
}

.cih-hero.cih-hero .cih-rail > li { display: flex; }

.cih-hero.cih-hero .cih-chip {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid var(--cih-line);
    border-radius: 0.65rem;
    padding: 0.6rem 1rem;
    min-height: 44px;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(21, 14, 46, 0.05);
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.cih-hero.cih-hero .cih-chip:hover { transform: translateY(-2px); border-color: var(--cih-hue); }
.cih-hero.cih-hero .cih-chip:focus-visible { outline: 3px solid var(--cih-ring); outline-offset: 2px; }

.cih-hero.cih-hero .cih-chip__ext {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    font-family: var(--cih-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.035em;
    color: var(--cih-ink);
}

.cih-hero.cih-hero .cih-chip__ext::before {
    content: '';
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--cih-hue);
    align-self: center;
}

.cih-hero.cih-hero .cih-chip__price {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--cih-muted);
}

.cih-hero.cih-hero .cih-rail__all {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding-inline: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--cih-brand);
    text-decoration: none;
}

.cih-hero.cih-hero .cih-rail__all:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   3. Headline
   -------------------------------------------------------------------------- */

.cih-hero.cih-hero .cih-hero__head { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }

.cih-hero.cih-hero .cih-hero__title {
    font-family: var(--cih-font);
    font-size: clamp(1.9rem, 4.4vw, 3.35rem);
    line-height: 1.06;
    letter-spacing: -0.035em;
    font-weight: 800;
    font-variation-settings: 'opsz' 96;
    color: var(--cih-ink);
    margin: 0;
    text-wrap: balance;
}

.cih-hero.cih-hero .cih-hero__title em {
    font-style: normal;
    color: var(--cih-brand-lift, #8b5cf6);
}

.cih-hero.cih-hero .cih-hero__sub {
    margin: 0.85rem auto 0;
    max-width: 46ch;
    font-size: clamp(0.95rem, 1.7vw, 1.1rem);
    line-height: 1.55;
    color: var(--cih-muted);
}

/* --------------------------------------------------------------------------
   4. Feature cards
   -------------------------------------------------------------------------- */

.cih-hero.cih-hero .cih-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 1rem;
    list-style: none;
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    padding: 0;
}

.cih-hero.cih-hero .cih-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--cih-line);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 6px 20px rgba(21, 14, 46, 0.05);
    transition: transform 0.16s ease, border-color 0.16s ease;
}

.cih-hero.cih-hero .cih-card:hover { transform: translateY(-4px); border-color: var(--cih-hue); }

.cih-hero.cih-hero .cih-card__icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--cih-hue) 14%, #fff);
    color: var(--cih-hue);
    margin-bottom: 1.1rem;
}

.cih-hero.cih-hero .cih-card__icon svg { width: 26px; height: 26px; }

/* mobile-view.css centres text inside containers at small widths, which the
   cards inherit. Pinned so they read the same at every size. */
.cih-hero.cih-hero .cih-card,
.cih-hero.cih-hero .cih-card__title,
.cih-hero.cih-hero .cih-card__text,
.cih-hero.cih-hero .cih-card__link,
.cih-hero.cih-hero .cih-trust li { text-align: left; }

.cih-hero.cih-hero .cih-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--cih-ink);
    margin: 0 0 0.5rem;
}

.cih-hero.cih-hero .cih-card__text {
    margin: 0 0 1.1rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--cih-muted);
}

.cih-hero.cih-hero .cih-card__link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 32px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--cih-hue);
    text-decoration: none;
}

.cih-hero.cih-hero .cih-card__link:hover { gap: 0.65rem; }

/* --------------------------------------------------------------------------
   5. Trust strip
   -------------------------------------------------------------------------- */

.cih-hero.cih-hero .cih-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    gap: 1rem 1.5rem;
    background: #fff;
    border: 1px solid var(--cih-line);
    border-radius: 1rem;
    box-shadow: 0 6px 20px rgba(21, 14, 46, 0.05);
    padding: 1.1rem 1.5rem;
    margin-top: 1rem;
    list-style: none;
}

.cih-hero.cih-hero .cih-trust li {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cih-ink);
}

.cih-hero.cih-hero .cih-trust svg {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: var(--cih-brand);
}

/* --------------------------------------------------------------------------
   6. Breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .cih-hero.cih-hero .cih-float { display: none; }
}

@media (max-width: 820px) {
    /* Two clean rows instead of three cramped columns.
       Row 1: icon + input, full width. Row 2: extension + Search.
       At 412px the old rule left the input 135px wide inside a 388px bar. */
    .cih-hero.cih-hero .cih-searchbar {
        flex-wrap: wrap;
        padding: 0.65rem;
        gap: 0.55rem;
        border-radius: 0.85rem;
    }

    .cih-hero.cih-hero .cih-searchbar__icon { order: 1; margin-left: 0.4rem; }

    .cih-hero.cih-hero .cih-break {
        display: block;
        order: 2;
        flex: 0 0 100%;
        width: 100%;
        height: 0;
        margin: 0;
    }

    .cih-hero.cih-hero .cih-searchbar__input {
        order: 1;
        flex: 1 1 auto !important;
        min-width: 0;
        height: 46px;
    }

    .cih-hero.cih-hero .cih-tldsel {
        order: 3;
        flex: 0 0 auto;
        border-left: 0;
        padding-left: 0;
        border: 1px solid var(--cih-line);
        border-radius: 0.6rem;
    }

    .cih-hero.cih-hero .cih-tldsel select { padding-left: 0.75rem; }

    .cih-hero.cih-hero .cih-searchband .cih-btn {
        order: 4;
        flex: 1 1 0;
        height: 48px;
        padding-inline: 1rem;
    }
}

@media (max-width: 768px) {
    .cih-hero.cih-hero .cih-shell { width: calc(100% - 1.75rem); }
    .cih-hero.cih-hero .cih-tabs { width: 100%; justify-content: center; }
    .cih-hero.cih-hero .cih-tab { flex: 1 1 0; justify-content: center; padding-inline: 0.6rem; }
    .cih-hero.cih-hero .cih-rail { justify-content: flex-start; gap: 0.5rem; }
    .cih-hero.cih-hero .cih-card { padding: 1.25rem; }
    .cih-hero.cih-hero .cih-card__icon { width: 46px; height: 46px; margin-bottom: 0.85rem; }
    .cih-hero.cih-hero .cih-trust { padding: 0.9rem 1.1rem; gap: 0.75rem; }
    .cih-hero.cih-hero .cih-trust { justify-content: flex-start; }
    .cih-hero.cih-hero .cih-trust li { flex: 1 1 45%; font-size: 0.875rem; }
}

/* iOS zooms the page when a focused input is under 16px. */
@media (max-width: 480px) {
    .cih-hero.cih-hero .cih-searchbar__input { font-size: 16px; }
    .cih-hero.cih-hero .cih-trust li { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .cih-hero.cih-hero .cih-float { animation: none; }
    .cih-hero.cih-hero .cih-card,
    .cih-hero.cih-hero .cih-chip,
    .cih-hero.cih-hero .cih-searchbar { transition: none; }
    .cih-hero.cih-hero .cih-card:hover,
    .cih-hero.cih-hero .cih-chip:hover { transform: none; }
}
