/*
Theme Name: Tender Letters
Theme URI: https://tenderletters.com
Author: Flore
Description: A warm, gentle theme for a personal digital journal. Built to work with the WordPress block editor so new pages can be added freely without breaking the design.
Version: 1.0
Requires PHP: 7.4
Text Domain: tender-letters
*/

:root{
  --ttl-cream:#F8F4EC;
  --ttl-brown:#4B4038;
  --ttl-terracotta:#A96D57;
  --ttl-peach:#D9B7A4;
  --ttl-sage:#7C8F78;
  --ttl-line:#E7DECD;
  --ttl-white:#FFFFFF;
  --ttl-gold:#C68A2E;
  --ttl-gold-soft:#F0C878;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--ttl-cream);color:var(--ttl-brown);font-family:'Lora',serif;font-size:16px;line-height:1.6;}
img{max-width:100%;display:block;}
a{color:var(--ttl-sage);text-decoration:none;}
a:hover{color:var(--ttl-terracotta);}
::selection{background:var(--ttl-gold-soft);}
h1,h2,h3{font-family:'Playfair Display',serif;font-weight:700;margin:0;}
.script{font-family:'Caveat',cursive;font-weight:600;}

.ttl-wrap{max-width:1120px;margin:0 auto;padding:0 32px;}
.ttl-narrow{max-width:780px;margin:0 auto;padding:0 32px;}
.ttl-center{text-align:center;}

/* Header */
.ttl-header{position:sticky;top:0;z-index:40;background:rgba(248,244,236,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--ttl-line);}
.ttl-header-inner{max-width:1120px;margin:0 auto;padding:20px 32px;display:flex;align-items:center;gap:36px;}
.ttl-logo{display:flex;align-items:center;gap:10px;line-height:1;}
.ttl-logo img{width:40px;height:34px;object-fit:contain;}
.ttl-logo span{font-size:28px;color:var(--ttl-terracotta);}
.ttl-nav{display:flex;gap:28px;margin-left:8px;flex-wrap:wrap;list-style:none;padding:0;}
.ttl-nav ul{display:flex;gap:28px;flex-wrap:wrap;list-style:none;margin:0;padding:0;}
.ttl-nav li{list-style:none;margin:0;padding:0;}
.ttl-nav a{font-size:14px;letter-spacing:.04em;color:var(--ttl-brown);font-weight:500;padding-bottom:3px;}
.ttl-nav a.active,.ttl-nav .current-menu-item a{border-bottom:2px solid var(--ttl-terracotta);}
.ttl-header-cta{margin-left:auto;}
.ttl-btn{display:inline-flex;align-items:center;padding:10px 22px;background:var(--ttl-terracotta);color:#fff;border-radius:4px;font-size:13.5px;font-weight:600;letter-spacing:.03em;border:none;cursor:pointer;font-family:'Lora',serif;}
.ttl-btn:hover{color:#fff;opacity:.92;}
.ttl-btn-outline{display:inline-flex;align-items:center;padding:12px 26px;background:transparent;color:var(--ttl-brown);border:1px solid var(--ttl-peach);border-radius:4px;font-size:14.5px;font-weight:600;}
.ttl-menu-toggle{display:none;background:none;border:none;font-size:24px;color:var(--ttl-brown);cursor:pointer;}

/* Hero */
.ttl-hero{position:relative;overflow:hidden;}
.ttl-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ttl-hero-scrim{position:absolute;inset:0;background:rgba(248,244,236,.55);backdrop-filter:blur(6px);pointer-events:none;}
.ttl-hero-content{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:100px 32px 72px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;}
.ttl-hero-content h1{font-size:58px;line-height:1.12;max-width:780px;}
.ttl-hero-content p{font-size:18px;line-height:1.7;color:var(--ttl-brown);max-width:560px;margin:0;}

/* Sections & bands */
.ttl-section{max-width:1120px;margin:0 auto;padding:96px 32px;}
.ttl-band{padding:64px 32px;background:var(--ttl-peach);}
.ttl-band-gold{padding:64px 32px;background:var(--ttl-gold-soft);}
.ttl-band-terracotta{padding:96px 32px;background:var(--ttl-terracotta);color:#fff;text-align:center;}
.ttl-band-terracotta h2{color:#fff;}
.ttl-quote{max-width:680px;margin:0 auto;text-align:center;font-family:'Playfair Display',serif;font-style:italic;font-size:22px;line-height:1.6;color:var(--ttl-brown);}

/* Cards */
.ttl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;}
.ttl-card{display:flex;flex-direction:column;gap:14px;background:var(--ttl-white);border-radius:6px;overflow:hidden;box-shadow:0 2px 10px rgba(75,64,56,.06);}
.ttl-card img,.ttl-card .ttl-thumb{width:100%;height:200px;object-fit:cover;}
.ttl-card-body{padding:4px 22px 24px;display:flex;flex-direction:column;gap:8px;}
.ttl-eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ttl-terracotta);font-weight:600;}
.ttl-card-body h3{font-size:20px;line-height:1.3;}
.ttl-excerpt{font-size:14px;color:var(--ttl-brown);opacity:.8;line-height:1.65;margin:0;}
.ttl-readmore{font-size:13px;color:var(--ttl-sage);font-weight:600;margin-top:4px;}

/* Tags */
.ttl-tag{padding:6px 14px;background:var(--ttl-cream);border:1px solid var(--ttl-peach);border-radius:999px;font-size:12.5px;color:var(--ttl-brown);}
.ttl-tag-row{display:flex;gap:10px;flex-wrap:wrap;}

/* Journal tabs */
.ttl-tabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:0 32px 24px;}
.ttl-tab{padding:9px 20px;border-radius:999px;font-size:13.5px;font-weight:600;border:1px solid var(--ttl-peach);background:transparent;color:var(--ttl-brown);cursor:pointer;font-family:'Lora',serif;}
.ttl-tab.active{background:var(--ttl-terracotta);color:#fff;border-color:var(--ttl-terracotta);}

/* Locked letters */
.ttl-lock-box{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
.ttl-lock-row{display:flex;gap:8px;}
.ttl-lock-row input{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--ttl-peach);border-radius:4px;background:#fff;font-size:13.5px;color:var(--ttl-brown);font-family:'Lora',serif;}
.ttl-lock-row button{flex-shrink:0;padding:9px 14px;background:var(--ttl-terracotta);color:#fff;border:none;border-radius:4px;font-size:13px;font-weight:600;cursor:pointer;font-family:'Lora',serif;}
.ttl-lock-error{font-size:12px;color:var(--ttl-terracotta);}
.ttl-unlocked-text{font-family:'Playfair Display',serif;font-style:italic;font-size:16px;color:var(--ttl-brown);line-height:1.8;margin:6px 0 0;padding:16px;background:var(--ttl-cream);border-radius:6px;border:1px solid var(--ttl-line);}
.ttl-locked-note{font-size:11.5px;color:var(--ttl-sage);font-weight:600;letter-spacing:.04em;}

/* Gallery */
.ttl-gallery-category{margin-bottom:64px;}
.ttl-gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;}
.ttl-gallery-item img{width:100%;height:220px;object-fit:cover;border-radius:8px;}
.ttl-gallery-caption{font-size:12.5px;line-height:1.55;color:var(--ttl-brown);opacity:.75;margin:8px 0 0;}
.ttl-seemore{text-align:center;margin-top:24px;}

/* Gallery page content typed directly in the block editor (Heading + Image blocks) */
.ttl-gallery-content{display:flex;flex-wrap:wrap;gap:20px;}
.ttl-gallery-content h2{flex:0 0 100%;font-size:26px;margin:56px 0 4px;}
.ttl-gallery-content h2:first-child{margin-top:0;}
.ttl-gallery-content .wp-block-image{margin:0;flex:1 1 260px;max-width:calc(33.333% - 14px);}
.ttl-gallery-content figure.wp-block-image img,
.ttl-gallery-content > img{width:100%;height:260px;object-fit:cover;border-radius:8px;display:block;}
.ttl-gallery-content figcaption{font-size:12.5px;line-height:1.55;color:var(--ttl-brown);opacity:.75;margin-top:8px;}
@media (max-width:700px){.ttl-gallery-content .wp-block-image{max-width:100%;}}

/* Shop */
.ttl-shop-price{font-size:14px;color:var(--ttl-terracotta);font-weight:600;}

/* Forms */
.ttl-form{display:flex;flex-direction:column;gap:18px;text-align:left;}
.ttl-form label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--ttl-brown);font-weight:600;}
.ttl-form input,.ttl-form textarea{padding:12px 14px;border:1px solid var(--ttl-peach);border-radius:4px;background:#fff;font-size:15px;color:var(--ttl-brown);font-family:'Lora',serif;}
.ttl-form input:focus,.ttl-form textarea:focus{outline:2px solid var(--ttl-terracotta);outline-offset:1px;}
.ttl-form button{align-self:center;margin-top:6px;padding:13px 34px;background:var(--ttl-terracotta);color:#fff;border:none;border-radius:4px;font-size:15px;font-weight:600;font-family:'Lora',serif;cursor:pointer;}

.ttl-pay-panel{width:100%;max-width:380px;margin:0 auto;background:#fff;border-radius:10px;padding:26px;display:flex;flex-direction:column;align-items:center;gap:14px;box-shadow:0 4px 18px rgba(75,64,56,.12);}
.ttl-pay-panel img{width:200px;height:200px;object-fit:cover;}

/* Post/article */
.ttl-article{max-width:720px;margin:0 auto;padding:72px 32px 100px;}
.ttl-article-hero{width:100%;height:340px;object-fit:cover;border-radius:8px;margin-top:32px;}
.ttl-article-body{margin-top:40px;display:flex;flex-direction:column;gap:22px;font-size:17px;line-height:1.85;}
.ttl-article-body blockquote{font-family:'Playfair Display',serif;font-style:italic;font-size:21px;color:var(--ttl-terracotta);padding:20px 24px;border-left:3px solid var(--ttl-peach);background:#fff;border-radius:4px;margin:0;}
.ttl-article.is-letter .ttl-article-body{font-style:italic;}

/* Footer */
.ttl-footer{background:var(--ttl-brown);color:var(--ttl-cream);padding:64px 32px 32px;}
.ttl-footer-inner{max-width:1120px;margin:0 auto;display:flex;flex-direction:column;gap:28px;align-items:center;text-align:center;}
.ttl-footer-logo{display:flex;align-items:center;gap:10px;}
.ttl-footer-logo span{font-size:28px;color:var(--ttl-peach);}
.ttl-footer-logo img{width:34px;height:29px;object-fit:contain;filter:brightness(0) invert(1);}
.ttl-footer-nav{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;}
.ttl-footer-nav a{font-size:13.5px;color:var(--ttl-cream);opacity:.85;}
.ttl-footer p{margin:0;}

@media (max-width:820px){
  .ttl-about-hero{grid-template-columns:1fr !important;gap:28px !important;}
  .ttl-nav{position:fixed;top:73px;left:0;right:0;background:var(--ttl-cream);padding:0;border-bottom:1px solid var(--ttl-line);display:none;}
  .ttl-nav ul{flex-direction:column;padding:20px 32px;gap:16px;}
  .ttl-nav.open{display:flex;}
  .ttl-menu-toggle{display:block;}
  .ttl-header-cta{margin-left:auto;}
  .ttl-hero-content h1{font-size:38px;}
}