/*
Theme Name: Remember When & Smile
Theme URI: https://example.com/remember-when-smile
Author: Remember When & Smile
Description: A warm, nostalgic, accessibility-minded WordPress theme for senior memory coloring books, calendars, activities, and gifts. Includes a high-impact homepage, WooCommerce-ready product styling, a Memory Moment interaction, large readable typography, and vintage-inspired visual details.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: remember-when-smile
Tags: custom-logo, custom-menu, featured-images, e-commerce, accessibility-ready, block-styles, wide-blocks, one-column, two-columns
*/

:root {
  --rw-navy: #0b2d55;
  --rw-navy-2: #173f6b;
  --rw-cream: #fff8e8;
  --rw-paper: #fffdf7;
  --rw-coral: #e45a3f;
  --rw-coral-dark: #c9422b;
  --rw-sage: #7f8b53;
  --rw-gold: #d8a13b;
  --rw-gold-soft: #f0d9a6;
  --rw-ink: #253247;
  --rw-muted: #667085;
  --rw-white: #ffffff;
  --rw-shadow: 0 24px 60px rgba(11, 45, 85, .14);
  --rw-shadow-soft: 0 14px 34px rgba(11, 45, 85, .10);
  --rw-radius: 28px;
  --rw-radius-sm: 18px;
  --rw-max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--rw-ink);
  background: var(--rw-paper);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.rw-large-type { font-size: 21px; }
body.rw-high-contrast { --rw-paper:#fff; --rw-cream:#fff; --rw-ink:#111; --rw-muted:#333; --rw-navy:#001a33; }
img { max-width: 100%; height: auto; }
a { color: var(--rw-navy); text-decoration-thickness: .1em; text-underline-offset: .18em; }
a:hover { color: var(--rw-coral-dark); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 4px solid var(--rw-gold); outline-offset: 4px; border-radius: 5px; }

.rw-container { width: min(calc(100% - 36px), var(--rw-max)); margin-inline: auto; }
.rw-section { padding: 88px 0; position: relative; }
.rw-kicker { margin: 0 0 8px; color: var(--rw-coral-dark); text-transform: uppercase; letter-spacing: .14em; font-weight: 800; font-size: .82rem; }
.rw-section-title { margin: 0; font-family: Georgia, 'Times New Roman', serif; color: var(--rw-navy); font-size: clamp(2.1rem, 4vw, 3.8rem); line-height: 1.08; letter-spacing: -.035em; }
.rw-section-copy { max-width: 760px; color: var(--rw-muted); font-size: 1.06rem; }
.rw-serif { font-family: Georgia, 'Times New Roman', serif; }
.rw-center { text-align: center; }
.rw-center .rw-section-copy { margin-inline: auto; }

.rw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 14px 24px; border-radius: 999px; border: 2px solid transparent;
  font-weight: 800; text-decoration: none; cursor: pointer; transition: .2s ease;
}
.rw-btn-primary { background: var(--rw-coral); color: #fff; box-shadow: 0 12px 26px rgba(228,90,63,.25); }
.rw-btn-primary:hover { background: var(--rw-coral-dark); color: #fff; transform: translateY(-2px); }
.rw-btn-secondary { background: #fff; color: var(--rw-navy); border-color: rgba(11,45,85,.17); }
.rw-btn-secondary:hover { border-color: var(--rw-navy); color: var(--rw-navy); transform: translateY(-2px); }
.rw-btn-navy { background: var(--rw-navy); color: #fff; }
.rw-btn-navy:hover { background: var(--rw-navy-2); color: #fff; transform: translateY(-2px); }

/* Utility accessibility toolbar */
.rw-accessibility {
  position: fixed; z-index: 1000; right: 18px; bottom: 18px; display: flex; gap: 8px;
  padding: 8px; border-radius: 999px; background: rgba(255,255,255,.95); box-shadow: var(--rw-shadow-soft); border: 1px solid rgba(11,45,85,.12);
}
.rw-accessibility button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--rw-cream); color: var(--rw-navy); font-weight: 900; cursor: pointer; }
.rw-accessibility button:hover { background: var(--rw-gold-soft); }

/* Announcement */
.rw-announcement { background: var(--rw-navy); color: #fff; font-size: .92rem; text-align: center; padding: 9px 15px; }
.rw-announcement strong { color: #fff7d8; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 900; background: rgba(255,253,247,.94); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(11,45,85,.08); }
.rw-nav { min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.rw-brand { display: flex; align-items: center; min-width: 220px; }
.rw-brand img { width: 210px; max-height: 82px; object-fit: contain; object-position: left center; }
.rw-brand-text { text-decoration: none; color: var(--rw-navy); font: 700 1.5rem Georgia,serif; }
.rw-menu { display: flex; align-items: center; gap: 25px; list-style: none; padding: 0; margin: 0; }
.rw-menu a { color: var(--rw-ink); font-weight: 700; text-decoration: none; }
.rw-menu a:hover { color: var(--rw-coral-dark); }
.rw-nav-cta { white-space: nowrap; }
.rw-menu-toggle { display: none; border: 0; width: 48px; height: 48px; border-radius: 12px; background: var(--rw-cream); color: var(--rw-navy); font-size: 1.4rem; cursor: pointer; }

/* Hero */
.rw-hero {
  overflow: hidden; padding: 74px 0 82px;
  background:
    radial-gradient(circle at 14% 16%, rgba(216,161,59,.20), transparent 25%),
    radial-gradient(circle at 89% 18%, rgba(228,90,63,.12), transparent 26%),
    linear-gradient(180deg, #fffdf8 0%, #fff8e8 100%);
}
.rw-hero::before, .rw-hero::after { content:""; position:absolute; border-radius:50%; pointer-events:none; }
.rw-hero::before { width: 420px; height: 420px; border: 2px dashed rgba(216,161,59,.35); right:-150px; top:-130px; }
.rw-hero::after { width: 270px; height: 270px; border: 1px solid rgba(127,139,83,.25); left:-130px; bottom:-120px; }
.rw-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 54px; }
.rw-hero h1 { margin: 0 0 20px; font: 700 clamp(3rem, 6vw, 5.8rem)/.95 Georgia, 'Times New Roman', serif; color: var(--rw-navy); letter-spacing: -.055em; }
.rw-hero h1 em { display: block; color: var(--rw-coral); font-weight: 400; }
.rw-hero-lead { max-width: 650px; font-size: clamp(1.1rem, 2vw, 1.34rem); color: #4c5a6d; margin: 0 0 28px; }
.rw-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.rw-hero-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.rw-pill { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid rgba(11,45,85,.1); border-radius:999px; padding:8px 13px; font-size:.9rem; font-weight:700; color:var(--rw-navy); box-shadow:0 8px 18px rgba(11,45,85,.06); }
.rw-pill::before { content:"♥"; color:var(--rw-coral); }

.rw-memory-stage { position: relative; min-height: 550px; display: grid; place-items: center; }
.rw-memory-sun { position:absolute; inset: 45px 35px auto auto; width:420px; height:420px; border-radius:50%; background: repeating-conic-gradient(from 0deg, rgba(216,161,59,.16) 0 5deg, transparent 5deg 12deg); mask: radial-gradient(circle, transparent 0 34%, #000 35% 100%); opacity:.9; }
.rw-logo-card { position:relative; z-index:2; width:min(92%, 520px); padding:26px; border-radius:36px; background:rgba(255,255,255,.92); box-shadow:0 30px 80px rgba(11,45,85,.18); transform:rotate(-1deg); border:1px solid rgba(216,161,59,.32); }
.rw-logo-card img { display:block; width:100%; }
.rw-float-card { position:absolute; z-index:3; width:180px; background:#fff; border-radius:18px; padding:14px; box-shadow:var(--rw-shadow-soft); border:1px solid rgba(11,45,85,.09); font-weight:800; color:var(--rw-navy); text-align:center; }
.rw-float-card small { display:block; color:var(--rw-coral-dark); text-transform:uppercase; font-size:.68rem; letter-spacing:.11em; margin-bottom:3px; }
.rw-float-a { left:-8px; top:60px; transform:rotate(-6deg); }
.rw-float-b { right:-12px; top:145px; transform:rotate(5deg); }
.rw-float-c { left:35px; bottom:42px; transform:rotate(4deg); }
.rw-float-d { right:10px; bottom:55px; transform:rotate(-5deg); }

/* Trust strip */
.rw-trust { background:#fff; border-top:1px solid rgba(11,45,85,.07); border-bottom:1px solid rgba(11,45,85,.07); }
.rw-trust-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.rw-trust-item { padding:26px 20px; text-align:center; font-weight:800; color:var(--rw-navy); border-right:1px solid rgba(11,45,85,.08); }
.rw-trust-item:last-child { border-right:0; }
.rw-trust-item span { display:block; font-size:1.5rem; margin-bottom:4px; }

/* Effect steps */
.rw-effect { background:#fff; }
.rw-step-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; }
.rw-step { position:relative; overflow:hidden; min-height:320px; padding:34px; border-radius:var(--rw-radius); background:linear-gradient(145deg,#fffaf0,#fff); border:1px solid rgba(216,161,59,.25); box-shadow:var(--rw-shadow-soft); }
.rw-step-num { position:absolute; right:18px; top:-22px; font:700 8rem/1 Georgia,serif; color:rgba(216,161,59,.14); }
.rw-step-icon { width:70px; height:70px; display:grid; place-items:center; border-radius:22px; background:var(--rw-navy); color:#fff; font-size:2rem; box-shadow:0 15px 30px rgba(11,45,85,.18); }
.rw-step h3 { margin:24px 0 10px; font:700 2rem/1.1 Georgia,serif; color:var(--rw-navy); }
.rw-step p { margin:0; color:var(--rw-muted); }

/* Product showcase */
.rw-products { background:linear-gradient(180deg,var(--rw-cream),#fff); }
.rw-product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:40px; }
.rw-product-card { background:#fff; border-radius:24px; overflow:hidden; box-shadow:var(--rw-shadow-soft); border:1px solid rgba(11,45,85,.08); transition:.24s ease; }
.rw-product-card:hover { transform:translateY(-7px); box-shadow:var(--rw-shadow); }
.rw-product-art { position:relative; aspect-ratio: 4/3; display:grid; place-items:center; overflow:hidden; background:linear-gradient(135deg,#fbefcf,#fff); }
.rw-product-art::before { content:""; width:78%; height:78%; border-radius:50%; border:2px dashed rgba(216,161,59,.45); position:absolute; }
.rw-product-emoji { position:relative; font-size:5rem; filter:drop-shadow(0 14px 20px rgba(11,45,85,.12)); }
.rw-product-image { width:100%; height:100%; object-fit:cover; position:relative; z-index:2; }
.rw-product-body { padding:24px; }
.rw-product-body h3 { margin:0 0 8px; font:700 1.5rem/1.15 Georgia,serif; color:var(--rw-navy); }
.rw-product-body p { margin:0 0 16px; color:var(--rw-muted); }
.rw-product-link { font-weight:900; text-decoration:none; color:var(--rw-coral-dark); }

/* Memory lane */
.rw-memory-lane { background:var(--rw-navy); color:#fff; overflow:hidden; }
.rw-memory-lane .rw-section-title { color:#fff; }
.rw-memory-lane .rw-section-copy { color:#d8e2ee; }
.rw-lane-track { display:grid; grid-template-columns:repeat(5, minmax(220px,1fr)); gap:18px; margin-top:40px; }
.rw-lane-card { min-height:290px; border-radius:24px; padding:24px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.13); position:relative; overflow:hidden; transition:.25s ease; }
.rw-lane-card:hover { transform:translateY(-6px) rotate(-1deg); background:rgba(255,255,255,.12); }
.rw-lane-card::after { content:""; position:absolute; width:150px; height:150px; border:1px solid rgba(240,217,166,.25); border-radius:50%; right:-55px; bottom:-55px; }
.rw-lane-year { font:700 3.4rem/1 Georgia,serif; color:var(--rw-gold-soft); opacity:.95; }
.rw-lane-card h3 { font:700 1.45rem/1.15 Georgia,serif; margin:28px 0 10px; color:#fff; }
.rw-lane-card p { color:#d8e2ee; margin:0; }
.rw-lane-icon { font-size:2.4rem; margin-top:24px; }

/* Interactive Memory Moment */
.rw-memory-moment { background:#fff; }
.rw-moment-box { display:grid; grid-template-columns:.8fr 1.2fr; gap:34px; align-items:center; padding:44px; border-radius:36px; background:linear-gradient(145deg,#fff7df,#fff); border:1px solid rgba(216,161,59,.32); box-shadow:var(--rw-shadow); }
.rw-moment-dial { width:230px; height:230px; margin:auto; border-radius:50%; display:grid; place-items:center; text-align:center; padding:25px; background:var(--rw-navy); color:#fff; border:12px solid #fff; outline:2px solid var(--rw-gold); box-shadow:0 20px 50px rgba(11,45,85,.22); }
.rw-moment-dial strong { font:700 2rem/1.05 Georgia,serif; }
.rw-prompt { min-height:110px; display:flex; align-items:center; font:700 clamp(1.6rem,3vw,2.5rem)/1.2 Georgia,serif; color:var(--rw-navy); margin:12px 0 24px; }
.rw-prompt-flash { animation: rwFlash .35s ease; }
@keyframes rwFlash { 0%{opacity:.15;transform:translateY(6px)} 100%{opacity:1;transform:none} }

/* Communities */
.rw-communities { background:linear-gradient(135deg,#f5efe3,#fff); }
.rw-community-card { display:grid; grid-template-columns:1.05fr .95fr; gap:38px; align-items:center; background:#fff; border-radius:36px; padding:46px; box-shadow:var(--rw-shadow-soft); border:1px solid rgba(11,45,85,.08); }
.rw-community-list { list-style:none; margin:24px 0; padding:0; display:grid; gap:12px; }
.rw-community-list li { display:flex; gap:12px; align-items:flex-start; }
.rw-community-list li::before { content:"✓"; color:#fff; background:var(--rw-sage); width:28px; height:28px; border-radius:50%; display:grid; place-items:center; flex:0 0 28px; font-weight:900; }
.rw-community-visual { min-height:390px; border-radius:30px; background:var(--rw-navy); position:relative; overflow:hidden; display:grid; place-items:center; padding:30px; }
.rw-community-visual::before { content:""; position:absolute; inset:-60px; background:repeating-conic-gradient(rgba(216,161,59,.18) 0 4deg,transparent 4deg 12deg); }
.rw-community-note { position:relative; z-index:2; background:#fff8e8; border-radius:24px; padding:30px; width:min(90%,350px); transform:rotate(-2deg); box-shadow:0 20px 50px rgba(0,0,0,.22); color:var(--rw-navy); text-align:center; }
.rw-community-note span { display:block; font-size:3rem; margin-bottom:10px; }
.rw-community-note strong { font:700 1.7rem/1.2 Georgia,serif; }

/* Testimonials */
.rw-testimonials { background:#fff; }
.rw-quote-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:38px; }
.rw-quote { padding:28px; border-radius:22px; background:var(--rw-cream); border:1px solid rgba(216,161,59,.25); }
.rw-quote::before { content:"“"; display:block; font:700 4rem/.7 Georgia,serif; color:var(--rw-coral); }
.rw-quote p { color:#4c5a6d; }
.rw-quote strong { color:var(--rw-navy); }

/* CTA */
.rw-final-cta { background:var(--rw-coral); color:#fff; text-align:center; overflow:hidden; }
.rw-final-cta::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 10% 20%,rgba(255,255,255,.18),transparent 25%),radial-gradient(circle at 90% 80%,rgba(11,45,85,.15),transparent 30%); }
.rw-final-cta .rw-container { position:relative; z-index:2; }
.rw-final-cta .rw-section-title { color:#fff; }
.rw-final-cta p { max-width:720px; margin:18px auto 28px; font-size:1.15rem; }
.rw-final-cta .rw-btn-secondary { border:0; }

/* Content */
.rw-content-wrap { padding:70px 0; }
.rw-content-card { background:#fff; border-radius:24px; padding:clamp(26px,5vw,56px); box-shadow:var(--rw-shadow-soft); border:1px solid rgba(11,45,85,.07); }
.entry-title, .page-title { font:700 clamp(2.3rem,5vw,4rem)/1.08 Georgia,serif; color:var(--rw-navy); margin-top:0; }
.entry-content h2, .entry-content h3 { font-family:Georgia,serif; color:var(--rw-navy); }
.entry-content img { border-radius:16px; }
.entry-meta { color:var(--rw-muted); font-size:.9rem; }
.wp-block-button__link { border-radius:999px; background:var(--rw-coral); font-weight:800; }

/* Footer */
.site-footer { background:#071f3a; color:#dfe8f1; padding:58px 0 28px; }
.rw-footer-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:38px; }
.rw-footer-logo { width:220px; filter:drop-shadow(0 10px 18px rgba(0,0,0,.2)); }
.site-footer h3 { color:#fff; font:700 1.25rem Georgia,serif; }
.site-footer a { color:#f5e3bb; }
.site-footer ul { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.rw-footer-bottom { margin-top:38px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:.88rem; color:#afc0d1; }

/* WooCommerce */
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product { background:#fff; border-radius:20px; padding:16px; box-shadow:var(--rw-shadow-soft); }
.woocommerce ul.products li.product img { border-radius:14px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family:Georgia,serif; color:var(--rw-navy); font-size:1.25rem; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit { background:var(--rw-coral); color:#fff; border-radius:999px; padding:14px 20px; font-weight:800; }
.woocommerce a.button:hover, .woocommerce button.button:hover { background:var(--rw-coral-dark); color:#fff; }

/* Search / forms */
.rw-search-form { display:flex; gap:10px; }
.rw-search-form input[type="search"], input[type="text"], input[type="email"], input[type="tel"], textarea, select { width:100%; border:2px solid #d9e0e8; border-radius:14px; padding:13px 14px; background:#fff; color:var(--rw-ink); }
.rw-search-form button { border:0; border-radius:14px; background:var(--rw-navy); color:#fff; padding:12px 18px; font-weight:800; }

/* Responsive */
@media (max-width: 980px) {
  .rw-nav-cta { display:none; }
  .rw-menu-toggle { display:block; }
  .rw-nav-main { position:absolute; left:18px; right:18px; top:88px; background:#fff; border:1px solid rgba(11,45,85,.1); border-radius:18px; box-shadow:var(--rw-shadow); padding:18px; display:none; }
  .rw-nav-main.is-open { display:block; }
  .rw-menu { flex-direction:column; align-items:stretch; gap:4px; }
  .rw-menu a { display:block; padding:10px 8px; }
  .rw-hero-grid, .rw-community-card, .rw-moment-box { grid-template-columns:1fr; }
  .rw-memory-stage { min-height:500px; }
  .rw-trust-grid { grid-template-columns:repeat(2,1fr); }
  .rw-trust-item:nth-child(2) { border-right:0; }
  .rw-step-grid, .rw-product-grid, .rw-quote-grid { grid-template-columns:1fr 1fr; }
  .rw-lane-track { overflow-x:auto; grid-template-columns:repeat(5,260px); padding-bottom:14px; scroll-snap-type:x mandatory; }
  .rw-lane-card { scroll-snap-align:start; }
  .rw-footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 680px) {
  body { font-size:17px; }
  .rw-section { padding:64px 0; }
  .rw-brand img { width:160px; }
  .rw-nav { min-height:78px; }
  .rw-nav-main { top:76px; }
  .rw-hero { padding-top:46px; }
  .rw-hero h1 { font-size:clamp(2.7rem,14vw,4.4rem); }
  .rw-hero-actions .rw-btn { width:100%; }
  .rw-memory-stage { min-height:420px; }
  .rw-float-card { width:145px; font-size:.85rem; }
  .rw-float-a { left:-8px; top:24px; }
  .rw-float-b { right:-8px; top:98px; }
  .rw-float-c { left:0; bottom:22px; }
  .rw-float-d { right:0; bottom:36px; }
  .rw-trust-grid, .rw-step-grid, .rw-product-grid, .rw-quote-grid, .rw-footer-grid { grid-template-columns:1fr; }
  .rw-trust-item { border-right:0; border-bottom:1px solid rgba(11,45,85,.08); }
  .rw-trust-item:last-child { border-bottom:0; }
  .rw-moment-box, .rw-community-card { padding:28px 20px; }
  .rw-moment-dial { width:190px; height:190px; }
  .rw-accessibility { right:10px; bottom:10px; }
}

@media (prefers-reduced-motion: no-preference) {
  .rw-float-a { animation:rwFloatA 5s ease-in-out infinite; }
  .rw-float-b { animation:rwFloatB 6.5s ease-in-out infinite; }
  .rw-float-c { animation:rwFloatC 5.7s ease-in-out infinite; }
  .rw-float-d { animation:rwFloatD 6.8s ease-in-out infinite; }
  @keyframes rwFloatA { 0%,100%{transform:rotate(-6deg) translateY(0)} 50%{transform:rotate(-4deg) translateY(-10px)} }
  @keyframes rwFloatB { 0%,100%{transform:rotate(5deg) translateY(0)} 50%{transform:rotate(3deg) translateY(11px)} }
  @keyframes rwFloatC { 0%,100%{transform:rotate(4deg) translateY(0)} 50%{transform:rotate(2deg) translateY(-8px)} }
  @keyframes rwFloatD { 0%,100%{transform:rotate(-5deg) translateY(0)} 50%{transform:rotate(-3deg) translateY(9px)} }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }