/*
 * Kim Anh landing-page extras.
 *
 * The compiled Tailwind build (assets/css/theme.css) was produced against an
 * older set of templates and is missing many utility classes the new-version
 * templates rely on. Rather than force a Tailwind rebuild on every deploy,
 * this file back-fills the exact utilities and component styles the home
 * page needs so the UI renders correctly out of the box.
 */

/* ===================================================================
   1. Base — font size + scroll-padding + mobile-bar breathing room
   =================================================================== */
html { scroll-behavior: smooth; scroll-padding-top: 132px; }
body { font-size: 18px; line-height: 1.625; font-family: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif; }
@media (max-width: 767px) { body { padding-bottom: 80px; } }

/* ===================================================================
   2. Color utility back-fill (tailwind palette that's not in theme.css)
   =================================================================== */
.text-amber-400 { color: #fbbf24; }
.text-amber-500 { color: #f59e0b; }
.bg-amber-400   { background-color: #fbbf24; }
.bg-amber-500   { background-color: #f59e0b; }

.bg-sky-50  { background-color: #f0f9ff; }
.bg-sky-500 { background-color: #0ea5e9; }
.border-sky-100 { border-color: #e0f2fe; }
.text-sky-500 { color: #0ea5e9; }

.bg-orange-50  { background-color: #fff7ed; }
.bg-orange-500 { background-color: #f97316; }
.border-orange-100 { border-color: #ffedd5; }
.text-orange-500 { color: #f97316; }

.bg-emerald-50  { background-color: #ecfdf5; }
.bg-emerald-500 { background-color: #10b981; }
.border-emerald-100 { border-color: #d1fae5; }
.text-emerald-500 { color: #10b981; }

.bg-green-400 { background-color: #4ade80; }

.bg-slate-50  { background-color: #f8fafc; }
.bg-slate-100 { background-color: #f1f5f9; }
.text-slate-500 { color: #64748b; }
.text-slate-700 { color: #334155; }
.border-slate-200 { border-color: #e2e8f0; }

/* Extra brand tints that the original compile skipped */
.bg-brand-purple-200 { background-color: #e9d5ff; }
.bg-brand-purple-300 { background-color: #d8b4fe; }
.text-brand-purple-200 { color: #e9d5ff; }
.text-brand-purple-300 { color: #d8b4fe; }
.border-brand-purple-100 { border-color: #f3e8ff; }
.border-brand-purple-200 { border-color: #e9d5ff; }
.bg-brand-teal-50  { background-color: #effcfa; }
.bg-brand-teal-100 { background-color: #c7f4ec; }
.bg-brand-teal-700 { background-color: #15343f; }
.border-brand-teal-50 { border-color: #effcfa; }

/* Arbitrary-value classes used in template parts */
.bg-\[\#0068FF\] { background-color: #0068FF; }
.bg-\[\#0052CC\] { background-color: #0052CC; }
.text-\[\#0068FF\] { color: #0068FF; }
.hover\:bg-\[\#0052CC\]:hover { background-color: #0052CC; }
.border-\[3px\] { border-width: 3px; }
.border-\[6px\] { border-width: 6px; }
.text-\[11px\] { font-size: 11px; }
.text-\[15px\] { font-size: 15px; }
.text-\[6rem\] { font-size: 6rem; }
.shadow-\[0_-4px_20px_rgba\(15\,42\,47\,0\.08\)\] { box-shadow: 0 -4px 20px rgba(15,42,47,0.08); }
.shadow-\[0_12px_28px_-10px_rgba\(123\,44\,191\,0\.35\)\] { box-shadow: 0 12px 28px -10px rgba(123,44,191,0.35); }
.shadow-\[0_12px_40px_rgba\(123\,44\,191\,0\.4\)\] { box-shadow: 0 12px 40px rgba(123,44,191,0.4); }

/* ===================================================================
   3. Grid templates (arbitrary values)
   =================================================================== */
@media (min-width: 1024px) {
    .lg\:grid-cols-\[1fr\,1\.1fr\] { grid-template-columns: 1fr 1.1fr; }
    .lg\:grid-cols-\[1fr\,1\.3fr\] { grid-template-columns: 1fr 1.3fr; }
    .lg\:grid-cols-\[1\.3fr\,1fr\] { grid-template-columns: 1.3fr 1fr; }
}
@media (min-width: 768px) {
    .md\:grid-cols-\[340px\,1fr\] { grid-template-columns: 340px 1fr; }
}

/* ===================================================================
   4. Gradients (back-fill Tailwind's --tw-gradient-* plumbing)
   =================================================================== */
.bg-gradient-to-b  { background-image: linear-gradient(to bottom,  var(--tw-gradient-stops)); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
.bg-gradient-to-r  { background-image: linear-gradient(to right,   var(--tw-gradient-stops)); }
.bg-gradient-to-t  { background-image: linear-gradient(to top,     var(--tw-gradient-stops)); }

.from-white { --tw-gradient-from: #ffffff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255,255,255,0)); }
.from-brand-purple-50  { --tw-gradient-from: #faf5ff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(250,245,255,0)); }
.from-brand-purple-200 { --tw-gradient-from: #e9d5ff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(233,213,255,0)); }
.from-brand-purple-600 { --tw-gradient-from: #7b2cbf; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(123,44,191,0)); }
.from-brand-teal-800   { --tw-gradient-from: #0f2a2f; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(15,42,47,0)); }

.via-white            { --tw-gradient-stops: var(--tw-gradient-from), #ffffff, var(--tw-gradient-to, rgba(255,255,255,0)); }
.via-brand-purple-600 { --tw-gradient-stops: var(--tw-gradient-from), #7b2cbf, var(--tw-gradient-to, rgba(123,44,191,0)); }
.via-brand-purple-700 { --tw-gradient-stops: var(--tw-gradient-from), #6b21a8, var(--tw-gradient-to, rgba(107,33,168,0)); }
.via-brand-teal-800   { --tw-gradient-stops: var(--tw-gradient-from), #0f2a2f, var(--tw-gradient-to, rgba(15,42,47,0)); }

.to-transparent         { --tw-gradient-to: transparent; }
.to-brand-purple-50     { --tw-gradient-to: #faf5ff; }
.to-brand-purple-200    { --tw-gradient-to: #e9d5ff; }
.to-brand-purple-600    { --tw-gradient-to: #7b2cbf; }
.to-brand-purple-700    { --tw-gradient-to: #6b21a8; }
.to-brand-teal-50       { --tw-gradient-to: #effcfa; }
.to-brand-teal-700      { --tw-gradient-to: #15343f; }
.to-brand-teal-800      { --tw-gradient-to: #0f2a2f; }
.to-white               { --tw-gradient-to: #ffffff; }

/* Common shorthand when theme.css might have missed a specific pair */
.bg-brand-grid { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath fill='none' stroke='%237b2cbf' stroke-opacity='.08' d='M0 .5h40M.5 0v40'/%3E%3C/svg%3E"); }

/* ===================================================================
   5. Aspect-ratio utilities (in case JIT missed them)
   =================================================================== */
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video  { aspect-ratio: 16 / 9; }
.aspect-\[16\/10\] { aspect-ratio: 16 / 10; }
.aspect-\[4\/5\]   { aspect-ratio: 4 / 5; }

/* ===================================================================
   6. Hero — matches newversion/index.html exactly
   =================================================================== */
.kimanh-hero { background: linear-gradient(180deg, #faf5ff 0%, #ffffff 60%); }
.kimanh-hero-bg {
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath fill='none' stroke='%237b2cbf' stroke-opacity='.08' d='M0 .5h40M.5 0v40'/%3E%3C/svg%3E");
    background-size: 40px 40px; opacity: .6; pointer-events: none;
}
.kimanh-hero-blob { position: absolute; border-radius: 50%; filter: blur(64px); pointer-events: none; opacity: .6; }
.kimanh-hero-blob--right { width: 24rem; height: 24rem; top: -5rem; right: -5rem; background: #e9d5ff; }
.kimanh-hero-blob--left  { width: 20rem; height: 20rem; bottom: -8rem; left: -8rem; background: rgba(199,244,236,.5); }

.kimanh-hero-grid { position: relative; z-index: 1; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .kimanh-hero-grid { grid-template-columns: 1.3fr 1fr; gap: 4rem; } }

.kimanh-hero-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .5rem 1rem; border-radius: 9999px;
    background: #fff; border: 1px solid #f3e8ff; color: #7b2cbf;
    font-size: .8125rem; font-weight: 600;
    box-shadow: 0 4px 20px -4px rgba(15,42,47,.08);
    margin-bottom: 1.25rem;
}
.kimanh-hero-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: #4ade80; }

.kimanh-hero-title {
    color: #0f2a2f; font-weight: 800;
    font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1;
    letter-spacing: -.025em; max-width: 30rem; margin-bottom: 1.25rem;
}
.kimanh-hero-sub {
    font-size: clamp(1.125rem, 1.6vw, 1.375rem);
    color: #334155; font-weight: 500;
    margin-bottom: 2rem; max-width: 30rem; line-height: 1.5;
}

.kimanh-hero-ctas { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 2rem; }
.kimanh-hero-meta { display: flex; gap: 1.5rem; color: #475569; font-size: .9375rem; flex-wrap: wrap; }
.kimanh-hero-meta span { display: inline-flex; align-items: center; gap: .375rem; }
.kimanh-hero-meta span::before { content: '✓'; color: #7b2cbf; font-weight: 700; }

.kimanh-hero-visual { position: relative; }
.kimanh-hero-image {
    width: 100%; aspect-ratio: 1 / 1;
    object-fit: cover; object-position: center top;
    border-radius: 2rem;
    box-shadow: 0 20px 40px -12px rgba(15,42,47,.18);
    border: 6px solid #fff; display: block;
}
.kimanh-hero-card {
    position: absolute; background: #fff;
    padding: 1rem 1.25rem; border-radius: 1rem;
    box-shadow: 0 4px 20px -4px rgba(15,42,47,.08);
    border: 1px solid #f1f5f9;
    display: flex; align-items: center; gap: .75rem;
}
.kimanh-hero-card--review { bottom: -1.5rem; left: -1.5rem; }
.kimanh-hero-card--review .kimanh-hero-card-stars { color: #f59e0b; font-size: .875rem; letter-spacing: 1px; }
.kimanh-hero-card--review strong { display: block; color: #0f2a2f; font-size: .9375rem; }
.kimanh-hero-card--review span   { font-size: .75rem; color: #64748b; }
.kimanh-hero-card--years {
    top: 2rem; right: -1.5rem;
    background: #7b2cbf; color: #fff; border: none;
}
.kimanh-hero-card--years strong { font-size: 1.75rem; font-weight: 800; display: block; line-height: 1; }
.kimanh-hero-card--years span   { font-size: .75rem; opacity: .9; }
@media (max-width: 640px) {
    .kimanh-hero-card--review { left: 0; }
    .kimanh-hero-card--years  { right: 0; }
}

/* ===================================================================
   7. FAQ details open state
   =================================================================== */
details[data-kimanh-faq-item] summary::-webkit-details-marker { display: none; }
details[data-kimanh-faq-item] summary { list-style: none; }
details[data-kimanh-faq-item][open] > summary > span:last-child { transform: rotate(45deg); }

/* ===================================================================
   8. Deadline banner styling
   =================================================================== */
#kimanh-aep-banner a { color: #fff; text-decoration: underline; font-weight: 600; }
#kimanh-aep-banner strong { font-weight: 700; }

/* ===================================================================
   9. Sticky mobile bar safe area
   =================================================================== */
.kimanh-mobile-bar { padding-bottom: max(.625rem, env(safe-area-inset-bottom, 0)); }