<!-- ==========================
FILE: /style.css
========================== -->
:root{
  --gold:#FFC000; --red:#C00000; --teal:#0E9693; --brown:#773E18; --ink:#222; --bg:#fffaf1;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family: Georgia, "Palatino Linotype", serif; color:var(--ink); background:var(--bg); line-height:1.5}
img{max-width:100%; height:auto}
.container{width:min(1100px, 92vw); margin-inline:auto}
.flex{display:flex; gap:1rem}
.between{justify-content:space-between}
.center{align-items:center}
.grid{display:grid; gap:1.25rem}
.grid.two{grid-template-columns: 1fr 1fr}
.cards-3{grid-template-columns: repeat(3, 1fr)}
.narrow{max-width:720px; margin-inline:auto}
.section{padding:3.5rem 0}
.section.alt{background:#fff}
.lead{font-size:1.12rem}
.sr-only{position:absolute; left:-9999px}
.sm{font-size:.9rem; opacity:.8}
.tiny{font-size:.8rem; opacity:.7}

/* Header */
/* ==========================
   HEADER + NAVIGATION
   ========================== */

.site-header {
  background:#773E18;
  color:white;
  position:sticky;
  top:0;
  z-index:10;
}

.brand {
  font-family:"Luckiest Guy", system-ui;
  color:white;
  text-decoration:none;
  font-size:1.25rem;
  letter-spacing:.5px;
}

/* Nav list (desktop defaults) */
.main-nav .nav-list {
  display: flex;
  align-items: center;
  gap: .75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Nav links */
.main-nav .nav-list a {
  display: inline-block;
  line-height: 1;
  padding: .55rem .8rem;
  border-radius: .8rem;
  color: white;
  text-decoration: none;
}
.main-nav .nav-list a:hover {
  background: rgba(255,255,255,.14);
}

/* Contact button (still a button, but aligned) */
.main-nav .nav-list .btn {
  padding: .55rem .8rem;
  border: 2px solid transparent;
  font-weight: 700;
}

/* Mobile nav toggle (hamburger) */
.main-nav .nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Highlight the active/current page link */
.main-nav .nav-list a[aria-current="page"] {
  background: var(--teal, #0E9693);
  color: #fff;
  border-radius: .8rem;
  font-weight: 700;
}

/* Mobile layout */
@media (max-width: 900px) {
  .main-nav .nav-toggle { display: inline-block; }

  .main-nav .nav-list {
    display: none;
    flex-direction: column;
    align-items: stretch;
    background: var(--brown, #773E18);   /* fallback to hex */
    color: #fff;
    position: absolute;
    right: 1rem;
    top: 3.2rem;
    padding: .75rem;
    border-radius: 1rem;
    box-shadow: 0 6px 14px rgba(0,0,0,.28);
    border: 2px solid rgba(255,255,255,.15);
    z-index: 1000;
  }
  .main-nav .nav-list.open { display: flex; }

  .main-nav .nav-list a {
    width: 100%;
    padding: .7rem .9rem;
    border-radius: .7rem;
    color: #fff;                          /* ensure contrast */
  }
  .main-nav .nav-list a:hover {
    background: rgba(255,255,255,.14);
  }
}

/* Buttons */
/* ==========================
   BUTTONS (unified + with fallbacks)
   ========================== */
.btn {
  display: inline-block;
  padding: .7rem 1rem;
  border-radius: .9rem;
  border: 2px solid transparent;
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform .08s ease, background-color .12s ease, color .12s ease, border-color .12s ease;
}
.btn:hover { transform: translateY(-1px); }

/* Solid buttons */
.btn-teal {
  background: var(--teal, #0E9693);
  color: #fff;
}
.btn-gold {
  background: var(--gold, #FFC000);
  color: #2a2000;
}
.btn-red {
  background: var(--red, #C00000);
  color: #fff;
}

/* Outline (if you use it elsewhere) */
.btn-outline {
  background: transparent;
  color: var(--brown, #773E18);
  border-color: var(--brown, #773E18);
}

/* Hover states */
.btn-teal:hover { background: var(--gold, #FFC000); color: #2a2000; }
.btn-gold:hover { background: var(--red, #C00000);  color: #fff; }
.btn-red:hover  { background: var(--gold, #FFC000); color: #2a2000; }
.btn-outline:hover { background: var(--brown, #773E18); color: #fff; }


/* Ticket CTA */
.ticket-cta {
  display:inline-block;
  padding:.85rem 1.2rem;
  border-radius:1.1rem;
  border:2px dashed #b58900;   /* ticket border */
  background:#ffffff;          
  color:#0E9693;           /* text colour */
  font-weight:900;
  letter-spacing:.3px;
  text-decoration:none;
}
.ticket-cta:hover {
  background:#FFC000;
  color:#773E18;
}

/* Hero */
.hero{padding:4rem 0 0.5rem; background: radial-gradient(1000px 600px at 20% -100px, #ffe8a0, transparent) , linear-gradient(#fff7db, #fffaf1)}
.hero h1{font-family:"Luckiest Guy"; font-size:2.6rem; line-height:1}
.hero .sub{color:var(--red)}
.hero-grid{grid-template-columns: 1.1fr .9fr; align-items:center}
.cta-row{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1rem}

/* Decorative hero art */
.hero-art { position: relative; min-height: 260px; display:flex; align-items:center; justify-content:center; }
.hero-art img { width:100%; max-width:320px; /* tighter so it doesn’t overwhelm */ height:auto; object-fit: contain; /* show entire circle */ border-radius: 50%; /* optional: keeps it perfectly round if transparent background */ box-shadow: 0 8px 0 #e8d48e; border:2px solid #f2e1a2; background:white; /* ensures clean edges if the seal has transparency */ padding:0.5rem;   /* breathing room inside the frame */}

@media (max-width: 900px){ .hero-art img{ max-width: 100%; } }

/* Cards */
.card{background:white; border:2px solid #f2e1a2; border-radius:1.25rem; padding:1.1rem; box-shadow:0 6px 0 #e8d48e}
.card.highlight{border-color:#ffcf4d; box-shadow:0 8px 0 #e1b100}
.cards-3 .card h2, .cards-3 .card h3{font-family:"Luckiest Guy"}

/* Promo art (postcards) */
.promo-art .postcard-stack, .product-media .postcard-stack{width:100%; height:220px; background:repeating-linear-gradient(45deg,#ffe39a 0 10px,#ffd260 10px 20px); border:3px dashed #cfa60a; border-radius:1rem}

/* Checklist */
.checklist{padding-left:1.2rem}
.checklist li{margin:.4rem 0}
.checklist li::marker{content: "\2714 ";  /* same as &#10004; = ? */ color:var(--teal); font-weight:700}

/* Forms */
.stack{display:grid; gap:1rem}
.field label{display:block; font-weight:700; margin-bottom:.25rem}
input, textarea, select{width:100%; padding:.7rem .8rem; border-radius:.8rem; border:2px solid #e6d8a0; background:white}
.inline-form{display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center}
.signup-box{background:white; border:2px solid #f2e1a2; border-radius:1.25rem; padding:1rem; box-shadow:0 6px 0 #e8d48e}

/* Style YMLP-injected form inside our signup box */
.signup-box form {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
}

.signup-box input[type="email"],
.signup-box input[type="text"],
.signup-box select {
  min-width: 260px;
  flex: 1 1 260px;
  padding: .7rem .8rem;
  border-radius: .8rem;
  border: 2px solid #e6d8a0;
  background: white;
  font: inherit;
}

.signup-box input[type="submit"],
.signup-box button[type="submit"] {
  /* Match our .btn .btn-teal style */
  display: inline-block;
  padding: .7rem 1rem;
  border-radius: .9rem;
  border: 2px solid transparent;
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  background: var(--teal, #0E9693);
  color: #fff;
  transition: transform .08s ease, background-color .12s ease, color .12s ease;
}

.signup-box input[type="submit"]:hover,
.signup-box button[type="submit"]:hover {
  transform: translateY(-1px);
  background: var(--gold, #FFC000);
  color: #2a2000;
}

/* Align any helper text YMLP outputs */
.signup-box .message,
.signup-box .error,
.signup-box .success,
.signup-box p {
  width: 100%;
  text-align: center;
  margin: .35rem 0 0;
}
.signup-box .error { color: #8f0c0c; font-weight: 700; }
.signup-box .success { color: var(--teal, #0E9693); font-weight: 700; }

.signup-box small {
  display: block;
  text-align: center;
  margin-top: .35rem;
  color: #555; /* optional: tone down the gray */
}


.price-row{display:flex; align-items:baseline; gap:.65rem}
.price{font-size:1.5rem}
.note{opacity:.7}

/* Footer */
.site-footer {
  background: var(--brown, #773E18);  /* your brand brown */
  color: white;
  padding: 2rem 0;
  margin-top: 2rem;
  text-align: center;
  font-family: "Georgia", "Palatino Linotype", serif;
  font-size: 0.95rem;
}

.site-footer a {
  color: white;            /* default link color */
  text-decoration: none;   /* clean by default */
}

.site-footer a:hover {
  color: var(--gold, #FFC000);
  text-decoration: underline;
}

.foot-links {
  list-style: none;
  display: flex;
  gap: 1rem;
  justify-content: center;
  padding: 0;
  margin: .75rem 0 0;
}

.foot-links a {
  color: white;            /* default link color */
  text-decoration: none;   /* clean by default */
}

.foot-links a:hover {
  color: var(--gold, #FFC000);
  text-decoration: underline;  /* underline only on hover */
}

/* Social icons row */
.footer-social{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: .75rem;
}

/* Make PNG icons appear white by default on brown footer */
.footer-social img{
  width: 28px; height: 28px;
  filter: brightness(0) invert(1);
  opacity: .9;
  transition: transform .12s ease, opacity .12s ease, filter .12s ease, drop-shadow .12s ease;
}

/* Hover: tiny lift + gold glow */
.footer-social a:hover img{
  transform: translateY(-1px) scale(1.05);
  opacity: 1;
  /* keep white but add a subtle gold glow */
  filter: brightness(0) invert(1) drop-shadow(0 0 6px #FFC000);
}

/* Mobile spacing tweak (optional) */
@media (max-width: 600px){
  .footer-social{ gap: 16px; }
  .footer-social img{ width: 30px; height: 30px; }
}


/* Utilities */
.skip-link{position:absolute; left:-999px}
.skip-link:focus{left:8px; top:8px; background:var(--gold); color:#000; padding:.5rem 1rem; border-radius:.6rem}

/* Responsive */
@media (max-width: 900px){
  .grid.two, .cards-3, .hero-grid{grid-template-columns: 1fr}
  .main-nav .nav-toggle{display:inline-block}
  .nav-list{display:none; flex-direction:column; background:var(--brown); position:absolute; right:1rem; top:3.2rem; padding:1rem; border-radius:1rem}
  .nav-list a{display:block}
}


/* ======================
   Contact page polish
   ====================== */

/* Kickers + eyebrow labels */
.kicker { 
  font-size:.85rem; 
  font-weight:700; 
  color:var(--teal, #0E9693); 
  letter-spacing:.04em; 
  text-transform:uppercase; 
}
.eyebrow { display:inline-flex; align-items:center; gap:.5rem; }

/* Contact cards tidy */
.contact-cards .card { display:flex; flex-direction:column; }
.contact-cards .card h3 { margin:.25rem 0 .25rem; }
.contact-cards .card p { margin:.25rem 0 .5rem; }
.contact-cards .list { list-style:none; padding:0; margin:.35rem 0 0; }
.contact-cards .list li+li { margin-top:.25rem; }
.contact-cards .list a { 
  color:var(--brown,#773E18); 
  text-decoration:underline; 
  text-underline-offset:3px; 
}
.contact-cards .list a:hover { color:var(--red,#C00000); }

/* Phone badge */
.badge {
  display:inline-flex; align-items:center; flex-wrap:wrap; gap:.55rem .75rem;
  background:rgba(14,150,147,.07);
  border:1px solid rgba(14,150,147,.25);
  padding:.6rem .8rem; border-radius:12px; 
  font-weight:700; text-decoration:none; color:inherit;
}
.badge .hours { font-weight:600; font-size:.85rem; opacity:.8; }
@media (min-width:520px){
  .badge{ flex-wrap:nowrap; }
  .badge .hours{ padding-left:.7rem; margin-left:.2rem; border-left:1px solid rgba(14,150,147,.3); }
}

/* Mailto composer / fallback */
.contact-box .actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:8px; }
@media (max-width:600px){ .contact-box .actions .btn { width:100%; } }

.contact-msg { text-align:center; font-weight:700; margin:.5rem 0 0; }
.contact-msg.error { color:#8f0c0c; }
.contact-msg.success { color:var(--teal,#0E9693); }

/* Two-column grid helper */
.grid.two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:900px){ .grid.two { grid-template-columns:1fr; } }

/* Form focus */
select:focus, input:focus, textarea:focus { 
  outline:none; 
  box-shadow:0 0 0 4px rgba(14,150,147,.2); 
  border-color:var(--teal,#0E9693); 
}

/* Ensure message box spans full width */
#mailto-form .field textarea {
  width: 100%;
  display: block;
  min-height: 200px; /* gives breathing room */
}

/* Ensure action buttons sit below the textarea */
#mailto-form .actions {
  margin-top: 1rem;
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
#mailto-form .actions .btn {
  flex: 1 1 auto;  /* allows them to wrap nicely on mobile */
  max-width: 200px;
}
/* Force the contact form to flow in one column */
.contact-form { 
  display: block !important;      /* override any .stack/.grid rules */
}

/* Only these rows are 2-column */
.contact-form .grid.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 900px){
  .contact-form .grid.two { grid-template-columns: 1fr; }
}

/* Message field: full width */
#mailto-form .field textarea {
  width: 100%;
  display: block;
  min-height: 220px;
}

/* Actions: force onto its own row underneath */
#mailto-form .actions {
  margin-top: 1rem;
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  width: 100%;
  clear: both;                   /* belt-and-suspenders if floats exist */
  grid-column: 1 / -1;           /* in case the parent is grid */
}

/* Buttons sizing (optional) */
#mailto-form .actions .btn {
  flex: 0 0 auto;
  max-width: 220px;
}


/* Home page headline polish */
.hero h1 {
  color: var(--teal, #0E9693);
}

/* Card section headings */
.cards-3 .card h2,
.cards-3 .card h3 {
  color: var(--brown, #773E18);
}


/* Shop polish */
.product-grid { align-items: start; }
.product-card { display: grid; grid-template-columns: 1fr; gap: .8rem; }
.product-media img { border-radius: .9rem; border: 2px solid #f2e1a2; box-shadow: 0 6px 0 #e8d48e; }
.product-body { display: grid; gap: .5rem; }
.paypal-wrap form { margin-top: .35rem; }
@media (max-width:600px){
  .paypal-wrap input[type="image"]{ max-width:220px; height:auto; }
}

.product-title {
  font-family: "Luckiest Guy", system-ui;
  color: var(--brown, #773E18); /* or teal if you prefer */
  font-size: 1.4rem;
}

/* Site-wide alert */
.site-alert {
  background: #ffd8d2;                 /* salmon-ish */
  color: #5a1a16;                       /* high contrast on salmon */
  border: 2px solid #ffb4a7;
  padding: .9rem 0;
  box-shadow: 0 4px 0 rgba(0,0,0,.06);
}
.site-alert .container {
  display: flex; gap: .75rem; align-items: center; justify-content: center;
  text-align: center; flex-wrap: wrap;
}
.site-alert .eyebrow { color: #5a1a16; }

/* Pause switch: add class="sales-paused" on <body> when pausing sales */
.sales-paused .paypal-wrap { display: none !important; }
.sales-paused .product-card .paused-note { display: inline-block; }

.product-card .paused-note {
  display: none;
  font-weight: 700;
  color: #8f0c0c;
  background: #ffe9e6;
  border: 1px solid #f6b3ab;
  border-radius: .6rem;
  padding: .25rem .5rem;
  margin-left: .35rem;
}