/*
    FastVet Landing - Custom Styles
    Notes: Keep this file modular. Only custom overrides and new styles here.
*/

/* CSS variables and base setup */
:root {
    --brand-teal: #16a3a8;
    --brand-teal-600: #118b90;
    --brand-teal-700: #0d7478;
    --brand-dark: #0f172a;
    --brand-darker: #0b1223;
    --brand-grey-900: #111827;
    --brand-grey-800: #1f2937;
    --brand-grey-700: #374151;
    --brand-grey-600: #4b5563;
    --brand-grey-500: #6b7280;
    --brand-grey-300: #d1d5db;
    --brand-grey-200: #e5e7eb;
    --brand-grey-100: #f3f4f6;
    --white: #ffffff;
    --primary: var(--brand-teal);
    --text: #0f172a;
    --muted: #475569;

    /* effects */
    --radius: 14px;
    --shadow-sm: 0 6px 18px rgba(0,0,0,0.08);
    --shadow-md: 0 14px 30px rgba(0,0,0,0.12);
    --shadow-lg: 0 24px 60px rgba(0,0,0,0.16);
}

/* Dark theme support */
html[data-theme="dark"] {
    --text: #e5e7eb;
    --muted: #94a3b8;
    --brand-grey-100: #0f172a;
    --brand-grey-200: #0b1223;
    --brand-grey-300: #1e293b;
    --brand-grey-500: #94a3b8;
    --brand-grey-600: #64748b;
    --brand-grey-700: #475569;
    --brand-grey-800: #334155;
    --brand-grey-900: #0b1223;
    --brand-dark: #020617;
    --brand-darker: #000814;
}

/* Typography */
body {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    color: var(--text);
    background: var(--brand-grey-100);
    line-height: 1.55;
}

.text-muted { color: var(--muted); }

/* Utilities */
.container-narrow { max-width: 980px; margin: 0 auto; }
.container-wide { max-width: 1240px; margin: 0 auto; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.rounded { border-radius: var(--radius); }
.rounded-lg { border-radius: calc(var(--radius) * 1.5); }
.rounded-full { border-radius: 9999px; }
.btn-primary { background: var(--primary); border: none; }
.btn-primary:hover { background: var(--brand-teal-600); }
.bg-primary { background: var(--primary) !important; }
.text-primary { color: var(--primary) !important; }
.bg-surface { background: var(--white); }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }

/* Header / Nav */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: saturate(180%) blur(8px);
    background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.75));
    border-bottom: 1px solid rgba(2,6,23,0.06);
}
/* Both rows wrap: below ~360px the logo plus Client Portal / Staff Login / Get demo / hamburger
   cannot fit on one line, and without wrapping they pushed every page into a horizontal scroll. */
.nav-inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.nav-links { display: flex; gap: 18px; align-items: center; }
.nav-links a { color: var(--brand-grey-700); text-decoration: none; font-weight: 600; }
.nav-links a:hover { color: var(--brand-teal-700); }
.nav-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; row-gap: 8px; }
.mobile-toggle { display: none; background: transparent; border: none; font-size: 24px; }

@media (max-width: 992px) {
    .nav-links { display: none; }
    /* flex-wrap so the link row cannot overflow a narrow phone as items are added to the nav. */
    .nav-links.open { display: flex; flex-wrap: wrap; row-gap: 10px; position: absolute; left: 0; right: 0; top: 64px; padding: 16px; background: var(--white); border-bottom: 1px solid rgba(2,6,23,0.06); }
    .mobile-toggle { display: inline-flex; }
}

/* Logo */
.logo {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
}

/* Hero */
.hero {
    position: relative;
    min-height: 72vh;
    display: grid;
    /* align-items only — NOT place-items: center. place-items sets justify-items: center too, which
       sizes the grid item to max-content: the width of the longest unwrapped line of the heading.
       That was ~435px regardless of viewport, so the whole page scrolled sideways on a phone.
       Leaving justify-items at its stretch default lets the item take the column width; the card
       inside is still centred by its own max-width + mx-auto. */
    align-items: center;
    background: radial-gradient(1200px 600px at 20% 10%, rgba(22,163,168,0.18), transparent 60%),
                            radial-gradient(1000px 500px at 80% 0%, rgba(22,163,168,0.12), transparent 60%),
                            linear-gradient(180deg, var(--brand-grey-100), var(--brand-grey-100));
}
.hero-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.6));
    border: 1px solid rgba(2,6,23,0.06);
    padding: 36px 28px;
}
/* Fluid size rather than Bootstrap's flat display-4 (3.5rem). At 3.5rem the single word
   "management" measures 387px, which is wider than a phone viewport and cannot wrap — that set the
   hero grid track's minimum and made the whole page scroll sideways on mobile. clamp() keeps the
   desktop appearance identical (it pins to 3.5rem well before 1440px) while letting the heading
   shrink on small screens instead of forcing the page wider. */
.hero h1 {
    font-weight: 900;
    letter-spacing: -0.02em;
    font-size: clamp(2.1rem, 8.5vw, 3.5rem);
}
.subhead { font-size: 1.25rem; color: var(--muted); }

/* Feature grid */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
}
.feature-card { grid-column: span 4; background: var(--white); border: 1px solid rgba(2,6,23,0.06); padding: 22px; transition: transform .2s ease, box-shadow .2s ease; }
.feature-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
@media (max-width: 992px) { .feature-card { grid-column: span 6; } }
@media (max-width: 640px) { .feature-card { grid-column: span 12; } }

/* Pricing */
.pricing { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.plan { grid-column: span 4; background: var(--white); border: 1px solid rgba(2,6,23,0.06); padding: 28px; }
.plan.popular { border-color: var(--brand-teal); box-shadow: 0 0 0 3px rgba(22,163,168,0.12), var(--shadow-sm); }
@media (max-width: 992px) { .plan { grid-column: span 6; } }
@media (max-width: 640px) { .plan { grid-column: span 12; } }

/* FAQ */
details.faq { background: var(--white); border: 1px solid rgba(2,6,23,0.06); padding: 16px 18px; }
details.faq + details.faq { margin-top: 10px; }
details.faq summary { cursor: pointer; font-weight: 700; }
details.faq[open] { box-shadow: var(--shadow-sm); }

/* Footer */
.site-footer { background: var(--brand-dark); color: #cbd5e1; }
.site-footer a { color: #e2e8f0; text-decoration: none; }
.site-footer a:hover { color: var(--white); }
/* The footer link row is a plain .d-flex, which does not wrap: on a phone the links ran off the
   right edge and dragged the whole document into a horizontal scroll. Let them wrap. */
.site-footer .d-flex.gap-3 { flex-wrap: wrap; row-gap: .5rem; justify-content: flex-end; }

/* Country select flag sheet */
.country-select .flag {
        background-image: url("https://cdnjs.cloudflare.com/ajax/libs/country-select-js/2.1.1/img/flags.png");
}

/* Slick tweaks */
.slick-prev {
    margin-left: 12vw;
    z-index: 1000;
}
.slick-next {
    margin-right: 12vw;
    z-index: 1000;
}
.slick-next::before, .slick-prev::before { color: var(--brand-grey-800); }

/* Back to top */
.to-top { position: fixed; right: 18px; bottom: 90px; height: 44px; width: 44px; display: grid; place-items: center; border-radius: 9999px; background: var(--primary); color: #fff; box-shadow: var(--shadow-md); opacity: 0; transform: translateY(6px); transition: all .2s ease; }
.to-top.show { opacity: 1; transform: translateY(0); }

/* Small helpers */
.max-w-2xl { max-width: 680px; }
.max-w-3xl { max-width: 820px; }
.section { padding: 64px 0; }
.kicker { text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: var(--brand-teal-700); font-size: .8rem; }

/* Feature screenshots */
figure.shot { margin: 1.75rem 0; }
figure.shot img { width: 100%; height: auto; display: block; border-radius: var(--radius); border: 1px solid var(--brand-grey-200); box-shadow: var(--shadow-md); background: var(--white); }
figure.shot figcaption { margin-top: .6rem; font-size: .875rem; color: var(--muted); text-align: center; }
/* Desktop + phone pairing (multi-device) */
/* Animated walkthroughs reuse figure.shot; the badge marks them as a recording of the real app.
   The GIFs are the ones built for the help centre and are served from /help/media/gifs/ - there is
   deliberately no second copy under /images. */
figure.shot .shot-badge { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .6rem; padding: .25rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--brand-teal-700); background: rgba(22, 163, 168, .1); }

.shot-pair { display: flex; gap: 1.5rem; align-items: flex-end; flex-wrap: wrap; justify-content: center; margin: 1.75rem 0; }
.shot-pair figure { margin: 0; }
.shot-pair .shot-desktop { flex: 1 1 440px; min-width: 300px; }
.shot-pair .shot-phone { flex: 0 0 190px; max-width: 210px; }
.shot-pair img { width: 100%; height: auto; display: block; border-radius: var(--radius); border: 1px solid var(--brand-grey-200); box-shadow: var(--shadow-md); background: var(--white); }
.shot-pair figcaption { margin-top: .6rem; font-size: .8125rem; color: var(--muted); text-align: center; }
/* Two-up screenshot grid */
.shot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; margin: 1.75rem 0; }
.shot-grid figure { margin: 0; }

/* Preserve legacy selectors used by existing markup */
.herosection__heading { word-break: unset; }

/* AI Feature Section */
.ai-section {
    background: linear-gradient(135deg, var(--brand-dark) 0%, #0c2526 55%, var(--brand-grey-900) 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}
.ai-section::before {
    content: '';
    position: absolute;
    top: -180px; right: -180px;
    width: 560px; height: 560px;
    background: radial-gradient(circle, rgba(22,163,168,0.14), transparent 70%);
    pointer-events: none;
}
.ai-section::after {
    content: '';
    position: absolute;
    bottom: -120px; left: -120px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(22,163,168,0.08), transparent 70%);
    pointer-events: none;
}
.ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(22,163,168,0.15);
    border: 1px solid rgba(22,163,168,0.35);
    color: var(--brand-teal);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 9999px;
    margin-bottom: 22px;
}
.ai-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ai-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    color: #94a3b8;
    font-size: .97rem;
}
.ai-feature-list li i {
    color: var(--brand-teal);
    margin-top: 3px;
    flex-shrink: 0;
}
.ai-mock-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(22,163,168,0.22);
    border-radius: var(--radius);
    padding: 28px;
    position: relative;
    z-index: 1;
}
.ai-mock-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.ai-mock-tag {
    margin-left: auto;
    background: rgba(22,163,168,0.15);
    color: var(--brand-teal);
    font-size: .7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: .08em;
    white-space: nowrap;
}
.ai-mock-divider {
    height: 1px;
    background: rgba(255,255,255,0.07);
    margin: 16px 0;
}
.feature-card--ai {
    border-color: rgba(22,163,168,0.35);
    background: linear-gradient(135deg, rgba(22,163,168,0.07), var(--white));
}
.feature-card--ai h5 { color: var(--brand-teal-700); }

/* Privacy Policy Content */
.privacy-content {
    background: var(--white);
    border: 1px solid rgba(2,6,23,0.06);
    border-radius: var(--radius);
    padding: 48px;
}

.privacy-content h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.privacy-content h2:first-of-type {
    margin-top: 0;
}

.privacy-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.privacy-content p {
    margin-bottom: 1rem;
    line-height: 1.7;
}

.privacy-content ul,
.privacy-content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    line-height: 1.7;
}

.privacy-content li {
    margin-bottom: 0.5rem;
}

.privacy-content a {
    color: var(--brand-teal);
    text-decoration: none;
}

.privacy-content a:hover {
    text-decoration: underline;
}

.privacy-content strong {
    font-weight: 600;
    color: var(--text);
}

@media (max-width: 640px) {
    .privacy-content {
        padding: 24px;
    }
    
    .privacy-content h2 {
        font-size: 1.5rem;
    }
    
    .privacy-content h3 {
        font-size: 1.125rem;
    }
}