/*
 * Thinkerer Wonder System – Frontend Styles
 *
 * All colours, fonts, and spacing are derived from the existing theme's CSS
 * custom properties (--color-*, --font-*, --space-*) so the modules blend
 * seamlessly and inherit any future theme recolours automatically.
 *
 * Where a theme variable may not exist we fall back to the known palette:
 *   parchment family  : #FAF7F2 / #F5F0E8 / #EDE7D9
 *   ink               : #2C2416
 *   amber             : #B8860B / #8B6914
 *   forest            : #2D5A27
 *   muted text        : #7A7060
 */

/* ── Shared module wrapper ───────────────────────────────────────────────── */

.tws-module {
    margin-top:    clamp( 2.5rem, 6vw, 4rem );
    padding:       2rem 2.5rem;
    border-top:    1px solid var( --color-border, rgba(44,36,22,.12) );
    background:    var( --color-surface-2, #F5F0E8 );
    border-radius: 3px;
    font-family:   var( --font-body, 'Lora', Georgia, serif );
    color:         var( --color-ink, #2C2416 );
}

/* Thin label above each module (e.g. "Wonder Check", "Wonder Ledger") */
.tws-module-label {
    font-family:    var( --font-display, 'Cormorant Garamond', Georgia, serif );
    font-size:      0.7rem;
    font-weight:    600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var( --color-amber, #8B6914 );
    margin-bottom:  0.75rem;
}

/* ── Feature 1: Wonder Poll ──────────────────────────────────────────────── */

.tws-poll__heading {
    font-family: var( --font-display, 'Cormorant Garamond', Georgia, serif );
    font-size:   clamp( 1.3rem, 3vw, 1.65rem );
    font-weight: 500;
    font-style:  italic;
    margin:      0 0 1.25rem;
    color:       var( --color-ink, #2C2416 );
}

.tws-poll__options {
    display: flex;
    gap:     0.75rem;
    flex-wrap: wrap;
}

.tws-poll__option {
    cursor:          pointer;
    padding:         0.55rem 1.4rem;
    border:          1px solid var( --color-amber, #8B6914 );
    border-radius:   2rem;
    background:      transparent;
    font-family:     var( --font-body, 'Lora', Georgia, serif );
    font-size:       0.92rem;
    color:           var( --color-amber, #8B6914 );
    transition:      background 0.18s ease, color 0.18s ease, transform 0.12s ease;
    line-height:     1.3;
}

.tws-poll__option:hover,
.tws-poll__option:focus-visible {
    background: var( --color-amber, #8B6914 );
    color:      #FAF7F2;
    outline:    none;
    transform:  translateY( -1px );
}

.tws-poll__option:disabled {
    opacity: 0.5;
    cursor:  default;
    transform: none;
}

.tws-poll__thankyou,
.tws-poll__hint.tws-poll__thankyou {
    font-style:  italic;
    color:       var( --color-muted, #7A7060 );
    margin:      0;
    font-size:   0.95rem;
    line-height: 1.6;
}

.tws-poll__hint {
    margin:    0.5rem 0 0;
    font-size: 0.88rem;
    color:     var( --color-muted, #7A7060 );
    min-height: 1.2em;
}

/* ── Feature 2: Wonder Ledger ────────────────────────────────────────────── */

.tws-ledger__prompt {
    font-family: var( --font-display, 'Cormorant Garamond', Georgia, serif );
    font-size:   clamp( 1.1rem, 2.5vw, 1.35rem );
    font-style:  italic;
    font-weight: 500;
    margin:      0 0 1.1rem;
    color:       var( --color-ink, #2C2416 );
    line-height: 1.45;
}

.tws-ledger__textarea {
    width:       100%;
    box-sizing:  border-box;
    padding:     0.85rem 1rem;
    border:      1px solid var( --color-border, rgba(44,36,22,.2) );
    border-radius: 3px;
    background:  var( --color-surface, #FAF7F2 );
    font-family: var( --font-body, 'Lora', Georgia, serif );
    font-size:   0.95rem;
    color:       var( --color-ink, #2C2416 );
    resize:      vertical;
    min-height:  90px;
    line-height: 1.6;
    transition:  border-color 0.15s ease, box-shadow 0.15s ease;
}

.tws-ledger__textarea:focus {
    outline:      none;
    border-color: var( --color-amber, #8B6914 );
    box-shadow:   0 0 0 3px rgba(139,105,20,.12);
}

.tws-ledger__textarea::placeholder {
    color:      var( --color-muted, #7A7060 );
    font-style: italic;
}

.tws-ledger__footer {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-top:      0.5rem;
    gap:             1rem;
}

.tws-ledger__char-count {
    font-size:  0.78rem;
    color:      var( --color-muted, #7A7060 );
    font-family: var( --font-body, 'Lora', Georgia, serif );
}

.tws-ledger__submit {
    cursor:          pointer;
    padding:         0.5rem 1.25rem;
    border:          1px solid var( --color-amber, #8B6914 );
    border-radius:   2rem;
    background:      transparent;
    font-family:     var( --font-body, 'Lora', Georgia, serif );
    font-size:       0.88rem;
    color:           var( --color-amber, #8B6914 );
    transition:      background 0.18s, color 0.18s;
    white-space:     nowrap;
}

.tws-ledger__submit:hover:not(:disabled) {
    background: var( --color-amber, #8B6914 );
    color:      #FAF7F2;
}

.tws-ledger__submit:disabled {
    opacity: 0.5;
    cursor:  default;
}

.tws-ledger__status,
.tws-ledger__thankyou {
    margin:      0.75rem 0 0;
    font-size:   0.9rem;
    font-style:  italic;
    color:       var( --color-muted, #7A7060 );
    line-height: 1.55;
}

.tws-status--error {
    color: #9B2335 !important;
    font-style: normal !important;
}

/* ── Feature 5: Continue Exploring ──────────────────────────────────────── */

.tws-pathways__list {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap: 0.1rem;
}

.tws-pathways__link {
    display:         flex;
    align-items:     flex-start;
    gap:             0.85rem;
    padding:         0.8rem 0;
    border-bottom:   1px solid var( --color-border, rgba(44,36,22,.1) );
    text-decoration: none;
    color:           inherit;
    transition:      color 0.15s ease;
}

.tws-pathways__item:last-child .tws-pathways__link {
    border-bottom: none;
}

.tws-pathways__link:hover {
    color: var( --color-amber, #8B6914 );
}

.tws-pathways__icon {
    font-size:   1.2rem;
    line-height: 1.3;
    flex-shrink: 0;
    margin-top:  0.05rem;
}

.tws-pathways__text {
    display:        flex;
    flex-direction: column;
    gap:            0.15rem;
}

.tws-pathways__section {
    font-family:    var( --font-body, 'Lora', Georgia, serif );
    font-size:      0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var( --color-muted, #7A7060 );
}

.tws-pathways__title {
    font-family: var( --font-display, 'Cormorant Garamond', Georgia, serif );
    font-size:   clamp( 1rem, 2.2vw, 1.2rem );
    font-style:  italic;
    font-weight: 500;
    line-height: 1.35;
    color:       var( --color-ink, #2C2416 );
    transition:  color 0.15s ease;
}

.tws-pathways__link:hover .tws-pathways__title {
    color: var( --color-amber, #8B6914 );
}

/* ── Feature 4: Newsletter ───────────────────────────────────────────────── */

.tws-newsletter {
    text-align: center;
}

.tws-newsletter__heading {
    font-family: var( --font-display, 'Cormorant Garamond', Georgia, serif );
    font-size:   clamp( 1.4rem, 3.5vw, 1.9rem );
    font-weight: 500;
    font-style:  italic;
    margin:      0 0 0.5rem;
    color:       var( --color-ink, #2C2416 );
}

.tws-newsletter__subheading {
    color:       var( --color-muted, #7A7060 );
    font-size:   0.97rem;
    margin:      0 0 1.5rem;
    font-style:  italic;
}

.tws-newsletter__form {
    max-width:   400px;
    margin:      0 auto;
}

.tws-newsletter__input {
    width:       100%;
    box-sizing:  border-box;
    padding:     0.7rem 1rem;
    border:      1px solid var( --color-border, rgba(44,36,22,.2) );
    border-radius: 3px;
    background:  var( --color-surface, #FAF7F2 );
    font-family: var( --font-body, 'Lora', Georgia, serif );
    font-size:   0.95rem;
    color:       var( --color-ink, #2C2416 );
    transition:  border-color 0.15s, box-shadow 0.15s;
    margin-bottom: 0.65rem;
}

.tws-newsletter__input:focus {
    outline:      none;
    border-color: var( --color-amber, #8B6914 );
    box-shadow:   0 0 0 3px rgba(139,105,20,.12);
}

.tws-newsletter__submit {
    cursor:       pointer;
    width:        100%;
    padding:      0.7rem 1.5rem;
    border:       none;
    border-radius: 3px;
    background:   var( --color-amber, #8B6914 );
    color:        #FAF7F2;
    font-family:  var( --font-body, 'Lora', Georgia, serif );
    font-size:    0.95rem;
    letter-spacing: 0.03em;
    transition:   background 0.18s, opacity 0.18s;
}

.tws-newsletter__submit:hover:not(:disabled) {
    background: var( --color-amber-dark, #6B5110 );
}

.tws-newsletter__submit:disabled {
    opacity: 0.6;
    cursor:  default;
}

.tws-newsletter__status,
.tws-newsletter__thankyou {
    margin:     0.75rem 0 0;
    font-size:  0.9rem;
    font-style: italic;
    color:      var( --color-muted, #7A7060 );
}

.tws-newsletter__note {
    font-size:  0.78rem;
    color:      var( --color-muted, #7A7060 );
    margin-top: 1rem;
    letter-spacing: 0.02em;
}

/* ── Feature 7: Buy Me a Tea ─────────────────────────────────────────────── */

.tws-tea {
    background:  transparent;
    border-top:  1px solid var( --color-border, rgba(44,36,22,.1) );
    padding-top: 1.5rem;
    padding-bottom: 0;
    margin-top:  2rem;
}

.tws-tea__copy {
    font-size:   0.88rem;
    color:       var( --color-muted, #7A7060 );
    font-style:  italic;
    margin:      0;
    line-height: 1.6;
}

.tws-tea__razorpay-btn,
.tws-tea__link {
    background:   none;
    border:       none;
    padding:      0;
    font-family:  inherit;
    font-size:    inherit;
    font-style:   italic;
    color:        var( --color-amber, #8B6914 );
    cursor:       pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition:   color 0.15s;
}

.tws-tea__razorpay-btn:hover,
.tws-tea__link:hover {
    color: var( --color-amber-dark, #6B5110 );
}

.tws-tea__payment-status {
    margin:     0.6rem 0 0;
    font-size:  0.85rem;
    font-style: italic;
    color:      var( --color-muted, #7A7060 );
    min-height: 1.2em;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media ( max-width: 600px ) {
    .tws-module {
        padding: 1.5rem 1.25rem;
    }

    .tws-poll__options {
        flex-direction: column;
        align-items: flex-start;
    }

    .tws-poll__option {
        width: 100%;
        text-align: center;
    }

    .tws-ledger__footer {
        flex-direction: column;
        align-items:    flex-end;
    }
}

/* ── Accessibility: reduced motion ───────────────────────────────────────── */

@media ( prefers-reduced-motion: reduce ) {
    .tws-poll__option,
    .tws-ledger__submit,
    .tws-newsletter__submit,
    .tws-pathways__link {
        transition: none;
    }
}

/* ── Daily Light Homepage Reflections ────────────────────────────────────── */
/*
 * Scoped to the reflections module inside the Daily Light section (homepage
 * and single DL posts). Uses the theme's own amber palette custom properties
 * so the module reads as native to the DL section, not a widget plugged in.
 *
 * Theme variables referenced here (all defined in :root of style.css):
 *   --amber           #7D5A1E    --amber-border  #EACF90
 *   --ink             #1C1810    --ink-muted     #5A5048
 *   --display         Cormorant Garamond, Georgia, serif
 *   --body            Lora, Georgia, serif
 */

/* Module wrapper — sits inside .dl-inner (740 px centred column) */

.tws-homepage-reflections {
    margin-top: clamp( 2.5rem, 6vw, 3.5rem );
    text-align: left;   /* override .daily-light { text-align: center } */
}

/* ── Quiet invitation — the first whisper ────────────────────────────────── */

.tws-dl-invite {
    font-family:    var( --display, 'Cormorant Garamond', Georgia, serif );
    font-size:      clamp( 1rem, 2.4vw, 1.22rem );
    font-style:     italic;
    font-weight:    400;
    color:          var( --amber, #7D5A1E );
    text-align:     center;
    margin:         0 0 clamp( 2rem, 5vw, 2.75rem );
    letter-spacing: 0.01em;
    opacity:        0.78;
    line-height:    1.5;
}

/* ── Reflections from the garden ─────────────────────────────────────────── */

.tws-reflections-garden {
    margin-bottom: clamp( 1.75rem, 5vw, 2.5rem );
    padding-top:   1.75rem;
    border-top:    1px solid var( --amber-border, #EACF90 );
}

.tws-reflections-garden__label {
    font-family:    var( --body, 'Lora', Georgia, serif );
    font-size:      0.67rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var( --amber, #7D5A1E );
    text-align:     center;
    margin:         0 0 1.5rem;
    opacity:        0.85;
}

.tws-reflections-garden__verses {
    display:        flex;
    flex-direction: column;
    gap:            0;
}

.tws-reflections-garden__verse {
    position:      relative;
    font-family:   var( --display, 'Cormorant Garamond', Georgia, serif );
    font-size:     clamp( 1rem, 2.3vw, 1.18rem );
    font-style:    italic;
    font-weight:   400;
    color:         var( --ink, #1C1810 );
    line-height:   1.65;
    padding:       0.85rem 0 0.85rem 1.4rem;
    border-left:   2px solid var( --amber-border, #EACF90 );
    margin-bottom: 0.9rem;
}

.tws-reflections-garden__verse::before {
    content:     '\201C';
    position:    absolute;
    left:        0.3rem;
    top:         0.75rem;
    font-size:   1rem;
    line-height: 1;
    color:       var( --amber, #7D5A1E );
    opacity:     0.4;
    font-style:  normal;
}

/* Overflow container — collapsed until JS adds .is-open */

.tws-reflections-overflow {
    max-height: 0;
    overflow:   hidden;
    transition: max-height 0.55s ease;
}

.tws-reflections-overflow.is-open {
    max-height: 2400px; /* generous ceiling; genuine height is much smaller */
    transition: max-height 0.8s ease;
}

/* Expand / collapse toggle */

.tws-reflections-expand {
    display:               block;
    margin:                0.4rem auto 0;
    background:            none;
    border:                none;
    padding:               0;
    font-family:           var( --body, 'Lora', Georgia, serif );
    font-size:             0.77rem;
    color:                 var( --amber, #7D5A1E );
    cursor:                pointer;
    letter-spacing:        0.05em;
    text-decoration:       underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba( 125, 90, 30, 0.35 );
    transition:            color 0.15s, text-decoration-color 0.15s;
    line-height:           1;
}

.tws-reflections-expand:hover,
.tws-reflections-expand:focus-visible {
    color:                 var( --ink, #1C1810 );
    text-decoration-color: currentColor;
    outline:               none;
}

/* ── Contribution area ───────────────────────────────────────────────────── */

.tws-reflect-area {
    padding-top: 2rem;
    border-top:  1px solid var( --amber-border, #EACF90 );
    margin-top:  0.5rem;
}

.tws-reflect-area__heading {
    font-family: var( --display, 'Cormorant Garamond', Georgia, serif );
    font-size:   clamp( 1.1rem, 2.5vw, 1.35rem );
    font-weight: 500;
    font-style:  italic;
    color:       var( --ink, #1C1810 );
    margin:      0 0 0.35rem;
    text-align:  center;
    line-height: 1.35;
}

.tws-reflect-area__sub {
    font-family:    var( --body, 'Lora', Georgia, serif );
    font-size:      0.74rem;
    color:          var( --ink-muted, #5A5048 );
    font-style:     italic;
    text-align:     center;
    margin:         0 0 1.25rem;
    letter-spacing: 0.01em;
    opacity:        0.75;
}

/* Textarea — slightly warmer background to read as native to DL palette */

.tws-reflect-area__textarea {
    background:   rgba( 255, 255, 255, 0.5 ) !important;
    min-height:   96px !important;
    border-color: var( --amber-border, #EACF90 ) !important;
}

.tws-reflect-area__textarea:focus {
    border-color: var( --amber, #7D5A1E ) !important;
    box-shadow:   0 0 0 3px rgba( 125, 90, 30, 0.1 ) !important;
}

.tws-reflect-area__footer {
    margin-top: 0.6rem !important;
}

.tws-reflect-area__submit {
    border-color:    var( --amber, #7D5A1E ) !important;
    color:           var( --amber, #7D5A1E ) !important;
    font-size:       0.83rem !important;
    padding:         0.45rem 1.5rem !important;
    letter-spacing:  0.02em;
}

.tws-reflect-area__submit:hover:not(:disabled) {
    background: var( --amber, #7D5A1E ) !important;
    color:      #FAF7F2 !important;
}

.tws-reflect-area__status {
    text-align: center;
}

/* Thank-you state — replaces form after submission */

.tws-reflect-area__thankyou {
    font-family: var( --display, 'Cormorant Garamond', Georgia, serif );
    font-size:   clamp( 1rem, 2.3vw, 1.15rem );
    font-style:  italic;
    font-weight: 400;
    color:       var( --ink-muted, #5A5048 );
    text-align:  center;
    margin:      0;
    line-height: 1.7;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media ( max-width: 640px ) {
    .tws-homepage-reflections {
        margin-top: 2rem;
    }

    .tws-reflections-garden__verse {
        font-size:    0.97rem;
        padding-left: 1.1rem;
    }

    .tws-reflect-area__footer.tws-ledger__footer {
        flex-direction: column;
        align-items:    flex-end;
    }
}

/* ── Homepage preview module (.tws-hp-preview) ───────────────────────────── */
/*
 * Compact two-reflection teaser on the front page. Sits below the attribution
 * inside .dl-inner. The full form lives on the single post page.
 */

.tws-hp-preview {
    margin-top: clamp( 2rem, 5vw, 2.75rem );
    text-align: left;                         /* override .daily-light center */
    padding-top: 1.75rem;
    border-top:  1px solid var( --amber-border, #EACF90 );
}

.tws-hp-preview__label {
    font-family:    var( --body, 'Lora', Georgia, serif );
    font-size:      0.67rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var( --amber, #7D5A1E );
    text-align:     center;
    margin:         0 0 1.25rem;
    opacity:        0.85;
}

.tws-hp-preview__verses {
    display:        flex;
    flex-direction: column;
    gap:            0;
    margin-bottom:  1.25rem;
}

.tws-hp-preview__verse {
    position:      relative;
    font-family:   var( --display, 'Cormorant Garamond', Georgia, serif );
    font-size:     clamp( 0.95rem, 2.2vw, 1.12rem );
    font-style:    italic;
    font-weight:   400;
    color:         var( --ink, #1C1810 );
    line-height:   1.65;
    padding:       0.75rem 0 0.75rem 1.4rem;
    border-left:   2px solid var( --amber-border, #EACF90 );
    margin-bottom: 0.75rem;
    /* Truncate long reflections to two lines on the homepage */
    display:              -webkit-box;
    -webkit-line-clamp:   2;
    -webkit-box-orient:   vertical;
    overflow:             hidden;
}

.tws-hp-preview__verse::before {
    content:     '\201C';
    position:    absolute;
    left:        0.3rem;
    top:         0.7rem;
    font-size:   1rem;
    line-height: 1;
    color:       var( --amber, #7D5A1E );
    opacity:     0.4;
    font-style:  normal;
}

/* CTA link — inherits .dl-archive styling from the theme */
.tws-hp-preview__cta {
    display:    block;
    margin-top: 0.25rem;
    text-align: center;
}

@media ( max-width: 640px ) {
    .tws-hp-preview__verse {
        font-size:    0.95rem;
        padding-left: 1.1rem;
    }
}

/* ── Accessibility: reduced motion ───────────────────────────────────────── */

@media ( prefers-reduced-motion: reduce ) {
    .tws-reflections-overflow {
        transition: none;
    }
}