/*
Theme Name: Darby Dives In
Theme URI: https://darbydivesin.com
Author: Darby Dives In
Author URI: https://darbydivesin.com
Description: A scrapbook-style travel journal theme with a tabbed notebook layout, camera-roll photo dump, saved-pins places grid and an email subscribe form. Converted from a Horizons/React export into a standard WordPress theme.
Version: 1.0.0
Requires at least: 6.0
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: darby-dives-in
*/

/* ---------- Design tokens ---------- */
:root{
  --background: 40 20% 96%;
  --foreground: 240 8% 10%;
  --muted-foreground: 240 4% 42%;
  --destructive: 0 84% 60%;
  --ink: 240 8% 10%;
  --paper: 44 30% 98%;
  --lime: 74 88% 62%;
  --electric: 232 88% 60%;
  --tangerine: 18 96% 60%;
  --bubble: 330 90% 70%;
  --aqua: 186 82% 52%;
  --radius: 1rem;
}

/* ---------- Reset-ish base ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  font-family: var(--font-body, "Inter"), sans-serif;
  overflow-x: clip;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  line-height: 1.5;
}
img{ max-width:100%; display:block; }
ul{ list-style:none; margin:0; padding:0; }
a{ color:inherit; }
button{ font: inherit; cursor:pointer; }
input{ font: inherit; }

.font-display{ font-family: var(--font-display, "Space Grotesk"), sans-serif; }
.font-hand{ font-family: var(--font-hand, "Caveat"), cursive; }
.screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }

/* ---------- Page background ---------- */
.desk-bg{
  position:relative;
  min-height: 100dvh;
  overflow-x: clip;
  padding: 1.5rem 0.75rem;
  background-color: hsl(var(--background));
  background-image:
    radial-gradient(circle at 12% 18%, hsl(var(--lime) / 0.35), transparent 42%),
    radial-gradient(circle at 88% 8%, hsl(var(--aqua) / 0.28), transparent 40%),
    radial-gradient(circle at 78% 92%, hsl(var(--bubble) / 0.25), transparent 45%),
    radial-gradient(circle at 4% 88%, hsl(var(--tangerine) / 0.22), transparent 40%);
}
@media (min-width:640px){ .desk-bg{ padding: 2.5rem 1.5rem; } }

.grain{
  position:fixed; inset:0; opacity:0.06; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.ruled{
  background-image: repeating-linear-gradient(to bottom, transparent 0px, transparent 31px, hsl(var(--ink) / 0.06) 32px);
}

.marker{
  background: linear-gradient(to bottom, transparent 58%, hsl(var(--lime) / 0.85) 58%, hsl(var(--lime) / 0.85) 94%, transparent 94%);
  padding: 0 0.25rem;
}

/* ---------- Header ---------- */
.site-header{
  margin: 0 auto 1.25rem;
  max-width: 80rem;
  display:flex; align-items:center; justify-content:space-between; gap:0.75rem;
}
.site-header .brand{ display:flex; align-items:center; gap:0.5rem; text-decoration:none; }
.site-header .brand-mark{
  display:flex; align-items:center; justify-content:center;
  height:2.25rem; width:2.25rem; border-radius:0.75rem;
  border:2px solid hsl(var(--ink)); background-color: hsl(var(--electric));
  font-family:var(--font-display,"Space Grotesk"),sans-serif; font-weight:700; font-size:0.875rem; color:#fff;
}
.site-header .brand-name{
  font-family:var(--font-display,"Space Grotesk"),sans-serif; font-weight:700; font-size:0.875rem;
  text-transform:uppercase; letter-spacing:0.2em;
}

/* ---------- Shell / layout ---------- */
.journal-shell{
  position:relative;
  margin:0 auto;
  max-width:80rem;
  display:flex;
  align-items:stretch;
  gap:0;
  padding-right:0.75rem;
}
@media (min-width:640px){ .journal-shell{ padding-right:1.25rem; } }

.journal-main{
  position:relative;
  min-width:0;
  flex:1 1 0%;
  border-radius:26px;
  border:2px solid hsl(var(--ink));
  background-color: hsl(var(--paper));
  padding: 1rem 4rem 1rem 1rem;
  box-shadow: 10px 10px 0 0 hsl(var(--ink));
}
@media (min-width:640px){ .journal-main{ padding: 2rem 6rem 2rem 2rem; } }
@media (min-width:1024px){ .journal-main{ padding-right:7rem; } }

.journal-main .ruled-line{
  position:absolute; top:1.5rem; bottom:1.5rem; left:1.5rem; width:1px;
  background-color: hsl(var(--tangerine) / 0.6);
  display:none; pointer-events:none;
}
@media (min-width:640px){ .journal-main .ruled-line{ display:block; } }

/* ---------- Tabs (notebook side tabs) ---------- */
.journal-tabs{
  position:relative; z-index:10;
  margin-left:-2.5rem;
  display:flex; flex-direction:column; gap:0.5rem;
  flex-shrink:0; padding-top:1.5rem;
}
@media (min-width:640px){ .journal-tabs{ margin-left:-3.5rem; gap:0.75rem; padding-top:2.5rem; } }

.journal-tabs .tabs-label{
  display:none; margin-bottom:0.25rem; text-align:center;
  font-family:var(--font-display,"Space Grotesk"),sans-serif; font-weight:700; font-size:9px;
  text-transform:uppercase; letter-spacing:0.25em; color: hsl(var(--muted-foreground));
}
@media (min-width:640px){ .journal-tabs .tabs-label{ display:block; } }

.tab-btn{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0.375rem;
  min-height:68px; width:3rem;
  border-radius:1rem; border:2px solid hsl(var(--ink));
  padding:0.75rem 0;
  background-color: rgba(255,255,255,0.85);
  box-shadow: 2px 2px 0 0 hsl(var(--ink) / 0.25);
  transition: transform .2s ease-out, background-color .2s ease-out, box-shadow .2s ease-out;
}
@media (min-width:640px){ .tab-btn{ width:4rem; } }
.tab-btn:hover{ transform: translateX(4px); }
.tab-btn.is-active{ transform: translateX(4px); box-shadow: 4px 4px 0 0 hsl(var(--ink)); }
@media (min-width:640px){ .tab-btn.is-active{ transform: translateX(12px); } }
.tab-btn .tab-icon{ width:1rem; height:1rem; }
@media (min-width:640px){ .tab-btn .tab-icon{ width:1.25rem; height:1.25rem; } }
.tab-btn .tab-label{
  font-family:var(--font-display,"Space Grotesk"),sans-serif; font-weight:700; font-size:10px;
  text-transform:uppercase; letter-spacing:0.18em; color: hsl(var(--ink));
  writing-mode: vertical-rl;
}
@media (min-width:640px){ .tab-btn .tab-label{ font-size:11px; } }

/* ---------- Sections ---------- */
.journal-section{ display:none; }
.journal-section.is-active{ display:block; animation: darby-fade-in .3s ease-out; }
@keyframes darby-fade-in{ from{ opacity:0; transform: translateY(14px);} to{ opacity:1; transform:none; } }

.kicker{
  font-family:var(--font-display,"Space Grotesk"),sans-serif; font-weight:700; font-size:11px;
  text-transform:uppercase; letter-spacing:0.35em; color: hsl(var(--muted-foreground));
  margin:0;
}

.stack-lg > * + *{ margin-top:2.5rem; }
.stack{ display:flex; flex-direction:column; gap:2rem; }
.stack-sm{ display:flex; flex-direction:column; gap:1.5rem; }

/* Home hero */
.hero-grid{ display:grid; gap:1.5rem; align-items:end; }
@media (min-width:768px){ .hero-grid{ grid-template-columns: 1.15fr 0.85fr; } }
.hero-title{
  margin:0.75rem 0 0; font-family:var(--font-display,"Space Grotesk"),sans-serif; font-weight:700;
  text-transform:uppercase; line-height:0.85; letter-spacing:-0.04em;
  font-size: 13vw;
}
@media (min-width:640px){ .hero-title{ font-size:3.75rem; } }
@media (min-width:1024px){ .hero-title{ font-size:4.5rem; } }
.hero-copy{
  margin-top:1.25rem; max-width:28rem; font-size:0.8rem; line-height:1.6; color: hsl(var(--muted-foreground));
}
@media (min-width:640px){ .hero-copy{ font-size:0.95rem; } }
.hero-stickers{ margin-top:1.5rem; display:flex; flex-wrap:wrap; align-items:center; gap:0.75rem; }

.sticker{
  display:inline-block; border-radius:9999px; border:2px solid hsl(var(--ink));
  padding:0.25rem 0.75rem; font-family:var(--font-display,"Space Grotesk"),sans-serif; font-weight:700;
  font-size:11px; text-transform:uppercase; letter-spacing:0.15em;
}

.photo-card{
  position:relative; border-radius:18px; border:2px solid hsl(var(--ink));
  background:hsl(var(--card-bg, 0 0% 100%)); padding:0.5rem; box-shadow:6px 6px 0 0 hsl(var(--ink));
  transition: transform .2s ease-out; margin:0;
}
.photo-card:hover{ transform: translateY(-4px); }
.photo-card img{ width:100%; height:100%; border-radius:10px; object-fit:cover; aspect-ratio: 3/2; }
.photo-card.ratio-45{ }
.photo-card.ratio-45 img{ aspect-ratio: 4/5; }
.photo-card.ratio-34 img{ aspect-ratio: 3/4; }
.photo-card figcaption{
  padding-top:0.5rem; font-family:var(--font-hand,"Caveat"),cursive; font-size:1.15rem; line-height:1; color: hsl(var(--ink));
}

.ticker{
  overflow:hidden; border-top:2px solid hsl(var(--ink)); border-bottom:2px solid hsl(var(--ink));
  background-color: hsl(var(--ticker-bg, var(--ink))); padding:0.5rem 0;
}
.ticker-track{
  display:flex; width:max-content; gap:2rem; white-space:nowrap;
  animation: darby-ticker 26s linear infinite;
}
@keyframes darby-ticker{ from{ transform: translate3d(0,0,0); } to{ transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none; } }
.ticker-track span{
  font-family:var(--font-display,"Space Grotesk"),sans-serif; font-weight:700; font-size:0.75rem;
  text-transform:uppercase; letter-spacing:0.15em; color: hsl(var(--ticker-text, var(--lime)));
}
.ticker-track span .dot{ color:#fff; }

.two-col{ display:grid; gap:1.25rem; }
@media (min-width:640px){ .two-col{ grid-template-columns:1fr 1fr; } }
.entry-card{
  border-radius:1.5rem; border:2px solid hsl(var(--ink)); background:hsl(var(--card-bg, 0 0% 100%)); padding:1.25rem;
}
a.entry-card-link{ display:block; text-decoration:none; color:inherit; transition: transform .2s ease-out; }
a.entry-card-link:hover{ transform: translateY(-3px); }
.entry-card h2{ margin:0.5rem 0 0; font-family:var(--font-display,"Space Grotesk"),sans-serif; font-weight:700; font-size:1.5rem; line-height:1.2; }
.entry-card p{ margin-top:0.5rem; font-size:0.875rem; color: hsl(var(--muted-foreground)); }
.entry-card .soundtrack{ margin-top:1rem; display:flex; align-items:center; gap:0.5rem; font-family:var(--font-hand,"Caveat"),cursive; font-size:1.15rem; }
.entry-card .soundtrack svg{ width:1rem; height:1rem; flex-shrink:0; }

/* Countries tab — "by destination" accordion + decorative map */
.destinations-layout{ display:flex; flex-direction:column; gap:1.25rem; }
@media (min-width:768px){ .destinations-layout{ flex-direction:row; align-items:stretch; } }

.destinations-list{
  flex:0 0 auto; width:100%;
  border:2px solid hsl(var(--ink)); border-radius:1.25rem;
  background:hsl(var(--card-bg,0 0% 100%)); padding:1.25rem;
}
@media (min-width:768px){ .destinations-list{ width:17rem; } }

.continent-accordion{ margin-top:0.75rem; display:flex; flex-direction:column; }
.continent-item{ border-bottom:1px solid hsl(var(--ink) / 0.15); }
.continent-item:first-child{ border-top:1px solid hsl(var(--ink) / 0.15); }
.continent-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:none; padding:0.75rem 0.1rem; cursor:pointer;
  font-family:var(--font-display,"Space Grotesk"),sans-serif; font-weight:700; font-size:0.85rem;
  text-transform:uppercase; letter-spacing:0.08em; color:hsl(var(--ink));
}
.continent-caret{ width:1rem; height:1rem; flex-shrink:0; transition: transform .2s ease-out; }
.continent-item.is-open .continent-caret{ transform: rotate(180deg); }
.continent-panel{
  max-height:0; overflow:hidden; transition: max-height .25s ease-out;
}
.continent-item.is-open .continent-panel{ max-height:24rem; }
.continent-posts{ padding:0 0 0.75rem 0.1rem; display:flex; flex-direction:column; gap:0.4rem; }
.continent-posts a{ font-size:0.85rem; text-decoration:none; color:hsl(var(--electric)); }
.continent-posts a:hover{ text-decoration:underline; }
.continent-empty{ padding:0 0 0.75rem 0.1rem; font-size:0.8rem; color:hsl(var(--muted-foreground)); margin:0; }

.destinations-map{ position:relative; flex:1 1 auto; min-height:20rem; }
.world-map-svg.is-decorative{ position:absolute; inset:0; width:100%; height:100%; opacity:0.16; pointer-events:none; }
.world-map-svg.is-decorative path{ fill:hsl(var(--ink)); stroke:none; }

.map-pin{
  position:absolute; display:flex; flex-direction:column; align-items:center; gap:0.3rem;
  width:5rem; text-decoration:none; text-align:center;
}
.map-pin img{
  width:4.5rem; height:4.5rem; object-fit:cover; border-radius:0.75rem;
  border:2px solid hsl(var(--ink)); box-shadow:3px 3px 0 0 hsl(var(--ink));
  transition: transform .15s ease-out;
}
.map-pin:hover img{ transform: translateY(-3px) scale(1.03); }
.map-pin span{
  font-family:var(--font-hand,"Caveat"),cursive; font-size:1rem; color:hsl(var(--ink));
  line-height:1.1;
}
.map-pin:nth-of-type(1){ top:6%; left:8%; }
.map-pin:nth-of-type(2){ top:10%; left:62%; }
.map-pin:nth-of-type(3){ top:42%; left:32%; }
.map-pin:nth-of-type(4){ top:48%; left:74%; }
.map-pin:nth-of-type(5){ top:74%; left:18%; }
@media (max-width:767px){
  .destinations-map{ display:none; }
}

/* Travel / posts */
.post-list{ display:flex; flex-direction:column; gap:1.5rem; }
.post-list a{ text-decoration:none; color:inherit; }
.post-list h2 a:hover{ text-decoration:underline; }
.post-list a img{ display:block; }
.post{
  display:flex; flex-direction:column; gap:1rem;
  padding-bottom:1.5rem; border-bottom:2px dashed hsl(var(--ink) / 0.3);
}
@media (min-width:640px){ .post{ flex-direction:row; } .post.reverse{ flex-direction:row-reverse; } }
.post img{
  height:11rem; width:100%; border-radius:1rem; border:2px solid hsl(var(--ink)); object-fit:cover;
}
@media (min-width:640px){ .post img{ width:14rem; flex-shrink:0; } }
.post .post-body{ flex:1; }
.post h2{ margin:0.75rem 0 0; font-family:var(--font-display,"Space Grotesk"),sans-serif; font-weight:700; font-size:1.5rem; line-height:1.2; }
.post p{ margin-top:0.5rem; font-size:0.875rem; color: hsl(var(--muted-foreground)); }

/* Places */
.section-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem; }
.h1-lg{
  margin:0.5rem 0 0; font-family:var(--font-display,"Space Grotesk"),sans-serif; font-weight:700;
  text-transform:uppercase; line-height:0.9; letter-spacing:-0.03em; font-size:2.75rem;
}
@media (min-width:640px){ .h1-lg{ font-size:3.5rem; } }

.places-grid{ display:grid; gap:1rem; }
@media (min-width:640px){ .places-grid{ grid-template-columns:1fr 1fr; } }
.place-card{
  position:relative; overflow:hidden; border-radius:1.5rem; border:2px solid hsl(var(--ink));
  background:hsl(var(--card-bg, 0 0% 100%)); padding:1.25rem;
}
.place-card .blob{
  position:absolute; top:-1.5rem; right:-1.5rem; height:4rem; width:4rem; border-radius:9999px;
}
.place-card .place-city{ display:flex; align-items:center; gap:0.5rem; }
.place-card .place-city svg{ width:1rem; height:1rem; }
.place-card .place-city span{
  font-family:var(--font-display,"Space Grotesk"),sans-serif; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:0.15em;
}
.place-card h2{ margin:0.5rem 0 0; font-family:var(--font-display,"Space Grotesk"),sans-serif; font-weight:700; font-size:1.25rem; }
.place-card p{ margin-top:0.25rem; font-size:0.875rem; color: hsl(var(--muted-foreground)); }

/* Photos masonry */
.photo-masonry{ column-count:2; column-gap:1rem; column-fill:balance; }
@media (min-width:640px){ .photo-masonry{ column-count:3; } }
.photo-masonry .photo-card{ margin-bottom:1rem; break-inside:avoid; }

/* About */
.about-grid{ display:grid; gap:1.5rem; }
@media (min-width:640px){ .about-grid{ grid-template-columns:0.9fr 1.1fr; align-items:center; } }
.about-title{
  margin:0.5rem 0 0; font-family:var(--font-display,"Space Grotesk"),sans-serif; font-weight:700;
  text-transform:uppercase; line-height:0.9; letter-spacing:-0.03em; font-size:2.25rem;
}
@media (min-width:640px){ .about-title{ font-size:3rem; } }
.about-bio p{ margin:0 0 0.9rem; font-size:0.875rem; line-height:1.7; color: hsl(var(--muted-foreground)); }
.about-bio a{ color:hsl(var(--electric)); text-decoration:underline; }
.about-bio a img{ display:block; text-decoration:none; }
.about-list{ margin-top:1.25rem; display:flex; flex-direction:column; gap:0.5rem; font-size:0.875rem; }
.about-list li{ display:flex; align-items:flex-start; gap:0.5rem; }
.about-list svg{ width:1rem; height:1rem; margin-top:0.15rem; flex-shrink:0; }

/* Subscribe */
.subscribe-panel{
  margin-top:3rem; border-radius:1.5rem; border:2px solid hsl(var(--ink));
  background-color: hsl(var(--electric) / 0.12); padding:1.25rem;
}
@media (min-width:640px){ .subscribe-panel{ padding:1.75rem; } }
.subscribe-panel h2{
  margin:0.5rem 0 0; max-width:28rem; font-family:var(--font-display,"Space Grotesk"),sans-serif; font-weight:700;
  text-transform:uppercase; line-height:1.2; letter-spacing:-0.01em; font-size:1.5rem;
}
@media (min-width:640px){ .subscribe-panel h2{ font-size:1.875rem; } }

.subscribe-form{ margin-top:1rem; max-width:32rem; }
.subscribe-row{ display:flex; flex-direction:column; gap:0.5rem; }
@media (min-width:640px){ .subscribe-row{ flex-direction:row; } }
.subscribe-field{ position:relative; flex:1; }
.subscribe-field svg{
  position:absolute; left:0.75rem; top:50%; transform:translateY(-50%);
  width:1rem; height:1rem; color: hsl(var(--muted-foreground)); pointer-events:none;
}
.subscribe-field input{
  height:3rem; width:100%; border-radius:1rem; border:2px solid hsl(var(--ink));
  background:hsl(var(--card-bg, 0 0% 100%)); padding:0 0.75rem 0 2.25rem; font-size:0.875rem; color: hsl(var(--ink));
}
.subscribe-field input:focus{ outline:none; box-shadow:0 0 0 4px hsl(var(--lime) / 0.6); }
.subscribe-submit{
  display:inline-flex; height:3rem; align-items:center; justify-content:center; gap:0.5rem;
  border-radius:1rem; border:2px solid hsl(var(--ink)); background-color: hsl(var(--ink));
  padding:0 1.25rem; font-family:var(--font-display,"Space Grotesk"),sans-serif; font-weight:700; font-size:0.875rem;
  text-transform:uppercase; color:#fff; transition: transform .15s ease-out;
}
.subscribe-submit:hover{ transform: translateY(-2px); }
.subscribe-submit:active{ transform: scale(0.98); }
.subscribe-submit:disabled{ opacity:0.7; cursor:default; }
.subscribe-submit svg{ width:1rem; height:1rem; animation: darby-spin 0.8s linear infinite; }
@keyframes darby-spin{ to{ transform: rotate(360deg); } }
.subscribe-hint{ margin-top:0.5rem; font-family:var(--font-hand,"Caveat"),cursive; font-size:1rem; color: hsl(var(--muted-foreground)); }
.subscribe-error{ margin-top:0.5rem; font-size:0.75rem; font-weight:500; color: hsl(var(--destructive)); }
.subscribe-success{
  display:flex; align-items:center; gap:0.5rem; border-radius:1rem; border:2px solid hsl(var(--ink));
  background-color: hsl(var(--lime)); padding:0.75rem 1rem;
}
.subscribe-success svg{ width:1.25rem; height:1.25rem; flex-shrink:0; }
.subscribe-success p{
  margin:0; font-family:var(--font-display,"Space Grotesk"),sans-serif; font-weight:700; font-size:0.875rem;
  text-transform:uppercase; letter-spacing:-0.01em;
}

/* Footer */
.site-footer{
  margin:2.5rem auto 0; max-width:80rem; padding-top:1.25rem;
  border-top:2px dashed hsl(var(--ink) / 0.3); font-size:0.75rem; color: hsl(var(--muted-foreground));
}
@media (min-width:640px){ .site-footer{ display:flex; align-items:center; justify-content:space-between; } }
.site-footer p{ margin:0.5rem 0 0; }
@media (min-width:640px){ .site-footer p{ margin:0; } }
.site-footer .brand-line{ font-family:var(--font-display,"Space Grotesk"),sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:0.2em; color: hsl(var(--ink)); }