/* Landing page polish. Loaded last by index.html, after typography.css (which holds the design tokens).
   Scope: the public page only. Four jobs: a shorter header so the sign-up card sits in the first screen, a stronger hero headline,
   small text that meets 4.5:1 contrast, and the styles for the sections added to the page (why IMPA, published content).
   To go back to the previous look, remove the <link> to this file from index.html. */

/* ---- First screen: less chrome, bigger headline ---- */
.nav-shell { height: 72px; }
.thoranam { height: 46px; background-size: auto 42px; background-position: center 2px; }
.heritage-hero .hero-grid { padding-top: 28px; padding-bottom: 44px; }
.heritage-hero h1 { font-size: clamp(34px, 2.3vw + 22px, 56px); line-height: 1.14; margin: 16px 0 18px; }
.heritage-hero h1 em { font-size: inherit; }
.heritage-hero .hero-description { font-size: 18px; max-width: 480px; }
html[lang="ta"] .heritage-hero h1 { font-size: clamp(30px, 1.7vw + 20px, 46px); line-height: 1.4; }
.heritage-visual { margin-top: 28px; }
.member-entry { margin-top: 20px; }

/* Log in is a clear second action next to the filled "Register free" button */
.login-link { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 16px; color: var(--wine); min-height: 44px; }
.login-link:hover { border-color: var(--wine); }

/* ---- Small text that was below 4.5:1 ---- */
.hero-description, .hero-form-description, .hero-form-note, .hero-login, .reassurance, .reassurance div,
.membership-note, .sample-note, .search-heading > span, .frame-note, .footer-bottom, .footer-bottom span, .footer-bottom button,
.footer-invitation p, .plan p, .plan li, .results-line, .profile-id, .profile-basics,
.profile-tabs button, .discovery-bottom p, .section-heading > div > p:not(.eyebrow), .section-heading > p:not(.eyebrow) { color: var(--muted); }
.footer-links a, .footer-links button, .footer-brand p { color: var(--muted); }
.footer-links a:hover, .footer-links button:hover { color: var(--wine); }
.footer-links h3 { color: var(--ink); }
.plan .plan-eyebrow, .free-badge, .heritage-art-cover > span, .frame-note, .hero-registration > .eyebrow { color: var(--gold-text); }
.profile-tabs button.selected { color: var(--wine); }
.hero-login button { color: var(--wine); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Touch targets (44px) ---- */
.language-button, .text-link, .hero-login button, .footer-links button, .footer-bottom button { min-height: 44px; display: inline-flex; align-items: center; }
.footer-links a { display: inline-flex; align-items: center; min-height: 36px; }

/* ---- Form: required fields are marked ---- */
.hero-registration .form-field:has(:required) > span::after { content: " *"; color: var(--wine); }

/* ---- One section rhythm ---- */
.section-space { padding-top: var(--space-section); padding-bottom: var(--space-section); }
.section-heading.centered { margin-bottom: 40px; }

/* ---- Shared radii: buttons and inputs 6px, cards 10px, the sign-up card 16px ---- */
.button, .hero-registration .button { border-radius: var(--radius-sm); }
.plan, .profile-card, .why-card, .offer-card { border-radius: var(--radius-md); }
.hero-registration { border-radius: var(--radius-lg); }

/* ---- Sections added to the page ---- */
.why-section { background: var(--paper); border-top: 1px solid var(--line); }
.why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.why-card { background: #fff; border: 1px solid var(--line); padding: 28px 24px; }
.why-card .icon { width: 28px; height: 28px; color: var(--gold-text); stroke: currentColor; fill: none; margin-bottom: 16px; }
.why-card h3 { font-size: var(--fs-card); color: var(--wine); margin: 0 0 10px; }
.why-card p { color: var(--muted); margin: 0; }
@media (max-width: 1000px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .why-grid { grid-template-columns: minmax(0, 1fr); } }

/* published content: only drawn when staff have published something */
.cms-section { background: var(--cream); }
.cms-block + .cms-block { margin-top: 64px; }
.cms-block h2 { font-size: var(--fs-section); color: var(--wine); margin: 0 0 12px; }
.cms-lead { color: var(--muted); max-width: 640px; margin: 0 0 24px; }
.cms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 20px; }
.cms-grid article, .cms-grid figure { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 24px; }
.cms-grid h3 { color: var(--wine); margin: 0 0 8px; }
.cms-grid p, .cms-grid blockquote { margin: 0; color: var(--ink); }
.cms-grid figcaption { margin-top: 12px; color: var(--muted); font-size: var(--fs-hint); }
.faq-list { max-width: 760px; margin-top: 20px; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { cursor: pointer; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 600; color: var(--wine); list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--gold-text); }
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { margin: 0 0 20px; color: var(--muted); }
.cms-contact ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.cms-contact li span { display: inline-block; min-width: 88px; color: var(--muted); }
.cms-contact a { color: var(--wine); }

/* ---- Classes that replace inline styles in the scripts ---- */
.plan-was { opacity: .7; font-weight: 400; }
.plan-price { font-size: 1.5em; }
.dialog-switch { text-align: center; margin-top: 23px; font-size: var(--fs-hint); color: var(--muted); }

/* ---- Space for content that arrives after the page has drawn (stops the page jumping) ---- */
.plan-grid { min-height: 380px; }
.profile-grid:empty { min-height: 420px; }