/* ==========================================================================
   GiftASAP.com - site styles (Bootstrap 5.3 base, same structure as
   PlayingLearning's style.css; new brand palette)
   Fonts: Fraunces (headings) + Nunito (body), loaded in inc/meta.php
   ========================================================================== */

:root {
  --ga-primary: #0f766e;        /* deep teal */
  --ga-primary-dark: #0b5b55;
  --ga-primary-soft: #e7f4f1;
  --ga-accent: #e8604f;         /* warm coral */
  --ga-accent-soft: #fdeeeb;
  --ga-gold: #f4b740;
  --ga-cream: #fffaf4;
  --ga-ink: #1f2b2d;
  --ga-text: #3d4a4c;
  --ga-muted: #6b7779;
  --ga-border: #e6e1da;
  --ga-radius: 14px;

  --bs-primary: #0f766e;
  --bs-primary-rgb: 15, 118, 110;
  --bs-link-color: #0f766e;
  --bs-link-color-rgb: 15, 118, 110;
  --bs-link-hover-color: #0b5b55;
  --bs-link-hover-color-rgb: 11, 91, 85;
  --bs-body-color: #3d4a4c;
  --bs-body-font-family: 'Nunito', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body { font-family: var(--bs-body-font-family); color: var(--ga-text); background: #fff; }
h1, h2, h3, .h1, .h2, .h3, .display-4, .display-5, .display-6 {
  font-family: 'Fraunces', Georgia, serif; color: var(--ga-ink); font-weight: 700; letter-spacing: -0.01em;
}
h4, h5, h6, .h4, .h5, .h6 { color: var(--ga-ink); font-weight: 800; }
em { font-style: italic; color: var(--ga-accent); }
a { text-underline-offset: 2px; }
.text-primary { color: var(--ga-primary) !important; }
.bg-primary { background-color: var(--ga-primary) !important; }
.text-muted { color: var(--ga-muted) !important; }

.skip-link { position: absolute; left: 1rem; top: .5rem; z-index: 2000; background: #fff; padding: .5rem 1rem; border-radius: 8px; }

/* Buttons */
.btn { border-radius: 999px; font-weight: 700; }
.btn-primary {
  --bs-btn-bg: var(--ga-primary); --bs-btn-border-color: var(--ga-primary);
  --bs-btn-hover-bg: var(--ga-primary-dark); --bs-btn-hover-border-color: var(--ga-primary-dark);
  --bs-btn-active-bg: var(--ga-primary-dark); --bs-btn-active-border-color: var(--ga-primary-dark);
  --bs-btn-disabled-bg: var(--ga-primary); --bs-btn-disabled-border-color: var(--ga-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--ga-primary); --bs-btn-border-color: var(--ga-primary);
  --bs-btn-hover-bg: var(--ga-primary); --bs-btn-hover-border-color: var(--ga-primary);
  --bs-btn-active-bg: var(--ga-primary); --bs-btn-active-border-color: var(--ga-primary);
}
.btn-amazon {
  background: #ffd814; border: 1px solid #f2c200; color: #0f1111; font-weight: 800;
}
.btn-amazon:hover, .btn-amazon:focus { background: #f7ca00; border-color: #e0b400; color: #0f1111; }
.input-group .btn { border-radius: 0 999px 999px 0; }
.input-group .form-control { border-radius: 999px 0 0 999px; }
.input-group > .input-group-text:first-child { border-radius: 999px 0 0 999px; }
.input-group > .input-group-text + .form-control { border-radius: 0 999px 999px 0; }
.form-control:focus, .form-select:focus { border-color: #7cc0b8; box-shadow: 0 0 0 .2rem rgba(15,118,110,.15); }

/* Badges */
.badge-soft { background: var(--ga-primary-soft); color: var(--ga-primary-dark); font-weight: 700; border-radius: 999px; padding: .4em .8em; }
.badge-spotlight { background: #fff4d6; color: #7a5300; font-weight: 800; border-radius: 999px; padding: .4em .8em; }
.badge-spotlight i { color: var(--ga-gold); }
.badge-price { background: #fff4d6; color: #7a5300; font-weight: 800; border-radius: 999px; padding: .4em .7em; }

/* ---------------- Navbar ---------------- */
.navbar { padding: .8rem 0; transition: padding .2s ease; }
.navbar.navbar-scrolled { padding: .3rem 0; }
.navbar-brand { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; line-height: 1; }
.brand-mark { font-size: 1.8rem; }
.brand-text { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 1.75rem; color: var(--ga-ink); }
.brand-accent { color: var(--ga-accent); }
.tagline { font-size: .85rem; color: var(--ga-muted); width: 100%; padding-left: 2.3rem; margin-top: -.2rem; max-height: 24px; overflow: hidden; transition: max-height .2s ease, opacity .2s ease; }
.navbar-scrolled .tagline { max-height: 0; opacity: 0; }
.nav-link { font-weight: 700; color: var(--ga-text) !important; padding: .5rem .85rem !important; }
.nav-link:hover, .nav-link.active { color: var(--ga-primary) !important; }
.nav-giftwall { color: var(--ga-accent) !important; }
.nav-giftwall:hover, .nav-giftwall.active { color: var(--ga-accent) !important; text-decoration: underline; text-underline-offset: 4px; }
.dropdown-menu { border: 1px solid var(--ga-border); border-radius: var(--ga-radius); box-shadow: 0 12px 30px rgba(31,43,45,.12); padding: .5rem; }
.dropdown-item { border-radius: 8px; padding: .45rem .75rem; font-weight: 600; }
.dropdown-item.active, .dropdown-item:active { background: var(--ga-primary); }
.nav-viewall { font-weight: 800; color: var(--ga-primary); }
.nav-viewall-desc { display: block; font-size: .78rem; font-weight: 400; color: var(--ga-muted); white-space: normal; max-width: 260px; }
.nav-link { white-space: nowrap; }
.navbar form .input-group { flex-wrap: nowrap; }
@media (min-width: 992px) { .navbar form .form-control { width: 150px; } .nav-link { padding: .5rem .6rem !important; } }
@media (min-width: 1200px) { .navbar form .form-control { width: 210px; } .nav-link { padding: .5rem .85rem !important; } }

/* ---------------- Banners / hero ---------------- */
.bg-banner { background: linear-gradient(180deg, var(--ga-cream) 0%, #fff 100%); border-bottom: 1px solid var(--ga-border); }
.bg-soft { background: var(--ga-cream); }
.bg-soft-rose { background: var(--ga-accent-soft); }
.breadcrumb a { text-decoration: none; }

.home-hero { background: radial-gradient(circle at 85% 20%, #fde3dc 0, transparent 45%), radial-gradient(circle at 10% 90%, #d9efe9 0, transparent 40%), var(--ga-cream); }
.home-hero .lead { color: var(--ga-text); }
.hero-collage { position: relative; height: 340px; }
.hc { position: absolute; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 28px; box-shadow: 0 14px 40px rgba(31,43,45,.12); font-size: 2.6rem; width: 96px; height: 96px; }
.hc-1 { top: 0; left: 8%; transform: rotate(-6deg); }
.hc-2 { top: 18%; left: 42%; transform: rotate(5deg); }
.hc-3 { top: 6%; right: 4%; transform: rotate(-3deg); }
.hc-4 { top: 52%; left: 0; transform: rotate(4deg); }
.hc-5 { top: 60%; left: 36%; transform: rotate(-5deg); }
.hc-6 { top: 46%; right: 2%; transform: rotate(6deg); }
.hc-7 { top: 30%; left: 18%; width: 130px; height: 130px; font-size: 4rem; background: var(--ga-primary); z-index: 2; transform: rotate(-2deg); }
@media (max-width: 991px) { .hero-collage { height: 240px; transform: scale(.8); transform-origin: top center; } }

.section-head h2 { margin-bottom: .25rem; }

/* Pain-point tiles (homepage) */
.pain-tile { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; height: 100%; padding: 1.25rem; border-radius: var(--ga-radius); text-decoration: none; color: var(--ga-ink); border: 1px solid rgba(0,0,0,.04); }
.pain-tile-icon { font-size: 2rem; line-height: 1; }
.pain-tile-label { font-weight: 800; line-height: 1.25; }

/* ---------------- Theme colors (post covers, tiles) ---------------- */
.theme-teal  { background: linear-gradient(135deg, #dff2ee, #bfe5dd); }
.theme-coral { background: linear-gradient(135deg, #fde6e1, #f9c9bf); }
.theme-amber { background: linear-gradient(135deg, #fff1d4, #fddc9b); }
.theme-plum  { background: linear-gradient(135deg, #efe4f6, #dac5ea); }
.theme-sky   { background: linear-gradient(135deg, #e1effb, #bfdcf4); }
.theme-sage  { background: linear-gradient(135deg, #e9f1e3, #cfe2c2); }
.theme-rose  { background: linear-gradient(135deg, #fde7ef, #f8c6d8); }
.theme-frost { background: linear-gradient(135deg, #e8f3fb, #cfe3f1); }

/* ---------------- Cards ---------------- */
.card { border: 1px solid var(--ga-border); border-radius: var(--ga-radius); }
.hover-lift { transition: transform .18s ease, box-shadow .18s ease; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(31,43,45,.12) !important; }
.post-card { overflow: hidden; }
.post-card .card-title { color: var(--ga-ink); font-family: 'Fraunces', Georgia, serif; font-weight: 700; }
.post-card a { color: inherit; }
.post-cover { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.post-cover img { width: 100%; height: 100%; object-fit: cover; }
.post-cover-emoji span { font-size: 3.5rem; filter: drop-shadow(0 6px 10px rgba(0,0,0,.12)); }
.post-cover-hero { border-radius: 22px; aspect-ratio: 4 / 3; box-shadow: 0 18px 40px rgba(31,43,45,.12); }
.post-cover-hero span { font-size: 6rem; }
.post-card-compact .post-cover { aspect-ratio: 2 / 1; }
.post-card-compact .post-cover span { font-size: 2.6rem; }
.mini-emoji { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; }

/* ---------------- Article ---------------- */
.article-banner .lead { font-size: 1.15rem; }
.article-body { font-size: 1.075rem; line-height: 1.75; }
.article-body h2 { font-size: 1.7rem; margin-top: 2.5rem; margin-bottom: 1rem; scroll-margin-top: 90px; }
.article-body h3 { font-size: 1.25rem; margin-top: 1.75rem; }
.article-body ul, .article-body ol { padding-left: 1.3rem; }
.article-body li { margin-bottom: .4rem; }
.article-body .callout { background: var(--ga-primary-soft); border-left: 4px solid var(--ga-primary); border-radius: 0 var(--ga-radius) var(--ga-radius) 0; padding: 1rem 1.25rem; margin: 1.5rem 0; }
.article-body .callout-warn { background: var(--ga-accent-soft); border-left-color: var(--ga-accent); }
.article-body .callout p:last-child, .article-body .callout ul:last-child { margin-bottom: 0; }
.article-body .tip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.article-body .tip { background: var(--ga-cream); border: 1px solid var(--ga-border); border-radius: var(--ga-radius); padding: 1rem; font-size: .98rem; }
.article-body .tip strong { display: block; color: var(--ga-ink); margin-bottom: .25rem; }

.disclosure-box { background: var(--ga-cream); border: 1px dashed var(--ga-border); border-radius: var(--ga-radius); padding: .75rem 1rem; color: var(--ga-muted); }
.health-note { background: #f1f7fd; border-radius: var(--ga-radius); padding: .9rem 1.1rem; color: #3d5468; }
.quick-picks { background: var(--ga-cream); }
.quick-picks-title { color: var(--ga-accent); letter-spacing: .06em; font-weight: 800; }
.quick-picks-list li { margin-bottom: .3rem; font-weight: 700; }
.quick-picks-list a { text-decoration: none; }
.article-toc { background: #fff; border: 1px solid var(--ga-border); border-radius: var(--ga-radius); padding: .8rem 1.1rem; }
.article-toc summary { cursor: pointer; }
.article-toc ul { padding-left: 1.2rem; }
.article-faq .accordion-button { font-weight: 700; }
.article-faq .accordion-button:not(.collapsed) { background: var(--ga-primary-soft); color: var(--ga-primary-dark); }

/* "From experience" notes under gift cards (first-hand stories carried over from the original GiftASAP) */
.experience-note { position: relative; margin: -.75rem 0 1.75rem 1.25rem; padding: .85rem 1.1rem .85rem 1.25rem; background: #fff8ec; border-left: 3px solid var(--ga-gold); border-radius: 0 var(--ga-radius) var(--ga-radius) 0; font-size: .98rem; line-height: 1.6; color: #4a4336; }
.experience-note strong { color: #7a5300; }
@media (max-width: 575px) { .experience-note { margin-left: .5rem; } }

/* Gift card (inside articles) */
.gift-card { overflow: hidden; scroll-margin-top: 90px; box-shadow: 0 4px 14px rgba(31,43,45,.05); }
.gift-card-title { font-family: 'Fraunces', Georgia, serif; font-weight: 700; margin-top: 0 !important; }
.gift-num { color: var(--ga-accent); }
/* Spotlight posts: one big featured product card */
.gift-card-spotlight { border: 2px solid var(--ga-gold); box-shadow: 0 14px 34px rgba(31,43,45,.10); }
.gift-card-spotlight .gift-card-title { font-size: 1.5rem; }
.gift-card-spotlight .gift-visual-emoji span { font-size: 4.5rem; }
.gift-card p { font-size: 1rem; }

/* ---------------- Gift visuals ---------------- */
.gift-visual { display: flex; align-items: center; justify-content: center; overflow: hidden; background: #f6f3ef; min-height: 120px; }
.gift-visual img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 8%; }
.gift-visual.ratio-square { aspect-ratio: 1 / 1; }
.gift-visual-emoji span { font-size: 3.2rem; filter: drop-shadow(0 6px 10px rgba(0,0,0,.12)); }
.gift-card .gift-visual-emoji span { font-size: 2.6rem; }
/* Purpose colors */
.p-back-pain       { background: linear-gradient(135deg, #dff2ee, #bfe5dd); }
.p-neck-shoulder   { background: linear-gradient(135deg, #e1effb, #bfdcf4); }
.p-foot-pain       { background: linear-gradient(135deg, #fde6e1, #f9c9bf); }
.p-ankle-pain      { background: linear-gradient(135deg, #ffe9dc, #fbcfae); }
.p-knee-pain       { background: linear-gradient(135deg, #fff1d4, #fddc9b); }
.p-arthritis       { background: linear-gradient(135deg, #efe4f6, #dac5ea); }
.p-wrist-hand      { background: linear-gradient(135deg, #e9f1e3, #cfe2c2); }
.p-ergonomic       { background: linear-gradient(135deg, #e1effb, #c6dcf2); }
.p-fitness         { background: linear-gradient(135deg, #ffe9dc, #fbcfae); }
.p-yoga            { background: linear-gradient(135deg, #efe4f6, #dac5ea); }
.p-healthy-eating  { background: linear-gradient(135deg, #e9f1e3, #cfe2c2); }
.p-healthy-living  { background: linear-gradient(135deg, #e3f3ef, #c4e6dd); }
.p-health-tech     { background: linear-gradient(135deg, #e6e9fb, #c9cff4); }
.p-allergy         { background: linear-gradient(135deg, #e9f6ee, #c9ead5); }
.p-headache        { background: linear-gradient(135deg, #e6e9fb, #c9cff4); }
.p-cold-weather    { background: linear-gradient(135deg, #e8f3fb, #cfe3f1); }
.p-sleep-relax     { background: linear-gradient(135deg, #ece8f7, #d4cdee); }
.p-pregnancy       { background: linear-gradient(135deg, #fde7ef, #f8c6d8); }
.p-new-mom         { background: linear-gradient(135deg, #fff0e8, #fbd6c3); }
.p-comfort         { background: linear-gradient(135deg, #f3efe9, #e5ddd2); }

/* ---------------- Gift Wall ---------------- */
.giftwall-hero { background: radial-gradient(circle at 15% 10%, #fde3dc 0, transparent 40%), radial-gradient(circle at 90% 80%, #d9efe9 0, transparent 40%), var(--ga-cream); margin-bottom: -2rem; padding-bottom: 4rem !important; }
.giftwall-lead { max-width: 720px; }
.giftwall-filters { position: relative; z-index: 2; border-radius: 20px; }
/* One compact toolbar: search + 4 filter dropdowns + sort */
.giftwall-filters .card-body { padding: .9rem; }
.giftwall-toolbar { display: grid; grid-template-columns: minmax(200px, 1.25fr) 1.3fr 1fr .85fr 1fr .95fr; gap: .5rem; align-items: center; }
.giftwall-search .form-control, .giftwall-search .input-group-text { border-radius: 999px; }
.giftwall-search .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
.giftwall-search .form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; }
.giftwall-search .form-control:focus { box-shadow: none; }
.giftwall-search:focus-within { box-shadow: 0 0 0 .2rem rgba(15,118,110,.15); border-radius: 999px; }
.giftwall-filter, .giftwall-sort { border-radius: 999px; font-weight: 700; font-size: .85rem; padding-left: .85rem; color: var(--ga-text); border-color: var(--ga-border); text-overflow: ellipsis; }
.giftwall-filter.is-set { border-color: var(--ga-primary); background-color: var(--ga-primary-soft); color: var(--ga-primary-dark); }
.giftwall-filter option:disabled { color: #b5bcbd; }
@media (max-width: 1199px) {
  .giftwall-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .giftwall-search { grid-column: 1 / -1; }
  .giftwall-select-wrap:last-child { grid-column: span 2; }
}
@media (max-width: 575px) {
  .giftwall-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .giftwall-select-wrap:last-child { grid-column: 1 / -1; }
}
#giftGrid > .gift-col { transition: opacity .15s ease; }
.gift-tile { overflow: hidden; position: relative; }
.gift-tile-title { font-weight: 800; line-height: 1.3; }
.gift-tile-blurb { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gift-pick-badge { position: absolute; top: .6rem; left: .6rem; z-index: 2; background: #fff; color: #7a5300; font-size: .72rem; font-weight: 800; border-radius: 999px; padding: .25rem .6rem; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.gift-pick-badge i { color: var(--ga-gold); }
.gift-ad-tile { min-height: 300px; background: #fafafa; border-style: dashed; }
.ad-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #9aa3a5; margin-bottom: .35rem; }
.giftwall-cta { background: var(--ga-cream); border: 1px solid var(--ga-border); border-radius: 20px; padding: 1.25rem 1.5rem; }
.giftwall-cta-icon { font-size: 2.4rem; }

/* ---------------- Sidebar ---------------- */
.sidebar-card .card-header { background: #fff; border-bottom: 1px solid var(--ga-border); border-radius: var(--ga-radius) var(--ga-radius) 0 0 !important; padding: .85rem 1rem; }
.sidebar-card .card-header h2 { font-family: 'Nunito', sans-serif; font-weight: 800; }
.sidebar-giftwall { background: linear-gradient(135deg, var(--ga-primary), #14958a); color: #fff; border: 0; }
.sidebar-giftwall h2 { color: #fff; font-family: 'Fraunces', Georgia, serif; }
.sidebar-giftwall .btn-light { color: var(--ga-primary-dark); }
@media (min-width: 992px) { .sidebar { position: sticky; top: 90px; } }

/* ---------------- Misc ---------------- */
.trust-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--ga-primary-soft); color: var(--ga-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: .75rem; }
.share-card { background: var(--ga-cream); }
.static-body h2 { font-size: 1.5rem; }

/* ---------------- Footer ---------------- */
.site-footer { background: #17292b; color: #d6dfdf; }
.site-footer a { color: #d6dfdf; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-brand { font-family: 'Fraunces', Georgia, serif; font-size: 1.6rem; font-weight: 700; color: #fff; }
.footer-heading { color: #fff; font-family: 'Nunito', sans-serif; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; font-weight: 800; margin-bottom: 1rem; }
.footer-muted { color: #9fb0b1; }
.footer-rule { border-color: rgba(255,255,255,.15); opacity: 1; }