/* Text2Event redesign — tokens and overrides from the Text2Event design system.
   Loaded after styles.css. */

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url("/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url("/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-alt: #f5faf8;
    --hero: #d6f0e9;
    --mint: #7fc9ba;
    --mint-tint: #eef8f5;
    --ink: #1d2330;
    --ink-muted: #5a6476;
    --border: #dde5e3;
    --primary: #7c3aed;
    --primary-hover: #6d28d9;
    --on-primary: #ffffff;
    --primary-soft: #f1ebfe;
    --warning: #b45309;
    --danger: #c81e1e;
    --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --shadow-card: 0 1px 2px rgba(29, 35, 48, 0.06), 0 4px 16px rgba(29, 35, 48, 0.06);
    --shadow-raised: 0 8px 28px rgba(29, 35, 48, 0.12);
    --content-width: 1080px;
}

/* ---------- Base ---------- */
body {
    font-family: var(--font-sans);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font-family: inherit; }

.section-header:hover { color: inherit; }

h2.section-header,
.chrome-extension-content h2,
.faq-section h2,
.feedback-section h2 {
    font-size: 30px;
    line-height: 38px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
}

button {
    background-color: var(--primary);
    color: var(--on-primary);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 15px;
    padding: 10px 16px;
    transition: background-color .15s, box-shadow .15s;
}
button:hover { background-color: var(--primary-hover); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- Header ---------- */
.site-header {
    padding: 16px 24px;
    background: var(--hero);
}
.site-header-inner {
    max-width: var(--content-width);
    justify-content: space-between;
}
.site-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ink);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.02em;
}
.site-logo img { width: 36px; height: 36px; border-radius: 50%; }
.btn-sign-in {
    background: var(--surface);
    color: var(--primary-hover);
    border: 1px solid var(--border);
    font-size: 15px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
}
.btn-sign-in:hover { background: var(--primary-soft); border-color: var(--primary); }

/* ---------- Hero ---------- */
main#home {
    background: var(--hero);
    padding: 48px 24px 96px;
}
main#home > .container {
    max-width: var(--content-width);
    gap: 64px;
    align-items: center;
}
.mascot-col { width: 380px; gap: 24px; }
.mascot { border-radius: var(--radius-lg); }

main#home h1 {
    font-size: 44px;
    line-height: 52px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 12px;
}
main#home .step {
    font-size: 19px;
    line-height: 30px;
    font-weight: 400;
    color: var(--ink-muted);
    margin-bottom: 24px;
}

.textarea-wrapper { max-width: none; }
main#home textarea {
    min-height: 150px;
    font-size: 17px;
    line-height: 26px;
    padding: 16px 64px 40px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-card);
}
/* The id selector above beats the legacy attachment padding, so restate it to clear the thumbnail / PDF chip */
main#home .textarea-wrapper.has-image textarea,
main#home .textarea-wrapper.has-pdf textarea { padding-top: 86px; }
main#home textarea::placeholder { color: var(--ink-muted); }
main#home textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

.camera-btn, .mic-btn, .pdf-btn {
    background: transparent;
    color: var(--ink-muted);
    border: 0;
    border-radius: var(--radius-sm);
}
.camera-btn:hover, .mic-btn:hover, .pdf-btn:hover {
    background: var(--mint-tint);
    color: var(--ink);
}
.timezone-info, .timezone-text { color: var(--ink-muted); }

.step-with-button { margin-top: 12px; }
.step-with-button > span:first-child,
#step2suffix { display: none; }
#generateBtn {
    width: 100%;
    justify-content: center;
    min-height: 52px;
    font-size: 17px;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.25);
}

main#home .form-content > p:last-child {
    color: var(--ink-muted) !important;
    font-size: 14px !important;
    margin-top: 16px !important;
}
main#home .form-content > p:last-child a { color: var(--primary-hover) !important; text-decoration: underline !important; }

/* Stats: a calm trust line under the mascot */
.stats-counter { gap: 8px 32px; }
.stat-number {
    background: none;
    -webkit-text-fill-color: var(--ink);
    color: var(--ink);
    font-size: 36px;
    letter-spacing: -0.02em;
}
.stat-unit { font-size: 20px; }
.stat-label { font-size: 12px; letter-spacing: .08em; color: var(--ink-muted); font-weight: 700; }

/* ---------- Sections: whitespace instead of stripes ---------- */
.chrome-extension-section,
.feedback-section,
.blog-tiles-section,
.contact-section,
.social-section,
.social-section--light {
    background: var(--bg);
    margin-top: 0;
    padding: 80px 24px;
}
.faq-section {
    background: var(--surface-alt);
    margin-top: 0;
    padding: 80px 24px;
}

/* Quick access → app cards */
.chrome-extension-section .container,
.blog-tiles-section .container { max-width: var(--content-width); }
.chrome-extension-content h2 { margin-bottom: 32px; }
.options-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.option-box {
    min-width: 0;
    max-width: none;
    text-align: left;
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    transition: box-shadow .15s, transform .15s;
}
.option-box:hover { box-shadow: var(--shadow-raised); transform: translateY(-2px); }
.option-title { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.option-description { font-size: 14px; line-height: 20px; color: var(--ink-muted); min-height: 0; flex: 1; margin-bottom: 20px; }
.chrome-extension-button {
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 15px;
    background: var(--primary-soft);
    color: var(--primary-hover);
    border-radius: var(--radius-sm);
}
.chrome-extension-button:hover {
    background: var(--primary);
    color: var(--on-primary);
    transform: none;
    box-shadow: none;
}
.chrome-icon { width: 20px; height: 20px; }

/* Feedback: a compact card */
.feedback-section .container {
    max-width: 880px;
    gap: 40px;
    padding: 40px;
    background: var(--mint-tint);
    border-radius: var(--radius-lg);
}
.feedback-section .mascot { width: 200px; }
.feedback-section h2 { margin-bottom: 16px; }
.question-label { color: var(--ink); font-weight: 600; }
.btn-liked {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border);
}
.btn-liked:hover { border-color: var(--primary); background: var(--surface); }
.btn-liked.active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.checkbox-option label { color: var(--ink); }
.checkbox-option input { accent-color: var(--primary); }

/* FAQ */
.faq-section .container { max-width: 680px; }
.faq-section h2:hover { color: var(--primary-hover); }
.faq-question { color: var(--ink); }
.faq-answer { color: var(--ink-muted); line-height: 1.6; }

/* Blog */
.blog-tiles { gap: 24px; margin-top: 32px; }
.blog-tile {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}
.blog-tile:hover { box-shadow: var(--shadow-raised); }
.blog-tile-title { padding: 16px; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--ink); }
.blog-tile:hover .blog-tile-title { color: var(--primary-hover); text-decoration: none; }
.blog-view-all { margin-top: 24px; font-size: 15px; }
.blog-view-all a { color: var(--primary-hover); }

/* Contact + social: lighter, closer to the footer */
.contact-section { background: var(--surface-alt); }
.contact-input, .newsletter-input {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 15px;
}
.social-tile {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

/* ---------- Footer ---------- */
footer {
    background: var(--ink);
    color: #c9cfd8;
    padding: 40px 24px;
    border-top: 0;
}
footer a { color: #e6e9ee; font-size: 14px; }
footer a:hover { color: #ffffff; }
.lang-switcher { color: #9aa3b2; margin-top: 16px; font-size: 13px; }
.lang-switcher a { color: #c9cfd8; margin: 0 4px; }
.lang-active { color: #ffffff; font-weight: 700; }
.footer-copyright { color: #9aa3b2; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .options-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    main#home { padding: 24px 16px 64px; }
    main#home > .container { flex-direction: column-reverse; gap: 32px; }
    .mascot-col { width: 100%; max-width: 280px; }
    .mascot-col .mascot { display: none; }
    main#home h1 { font-size: 32px; line-height: 40px; }
    main#home .step { font-size: 17px; line-height: 26px; }
    .options-grid { grid-template-columns: 1fr; }
    .chrome-extension-section, .feedback-section, .blog-tiles-section,
    .contact-section, .social-section, .faq-section { padding: 56px 16px; }
    .feedback-section .container { padding: 24px; }
    .feedback-section .mascot { display: none; }
    h2.section-header, .chrome-extension-content h2, .faq-section h2, .feedback-section h2 { font-size: 24px; line-height: 32px; }
}
.site-nav-profile { margin-left: auto; margin-right: 16px; }
/* Long labels (Russian, German, French) wrap instead of overflowing the card */
.chrome-extension-button { white-space: normal; text-align: center; line-height: 1.3; }
@media (min-width: 961px) and (max-width: 1180px) { .options-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Result & feedback states (after "Get a calendar file") ---------- */
:root { --success: #13795b; --success-soft: #e7f6ef; --warning-soft: #fdf4e3; --danger: #c0362c; --danger-soft: #fdecea; }

/* Keep the mascot pinned to the top while the result panel grows */
main#home > .container { align-items: flex-start; }
.mascot-col { position: sticky; top: 24px; }

/* Room for camera / mic / PDF / clear buttons inside the input */
main#home textarea { min-height: 184px; }
.clear-input-btn {
    background: transparent;
    border: 0;
    color: var(--ink-muted);
}
.clear-input-btn:hover { background: var(--mint-tint); color: var(--ink); }

/* Result panel: a calm white card, not a green box */
.success-message {
    margin-top: 16px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    font-size: 15px;
    color: var(--ink);
}
.success-message.active { gap: 12px; align-items: stretch; }
.success-text { color: var(--success); font-weight: 600; }
#alternativelySection .success-text { color: var(--ink-muted); font-weight: 500; }
#alternativelySection, #syncedSection { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#alternativelySection > .success-text,
#alternativelySection > .sync-notice,
#alternativelySection > .outlook-warning { flex-basis: 100%; }

.event-card {
    background: var(--mint-tint);
    border: 0;
    border-radius: var(--radius-sm);
    padding: 14px 16px;
}
.event-card-title { color: var(--ink); font-size: 17px; margin-bottom: 6px; }
.event-card-row { color: var(--ink); font-size: 14px; }

/* Calendar buttons: secondary, so the main CTA stays the only solid purple */
.calendar-button {
    margin-top: 0;
    padding: 10px 16px;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 15px;
}
.calendar-button:hover {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary-hover);
    transform: none;
    box-shadow: none;
}
.undo-link { color: var(--ink-muted); margin-left: 4px; }
.undo-link:hover { color: var(--danger); background: none; }

/* Notices: one shape, tinted by meaning, no hard borders */
.sync-notice,
.outlook-warning {
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-radius: var(--radius-sm) !important;
    font-size: 14px !important;
    line-height: 20px;
}
.sync-notice--warn, .outlook-warning {
    background: var(--warning-soft) !important;
    color: #7a3e06 !important;
}
.sync-notice--subscription {
    background: var(--primary-soft);
    color: var(--ink);
}
.sync-notice--subscription a, .event-locked-cta { color: var(--primary-hover); }
.event-list-item--locked { color: var(--ink-muted); }

.extension-promo {
    margin-top: 4px;
    background: var(--mint-tint);
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: 14px;
}
.extension-promo a { color: var(--primary-hover); }

.error-message {
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--danger-soft);
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--danger);
    font-size: 15px;
}
.error-message a { color: var(--danger); font-weight: 600; }

.multi-event-dropdown {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-raised);
}
.multi-event-dropdown a, .multi-event-dropdown-item {
    background: var(--surface);
    border-color: var(--border);
    color: var(--ink);
}
.multi-event-dropdown a:hover, .multi-event-dropdown-item:hover { background: var(--mint-tint); }

@media (max-width: 768px) {
    .mascot-col { position: static; }
    .calendar-button { flex: 1 1 100%; justify-content: center; }
}
/* Timezone hint bottom-left, clear of the icon column on the right */
main#home .timezone-info { left: 12px; right: auto; bottom: 8px; background: transparent; color: var(--ink-muted); }

/* Feedback: mascot to the top, inputs in system style */
.feedback-section .container { align-items: flex-start; }
.feedback-section textarea {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: 15px;
}
.feedback-section textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); outline: none; }