/*
 * OneTap — PUBLIC / MARKETING surface styles.
 *
 * The colour/type/radius/elevation/motion tokens now live in ONE shared
 * file, tokens.css (loaded before this one). This file keeps only:
 *   - a thin compatibility shim mapping the handful of legacy names this
 *     surface's rules + view files still reference to the canonical
 *     --ot-* tokens, and
 *   - the public site's own component styles (navbar, hero, breadcrumb,
 *     brand lockup, cards, forms, accordion…).
 * Light/dark/System theming and the blue accent are entirely tokens.css's
 * job — nothing here defines a raw colour.
 */

:root {
    /* Legacy aliases — keep existing public.css + view-file references working */
    --ot-bg-deep: var(--ot-bg-subtle);
    --ot-surface-muted: var(--ot-surface-2);
    --ot-shadow-card: var(--ot-shadow-md);

    /* Page-transition loader (public/assets/css/page-loader.css reads these) */
    --ot-loader-bg: var(--ot-bg-subtle);
    --ot-loader-accent: var(--ot-accent);

    /* Motion aliases — canonical values are --ot-dur-* / --ot-ease* in tokens.css */
    --duration-fast: var(--ot-dur-fast);
    --duration-standard: var(--ot-dur-base);
    --duration-slow: var(--ot-dur-slow);
    --ease-fast: var(--ot-ease-fast);
    --ease-standard: var(--ot-ease);
}

/* .ot-theme-toggle and .ot-lang-switch are defined once, for all three
   surfaces, in tokens.css. */

html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Smooth cross-page transitions on browsers that support the View Transitions
   API (Chrome/Edge) — pure CSS, no JS/framework needed. Browsers without
   support just do a normal navigation: this is a progressive enhancement,
   never a requirement for the page to work. */
@view-transition {
    navigation: auto;
}

/* Fade the new page's content in on load. Covers browsers without View
   Transitions support too, so every page gets a soft entrance either way. */
#main-content {
    animation: ot-fade-in var(--duration-slow) var(--ease-standard);
}
@keyframes ot-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

/* Scroll-reveal: elements marked [data-reveal] fade/slide up into place the
   first time they enter the viewport (see main.js IntersectionObserver).
   Staggered via [data-reveal-delay="1|2|3"] for card grids — a real stagger
   (~100ms apart), not simultaneous. */
[data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard);
}
[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}
[data-reveal-delay="1"] { transition-delay: 100ms; }
[data-reveal-delay="2"] { transition-delay: 200ms; }
[data-reveal-delay="3"] { transition-delay: 300ms; }
[data-reveal-delay="4"] { transition-delay: 400ms; }

/* Ambient background blobs — soft blurred depth behind hero/CTA sections.
   Pure decoration: position:absolute, zero layout footprint, inert to
   pointer/AT. Static by default; .ot-blob--drift adds a very slow, gentle
   drift (never fast — see the site-wide animation pass). */
.ot-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}
.ot-blob--drift {
    animation: ot-blob-drift 22s var(--ease-standard) infinite alternate;
}
@keyframes ot-blob-drift {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(18px, -14px) scale(1.05); }
}

/* Hero visual — a slow, continuous gentle float to draw the eye without
   being restless (~4.5s loop, small amplitude). */
.ot-hero-float {
    animation: ot-hero-float 4.5s ease-in-out infinite;
}
@keyframes ot-hero-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
    #main-content { animation: none; }
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .ot-blob--drift, .ot-hero-float {
        animation: none !important;
    }
    /* Hover/press feedback reduces to a plain (near-instant, per the global
       animation-duration/transition-duration override further down) color
       change — no movement — for every transform-based interaction on the
       site (buttons, cards). */
    .btn:hover, .btn:focus, .btn:active,
    .ot-service-card:hover, .ot-price-card:hover, .ot-listing-card:hover,
    .ot-why-tile:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}

/* Scroll progress bar — thin gold line under the navbar tracking read
   progress down the page (main.js updates its width on scroll). */
.ot-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--ot-accent), var(--ot-accent-hover));
    z-index: 1040;
    transition: width 100ms linear;
}
@media (prefers-reduced-motion: reduce) {
    .ot-scroll-progress { transition: none; }
}

/* Brand lockup (logo mark + wordmark) — shared by the public navbar/footer
   AND the admin sidebar, so it lives in theme.css, not public.css. */
.ot-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.1;
}
.ot-brand-mark {
    border-radius: 8px;
    flex-shrink: 0;
}
.ot-brand-text {
    display: flex;
    flex-direction: column;
}
.ot-brand-name {
    font-weight: 800;
    font-size: 1.35rem;
    color: var(--ot-text);
}
.ot-brand-name span { color: var(--ot-accent-text); }
.ot-brand-sub {
    font-size: 0.7rem;
    color: var(--ot-text-muted);
    letter-spacing: 0.02em;
}

/* Shared banner for every non-home public page (services, about, FAQ, etc). */
.ot-page-header {
    padding: 48px 0 40px;
    background:
        radial-gradient(60% 60% at 85% 0%, rgba(37, 99, 235, 0.12), transparent 70%),
        var(--ot-bg);
    border-bottom: 1px solid var(--ot-border);
}
.ot-page-header h1 {
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* Breadcrumbs (Home > Services > Foreign Numbers) — used on every page nested one level
   or deeper below Home. */
.ot-breadcrumb {
    --bs-breadcrumb-divider-color: var(--ot-text-muted);
    margin-bottom: 12px;
}
.ot-breadcrumb .breadcrumb-item a {
    color: var(--ot-text-muted);
}
.ot-breadcrumb .breadcrumb-item a:hover { color: var(--ot-accent-text); }
.ot-breadcrumb .breadcrumb-item.active { color: var(--ot-text); }

html, body {
    background-color: var(--ot-bg);
    color: var(--ot-text);
    font-family: var(--bs-font-sans-serif);
    font-size: 16px;
    line-height: 1.5;
}

a {
    text-decoration: none;
}

/* Every button: hover/press feedback is transform+opacity/color only (GPU-
   friendly, per the site-wide animation pass) — never width/height/margin. */
.btn {
    transition: transform var(--duration-fast) var(--ease-fast),
                box-shadow var(--duration-fast) var(--ease-fast),
                background-color var(--duration-fast) var(--ease-fast),
                border-color var(--duration-fast) var(--ease-fast),
                color var(--duration-fast) var(--ease-fast);
}
.btn:active {
    transform: translateY(0);
}

/* Bootstrap's .btn-primary computes foreground from --bs-primary but not the
   ink color we want on a gold button — set explicitly for contrast. */
.btn-primary {
    background-color: var(--ot-accent);
    border-color: var(--ot-accent);
    color: var(--ot-accent-ink);
    font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--ot-accent-hover);
    border-color: var(--ot-accent-hover);
    color: var(--ot-accent-ink);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px rgba(37, 99, 235, 0.45);
}
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--ot-accent);
    border-color: var(--ot-accent);
    opacity: 0.5;
    transform: none;
    box-shadow: none;
}

.btn-outline-light {
    color: var(--ot-text);
    border-color: var(--ot-border);
}
.btn-outline-light:hover {
    background-color: var(--ot-surface-muted);
    border-color: var(--ot-accent);
    color: var(--ot-text);
    transform: translateY(-2px);
}

.card, .ot-card {
    background-color: var(--ot-surface);
    border: 1px solid var(--ot-border);
    border-radius: var(--ot-radius-lg);
    box-shadow: var(--ot-shadow-card);
    color: var(--ot-text);
}

.form-control, .form-select {
    background-color: var(--ot-bg-deep);
    border: 1px solid var(--ot-border);
    color: var(--ot-text);
    min-height: 44px;
    border-radius: var(--ot-radius-sm);
}
.form-control:focus, .form-select:focus {
    background-color: var(--ot-bg-deep);
    color: var(--ot-text);
    border-color: var(--ot-accent);
    box-shadow: var(--ot-ring);
}
.form-control::placeholder {
    color: var(--ot-text-muted);
}
.form-label {
    color: var(--ot-text);
    font-weight: 500;
    margin-bottom: 6px;
}
.form-text, .text-muted {
    color: var(--ot-text-muted) !important;
}
.invalid-feedback {
    color: var(--ot-danger);
    font-size: 0.875rem;
}
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--ot-danger);
}
.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

.text-accent { color: var(--ot-accent-text) !important; }
.bg-surface { background-color: var(--ot-surface) !important; }
.border-subtle { border-color: var(--ot-border) !important; }

/* Alerts (flash messages) */
.alert-success { background-color: var(--ot-success-soft); border-color: var(--ot-success); color: var(--ot-success); }
.alert-danger  { background-color: var(--ot-danger-soft); border-color: var(--ot-danger); color: var(--ot-danger); }
.alert-info    { background-color: var(--ot-accent-soft); border-color: var(--ot-accent); color: var(--ot-accent-text); }

/* Focus visibility (accessibility hard requirement) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--ot-accent);
    outline-offset: 2px;
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* Touch targets */
.btn, .form-control, .form-select, .nav-link, input[type="checkbox"] {
    touch-action: manipulation;
}
.btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Numbers (balances, prices) get tabular figures so columns don't jitter */
.ot-figure {
    font-variant-numeric: tabular-nums;
}

/* Navbar links — Bootstrap's default navbar assumes a LIGHT background and
   renders nav-link text in a translucent dark gray, which is unreadable on
   our dark navy nav. Set it explicitly instead of relying on .navbar-dark. */
.navbar .navbar-brand,
.navbar .nav-link {
    color: var(--ot-text);
}
.navbar .nav-link {
    font-weight: 600;
    font-size: 0.98rem;
    letter-spacing: 0.005em;
    opacity: 0.88;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    padding-left: 1rem;
    padding-right: 1rem;
    position: relative;
    transition: color 150ms ease-out, opacity 150ms ease-out;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--ot-accent-text);
    opacity: 1;
}
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"] {
    color: var(--ot-accent-text);
    opacity: 1;
}
/* Underline the active/current link — desktop only, so it doesn't crowd the
   collapsed mobile menu. */
@media (min-width: 992px) {
    .navbar .nav-link.active::after,
    .navbar .nav-link[aria-current="page"]::after {
        content: "";
        position: absolute;
        left: 1rem;
        right: 1rem;
        bottom: 0.2rem;
        height: 2px;
        border-radius: 2px;
        background: var(--ot-accent);
    }
}
.navbar-toggler {
    border-color: var(--ot-border);
    color: var(--ot-text);
}
.navbar-toggler:focus {
    box-shadow: var(--ot-ring);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23F8FAFC' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
/* .ot-navbar / .ot-navbar--scrolled (blur+shadow once past the hero) now
   live in public.css, next to the rest of the navbar's own rules — see
   the site-wide animation pass. */

/* Dropdown menus (navbar "Services") — Bootstrap defaults to a light panel,
   reskin to match the dark surface system. Generic, reused wherever a
   dropdown appears (nav now, admin tables from Phase 5 on). */
.dropdown-menu {
    background-color: var(--ot-surface);
    border: 1px solid var(--ot-border);
    border-radius: var(--ot-radius-md);
    box-shadow: var(--ot-shadow-card);
    padding: 8px;
}
.dropdown-item {
    color: var(--ot-text);
    border-radius: var(--ot-radius-sm);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    font-weight: 500;
    font-size: 0.95rem;
}

/* Navbar's own CTA (Get started / Log out) — a touch larger than the
   default btn-sm used elsewhere, to match the navbar's bigger scale. */
.ot-nav-cta {
    font-weight: 600;
    font-size: 0.95rem;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    min-height: 44px;
}
.dropdown-item svg { color: var(--ot-accent-text); flex-shrink: 0; }
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--ot-surface-muted);
    color: var(--ot-text);
}

/* Accordion (FAQ) — same reskin approach as cards/forms above. */
.accordion-item {
    background-color: var(--ot-surface);
    border: 1px solid var(--ot-border);
    border-radius: var(--ot-radius-md) !important;
    overflow: hidden;
    margin-bottom: 12px;
}
.accordion-button {
    background-color: var(--ot-surface);
    color: var(--ot-text);
    font-weight: 600;
    min-height: 44px;
}
.accordion-button:not(.collapsed) {
    background-color: var(--ot-surface-muted);
    color: var(--ot-accent-text);
    box-shadow: none;
}
.accordion-button:focus {
    box-shadow: var(--ot-ring);
    border-color: var(--ot-accent);
}
.accordion-button::after {
    filter: invert(70%) sepia(60%) saturate(500%) hue-rotate(360deg) brightness(1.05);
}
.accordion-body {
    background-color: var(--ot-surface);
    line-height: 1.65;
}