/* ===========
   Web Dude Designs – Quote Page Styles
   File: /assets/css/quote.css
   =========== */

/* Color system (match your globe) */
:root{
  --globe-start:#0d2a5a;   /* deep navy */
  --globe-mid:#123d7a;     /* mid blue */
  --globe-end:#1f5fbf;     /* accent blue */
  --ink:#0b1220;
  --muted:#6f7b94;
  --card:#ffffff;
  --bg:#f7f9fc;
  --ring:rgba(13,42,90,.15);
  --radius:18px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
}
.container{max-width:1100px; margin:0 auto; padding:0 1rem}
h1,h2{line-height:1.2; margin:0 0 .5rem}
h1{font-size:clamp(1.6rem,3vw,2.2rem)}
h2{font-size:clamp(1.25rem,2.2vw,1.6rem)}
p{margin:.25rem 0 .75rem}
a{color:var(--globe-end); text-decoration:underline}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  border:0; border-radius:999px; padding:.8rem 1.2rem;
  background:var(--globe-end); color:#fff; text-decoration:none; font-weight:700;
}
.btn.secondary{background:#fff; color:var(--globe-end); box-shadow:0 0 0 1px var(--globe-end) inset}

/* Hero */
.hero{
  background:
    radial-gradient(1200px 300px at 120% -20%, rgba(255,255,255,.15), transparent 70%),
    linear-gradient(135deg, var(--globe-end), var(--globe-mid) 45%, var(--globe-start));
  color:#fff;
  position: relative;
  padding: .9rem 0 1.1rem;    /* tighter vertical height */
}

/* Grid layout: text + globe */
.hero-container {
  max-width: 940px;   /* keeps header content compact */
  margin: 0 auto;      /* centers horizontally */
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.2rem;
}

/* Center the text column */
.hero-content {
  align-self: start;   /* text aligns with top of globe */
  max-width: 560px;
  text-align: center;
}

/* Clickable globe with label */
/* Corrected globe size */
.hero-globe{
  width: clamp(240px, 22vw, 360px);
  height: clamp(240px, 22vw, 360px);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

.hero-globe canvas{ width:100%; height:100%; display:block; }
/* “Home” pill tab under globe */
.home-tab{
  margin-top: .5rem;
  padding: .35rem .7rem;
  font-size: .9rem;
  color: #fff;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  backdrop-filter: blur(2px);
}

/* Wider screens: give the text a touch more room */
@media (min-width: 820px){
  .hero-content{ max-width: 56%; }
}

/* Mobile: stack the globe under the text */
@media (max-width: 820px){
  .hero-container{ grid-template-columns: 1fr; }
  .hero-globe{
    margin: 1rem auto 0;
    width: 260px; height: 260px;
  }
}
	

/* Cards & layout */
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:0 12px 30px rgba(0,0,0,.08), 0 0 0 1px var(--ring);
  padding:1.25rem;
}
.grid{display:grid; gap:1rem}
.grid-2{grid-template-columns:1fr}
@media (min-width: 900px){
  .grid-2{ grid-template-columns: 2fr 1fr; } /* was 1.5fr 1fr */
}

/* if it's an iframe */
/* Wrapper should not center/limit the form */
#emailmeform-embed{
  display:block;
  min-height:520px;
  border:1px dashed var(--ring);
  border-radius:12px;
  padding:0;          /* keep provider’s spacing */
  width:100%;
}

/* Works whether EMF injects a form/table or an iframe */
#emailmeform-embed iframe,
#emailmeform-embed form,
#emailmeform-embed table{
  width:100% !important;
  max-width:100% !important;
}

#emailmeform-embed *,
#emailmeform-embed input[type="text"],
#emailmeform-embed input[type="email"],
#emailmeform-embed input[type="tel"],
#emailmeform-embed select,
#emailmeform-embed textarea{
  max-width:100% !important;
  width:100% !important;
  box-sizing:border-box;
  min-width:0 !important;
}



/* Sections */
.section{padding:18px 0}
.section h2{margin-bottom:.25rem}
.muted{color:var(--muted)}

/* Merch / Affiliates tiles */
.tiles{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:1rem;
}
.tile{
  background:#fff;
  border-radius:14px;
  box-shadow:0 6px 16px rgba(0,0,0,.06), 0 0 0 1px var(--ring);
  padding:1rem;
}
.tile img{
  width:100%; height:140px; object-fit:cover;
  border-radius:10px; margin-bottom:.5rem;
}

/* FAQ */
details{
  background:#fff; border-radius:12px; padding:.9rem 1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.05), 0 0 0 1px var(--ring);
}
details+details{margin-top:.75rem}
summary{font-weight:700; cursor:pointer}


/* CSS for Button Group*/
/* keep buttons grouped */
.btn-group{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.btn-group .btn{flex:1 1 auto;text-align:center}

/* make this area the positioning context */
.cta-block{position:relative}

/* email button so we can anchor toward its bottom-right corner */
#cta-email{position:relative;}

/* tag */
.badge-star{
  position:relative;
  display:inline-flex;align-items:center;gap:.4rem;
  font-weight:900;font-size:1.1rem;letter-spacing:.2px;
  padding:.6rem 1rem;border-radius:999px;
  background:linear-gradient(135deg,#ffd54d,#ffb300);
  color:#3b2b00;box-shadow:0 6px 14px rgba(0,0,0,.15);
  margin-top:.9rem;
  transform:translateX(22%); /* “hangs” off the button a bit to the right */
}

/* notch (the hole) */
.badge-star::after{
  content:"";position:absolute;top:-10px;left:22px;width:8px;height:8px;
  background:#fff;border-radius:50%;box-shadow:0 0 0 2px #cc9a00;
}

/* the string (little curve from button to notch) */
.badge-string{
  position:absolute;content:"";top:-18px;left:24px;width:34px;height:18px;
  border-left:2px solid #cc9a00;border-bottom:2px solid #cc9a00;
  border-bottom-left-radius:18px;
  /* subtle depth */
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.08));
}

/* tweak on larger screens so it lines up nicely with the button corner */
@media (min-width: 900px){
  .badge-star{transform:translateX(28%);}
  .badge-star::after{left:28px}
  .badge-string{left:30px;width:38px}
}

/* don’t stretch the columns to equal heights */
.grid{align-items:start}

/* make sidebar hug its content */
aside.card{align-self:start}

/* trim section bottom padding a bit (last section especially) */
.section{padding:16px 0}
.section:last-of-type{padding-bottom:8px}

/* if your form wrapper had a big min-height, reduce it */
#emailmeform-embed{min-height:0}

/* Swing animation keyframes */
/* Tag swinging animation */
@keyframes swing-tag {
  0%   { transform: translateX(28%) rotate(3deg); }
  50%  { transform: translateX(28%) rotate(-3deg); }
  100% { transform: translateX(28%) rotate(3deg); }
}

/* String swinging animation */
@keyframes swing-string {
  0%   { transform: rotate(2deg); }
  50%  { transform: rotate(-2deg); }
  100% { transform: rotate(2deg); }
}

/* Apply swing to badge */
.badge-star {
  animation: swing-tag 3s ease-in-out infinite;
  transform-origin: top left;
}

/* String inherits slight sway */
.badge-string {
  display: block;
  animation: swing-string 3s ease-in-ou



/* Footer */
footer{
  padding:32px 0; color:#fff;
  background:linear-gradient(135deg, var(--globe-start), var(--globe-mid));
}
footer .btn{background:#fff; color:var(--globe-mid)}