/* ============================================================
   PINYA — Concept 3 "Tropical Maximal" brand layer
   Loaded AFTER style.css / landing.css to re-skin the existing
   site without changing its markup or JS. Targets real classes.
   ============================================================ */
:root{
  --coral:#E8734A;
  --light-yellow:#FFF1BF;
}

/* ---------- Buttons -> sticker style ---------- */
.btn{
  text-transform:none !important;
  font-family:var(--ff-poppins);
  font-weight:700;
  border-radius:100px;
  border:2.5px solid var(--dark-green) !important;
  box-shadow:4px 4px 0 var(--dark-green);
  transition:transform .18s ease, box-shadow .18s ease, background .2s ease;
}
.btn:is(:hover,:focus){transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--dark-green);}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--dark-green);}
.btn-primary{background:var(--pineapple-yellow);color:var(--dark-green);}
.btn-primary:is(:hover,:focus){background:var(--pineapple-gold);}
.btn-secondary{background:var(--white);color:var(--dark-green);border-color:var(--dark-green) !important;}
.btn-secondary:is(:hover,:focus){background:var(--light-yellow);color:var(--dark-green);}

/* ---------- Header -> yellow bar + coral top accent ---------- */
.header-top{
  background:var(--pineapple-yellow) !important;
  border-top:6px solid var(--coral) !important;
  border-bottom:3px solid var(--dark-green) !important;
}
.logo-text,.logo-tagline{color:var(--dark-green) !important;}
.nav-open-btn{color:var(--dark-green) !important;}
.navbar-link{font-family:var(--ff-poppins);font-weight:600;color:var(--dark-green) !important;}
.navbar-link:is(:hover,:focus){color:var(--coral) !important;}
/* Mobile (<768px): drawer = cream sticker panel; bar = hamburger left, pineapple centered, Sign In right */
@media (max-width:767px){
  .navbar{background:var(--cream) !important;border-right:3px solid var(--dark-green);}
  .header-top .container{position:relative;}
  .nav-open-btn{position:absolute;left:8px;top:50%;transform:translateY(-50%);}
  .logo{position:absolute;left:50%;transform:translateX(-50%);margin:0;}
  .logo .logo-text-wrap{display:none !important;}
  .logo .logo-img{height:42px;}
  .header-actions{margin-left:auto;}
  .header-actions .btn{padding:8px 15px !important;font-size:13px;}
}

/* ---------- Headings / section kickers ---------- */
.section-subtitle{
  color:var(--coral) !important;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-weight:700;
}
.section-title{color:var(--leaf-green);letter-spacing:-.02em;}
.h1,.h2,.h3{font-family:var(--ff-poppins);}

/* ---------- Cards -> sticker style ---------- */
.card,.pillar-card{
  border:3px solid var(--dark-green) !important;
  border-radius:20px !important;
  box-shadow:6px 6px 0 var(--dark-green) !important;
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover,.pillar-card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--dark-green) !important;}
.pillar-card .card-title{color:var(--leaf-green);}
.pillar-card .card-icon{color:var(--coral);}
.pillar-dot.is-active{background:var(--coral);}

/* ---------- Hero ---------- */
.hero,.landing-hero{background:radial-gradient(circle at 78% 18%, var(--light-yellow), var(--cream) 62%) !important;}
.hero .hero-title,.landing-hero .hero-title,.hero-title{color:var(--leaf-green) !important;letter-spacing:-.03em;}
.hero .hero-text,.landing-hero .hero-text,.hero-text{color:var(--charcoal) !important;}
.hero-subtitle,.hero .section-subtitle{color:var(--coral) !important;}

/* ---------- Floating globe (transparent, no dark backdrop) ---------- */
.landing-globe-wrapper{border-radius:24px;background:transparent !important;}

/* ---------- Footer accents ---------- */
.footer-bottom-link:is(:hover,:focus){color:var(--pineapple-yellow);}

/* ============================================================
   HOME — Concept 3 layout (real markup)
   ============================================================ */
.hero-content{max-width:760px;margin:0 auto;text-align:center;padding:24px 0 6px;}
.hero-title{font-size:clamp(44px,7vw,82px);font-weight:800;line-height:.98;}
.hero-text{font-size:19px;max-width:600px;margin:24px auto 30px;}
.hero .btn-group{justify-content:center;display:flex;}

/* Globe section: float, no white card */
.landing-globe-section{padding-block:30px 60px;}
.landing-globe-wrapper{background:transparent !important;box-shadow:none !important;border-radius:0 !important;overflow:visible !important;}
.landing-fact-strip{margin-top:6px;}
.fact-label{color:var(--coral) !important;}
.fact-text{
  background:var(--white) !important;border:3px solid var(--dark-green) !important;
  border-radius:18px !important;box-shadow:5px 5px 0 var(--dark-green) !important;
  color:var(--charcoal) !important;font-weight:500;
}

/* Bento pillars */
.c3-pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1100px;margin:8px auto 0;}
.c3-pcard{background:var(--white);border:3px solid var(--dark-green);border-radius:24px;padding:32px 28px;box-shadow:6px 6px 0 var(--dark-green);transition:transform .18s ease, box-shadow .18s ease;text-align:left;}
.c3-pcard:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--dark-green);}
.c3-pcard:first-child{background:var(--light-yellow);}
.c3-pcard-feature{background:var(--leaf-green);}
.c3-pcard-feature .card-title{color:var(--white) !important;}
.c3-pcard-feature .card-text{color:rgba(255,249,230,.86) !important;}
.c3-pcard-feature .c3-ico{background:var(--pineapple-yellow);color:var(--dark-green);}
.c3-ico{width:56px;height:56px;border-radius:16px;background:var(--pineapple-yellow);border:2.5px solid var(--dark-green);display:grid;place-items:center;margin-bottom:18px;}
.c3-ico ion-icon{font-size:28px;color:var(--dark-green);display:block;}
.c3-pcard .card-title{color:var(--leaf-green);margin-bottom:10px;font-weight:800;}
.c3-pcard .card-text{font-size:15.5px;line-height:1.6;color:var(--charcoal);}
@media(max-width:860px){.c3-pgrid{grid-template-columns:1fr;}}

/* About circle */
.landing-about .logo-circle-clip{box-shadow:0 8px 32px rgba(45,80,22,.18) !important;}

/* CTA: green panel + circle badge */
.landing-cta .container{max-width:1100px;}
.landing-cta .cta-content{
  background:var(--leaf-green) !important;border:3px solid var(--dark-green);
  border-radius:34px;padding:60px 40px;text-align:center;box-shadow:10px 10px 0 rgba(26,48,9,.25);
}
.landing-cta .cta-title{color:var(--cream) !important;}
.landing-cta .cta-text{color:rgba(255,249,230,.88) !important;}
.c3-cta-badge{width:130px;height:130px;border-radius:50%;overflow:hidden;border:4px solid var(--cream);box-shadow:0 8px 28px rgba(0,0,0,.25);margin:0 auto 20px;position:relative;}
.c3-cta-badge img{position:absolute;left:50%;top:50%;width:170%;height:170%;transform:translate(-50%,-50%);object-fit:cover;}

/* Section kicker centered on home sections */
.landing-globe-section .section-subtitle,.landing-features .section-subtitle,.landing-cta .section-subtitle{text-align:center;}

/* ============================================================
   Sitewide card convergence (2026-07): every legacy soft-shadow
   card class from style.css joins the Concept 3 sticker system.
   One recipe, one hover, defined once here. style.css keeps the
   layout properties (padding, grids); this layer owns the look
   (border, radius, shadow, hover motion).
   ============================================================ */
.destination-safety-card,
.destination-intel-card,
.advisory-card,
.itinerary-card-small,
.feed-card,
.ranking-card,
.tip-card,
.emergency-card,
.value-card,
.showcase-card,
.browse-featured-card,
.preference-card,
.blueprint-day-card,
.booking-link-card,
.tab-card,
.featured-pick-card,
.intel-feat-card,
.quick-help-card,
.concierge-card,
.feature-card,
.day-card,
.similar-card,
.rework-strategy-card,
.pinya-check-card,
.trip-card,
.itinerary-card,
.destination-card,
.suggestion-card,
.template-card,
.stat-card{
  background:var(--white,#fff);
  border:3px solid var(--dark-green) !important;
  border-radius:20px !important;
  box-shadow:6px 6px 0 var(--dark-green) !important;
  transition:transform .18s ease, box-shadow .18s ease;
}
.destination-safety-card:hover,
.destination-intel-card:hover,
.advisory-card:hover,
.itinerary-card-small:hover,
.feed-card:hover,
.ranking-card:hover,
.tip-card:hover,
.emergency-card:hover,
.value-card:hover,
.showcase-card:hover,
.browse-featured-card:hover,
.preference-card:hover,
.blueprint-day-card:hover,
.booking-link-card:hover,
.tab-card:hover,
.featured-pick-card:hover,
.intel-feat-card:hover,
.quick-help-card:hover,
.concierge-card:hover,
.feature-card:hover,
.day-card:hover,
.similar-card:hover,
.trip-card:hover,
.itinerary-card:hover,
.destination-card:hover,
.suggestion-card:hover,
.template-card:hover{
  transform:translate(-3px,-3px);
  box-shadow:9px 9px 0 var(--dark-green) !important;
}
/* Emergency info reads better calm: keep the sticker border but a
   cream fill so it stands apart from tappable cards. */
.emergency-card{background:var(--light-yellow) !important;}
/* Cards that live inside other sticker cards drop to a lighter
   2px border so nesting does not double up visual weight. */
.booking-link-card,.itinerary-card-small,.similar-card{
  border-width:2px !important;
  box-shadow:4px 4px 0 var(--dark-green) !important;
}