/* Planning Hub - planning-hub-v1.css */

/* ── Hero Section ── */
.ph-hero {
  position: relative;
  overflow: hidden;
  background: #0d2b3e;
  padding: 120px 4% 80px;
  min-height: 70vh;
  min-height: 70svh;
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
/* Transition class added by JS after measuring initial height */
.ph-hero.ph-ready {
  transition: height 1.4s cubic-bezier(0.4, 0, 0.2, 1),
              min-height 1.4s cubic-bezier(0.4, 0, 0.2, 1),
              padding 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.ph-hero::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 65%;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.15) 55%, transparent 100%);
  z-index: 1;
  transition: height 1.4s cubic-bezier(0.4, 0, 0.2, 1),
              background 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.ph-hero > * { position: relative; z-index: 2; }
.ph-hero-img {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* ── Frosted glass content panel ──
   Bumped full-state backdrop from rgba(0,0,0,0.15) → 0.32 + stronger blur.
   The old value let bright wave/foam imagery bleed through the panel and
   drown the H1 contrast (white text on near-white spray). The compact
   state had enough darkness (0.35) to be readable; the full state didn't. */
.ph-hero-content {
  background: rgba(0,0,0,0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 24px;
  padding: 40px 48px 36px;
  max-width: 820px;
  transition: background 1.4s cubic-bezier(0.4, 0, 0.2, 1),
              backdrop-filter 1.4s cubic-bezier(0.4, 0, 0.2, 1),
              padding 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ph-hero h1 {
  font-size: 52px;
  font-weight: 700;
  margin: 0 0 16px;
  line-height: 1.1;
  letter-spacing: -0.5px;
  /* Force white explicitly — some site-wide h1 rules can drag the color
     toward the default dark brand. Without !important the hero H1 reads
     dark against the frosted panel once the background gradient shifts
     in compact state. */
  color: #fff !important;
  text-shadow: 0 2px 24px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.45);
  transition: font-size 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.ph-hero .ph-subtitle {
  font-size: 20px;
  line-height: 1.55;
  max-width: 700px;
  margin: 0 auto 28px;
  opacity: 0.95;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.35);
  transition: font-size 1.4s cubic-bezier(0.4, 0, 0.2, 1),
              margin 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.ph-trust {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 20px;
  font-size: 14px;
  opacity: 1;
  margin-bottom: 32px;
  transition: margin 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.ph-trust span {
  white-space: nowrap;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 6px 16px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,0.2);
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.ph-trust span i { margin-right: 5px; }
.ph-quick-start {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.ph-quick-start a {
  display: inline-block;
  padding: 16px 40px;
  border-radius: 50px;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s,
              padding 1.4s cubic-bezier(0.4, 0, 0.2, 1),
              font-size 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.ph-quick-start a:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.3);
}
.ph-btn-visit {
  background: #fff;
  color: #1D9771;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.ph-btn-move {
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.6);
}
.ph-btn-move:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.2); }

/* ── Compact hero state (added by JS after delay) ── */
/* Note: height is set via inline style by JS (overrides initial inline height) */
.ph-hero.ph-compact {
  padding: 90px 4% 50px;
}
.ph-hero.ph-compact::before {
  height: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.2) 100%);
}
.ph-hero.ph-compact .ph-hero-content {
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 28px 40px 24px;
}
.ph-hero.ph-compact h1 { font-size: 38px; }
.ph-hero.ph-compact .ph-subtitle { font-size: 17px; margin-bottom: 18px; }
.ph-hero.ph-compact .ph-trust { margin-bottom: 20px; }
.ph-hero.ph-compact .ph-quick-start a { padding: 12px 32px; font-size: 15px; }

/* ── Wave Divider ── */
.ph-wave {
  position: relative;
  margin-top: -50px;
  z-index: 3;
  line-height: 0;
}
.ph-wave svg {
  display: block;
  width: 100%;
  height: 50px;
}

/* ── Tab Navigation ── */
.ph-tab-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  background: #fff;
  border-bottom: 2px solid #e8e4df;
  padding: 0 2%;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.ph-tab-btn {
  padding: 16px 22px;
  font-size: 14px;
  font-weight: 600;
  color: #777;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.ph-tab-btn:hover { color: #1D9771; }
.ph-tab-btn.active {
  color: #1D9771;
  border-bottom-color: #1D9771;
}
.ph-tab-btn i { margin-right: 6px; }

/* ── Tab Panels ── */
.ph-panel {
  display: none;
  padding: 48px 4% 56px;
  max-width: 1200px;
  margin: 0 auto;
}
.ph-panel.active { display: block; }
.ph-panel-intro {
  font-size: 18px;
  line-height: 1.65;
  color: #444;
  max-width: 750px;
  margin: 0 0 36px;
}

/* ── Section Headers ── */
.ph-section-title {
  font-size: 26px;
  font-weight: 700;
  color: #222;
  margin: 44px 0 8px;
  padding-top: 12px;
}
.ph-section-title:first-of-type { margin-top: 0; }
.ph-section-sub {
  font-size: 15px;
  color: #666;
  margin: 0 0 24px;
}

/* ── Island Cards ── */
.ph-island-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 36px;
}
.ph-island-card {
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
  transition: transform 0.25s, box-shadow 0.25s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.ph-island-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.14);
}
.ph-island-card:hover .ph-island-img img {
  transform: scale(1.08);
}
.ph-island-img {
  position: relative;
  height: 210px;
  overflow: hidden;
}
.ph-island-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.ph-island-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  color: #fff;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.ph-island-body {
  padding: 18px 20px 22px;
}
.ph-island-body h3 {
  font-size: 21px;
  font-weight: 700;
  margin: 0 0 10px;
}
.ph-island-body ul {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  font-size: 14px;
  color: #555;
  line-height: 1.75;
}
.ph-island-body ul li::before {
  content: '\2022';
  margin-right: 8px;
  font-weight: 700;
}
.ph-island-cta {
  font-size: 14px;
  font-weight: 700;
  display: inline-block;
  transition: transform 0.15s;
}
.ph-island-card:hover .ph-island-cta {
  transform: translateX(4px);
}

/* Island accent colors on card CTAs */
.ph-island-card[data-island="oahu"] .ph-island-cta,
.ph-island-card[data-island="oahu"] h3 { color: #F27A24; }
.ph-island-card[data-island="oahu"] .ph-island-badge { background: rgba(242,122,36,0.85); }

.ph-island-card[data-island="maui"] .ph-island-cta,
.ph-island-card[data-island="maui"] h3 { color: #1866B4; }
.ph-island-card[data-island="maui"] .ph-island-badge { background: rgba(24,102,180,0.85); }

.ph-island-card[data-island="kauai"] .ph-island-cta,
.ph-island-card[data-island="kauai"] h3 { color: #1D9771; }
.ph-island-card[data-island="kauai"] .ph-island-badge { background: rgba(29,151,113,0.85); }

.ph-island-card[data-island="big-island"] .ph-island-cta,
.ph-island-card[data-island="big-island"] h3 { color: #c3232f; }
.ph-island-card[data-island="big-island"] .ph-island-badge { background: rgba(195,35,47,0.85); }

/* ── Resource Cards (generic link tiles) ── */
.ph-resource-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}
.ph-resource-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 10px rgba(0,0,0,0.06);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s;
  border-left: 4px solid #1D9771;
}
.ph-resource-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.1);
}
.ph-resource-card .ph-rc-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
}
.ph-rc-green { background: #1D9771; }
.ph-rc-orange { background: #F27A24; }
.ph-rc-blue { background: #1866B4; }
.ph-rc-red { background: #c3232f; }
.ph-rc-teal { background: #2a9d8f; }
.ph-rc-slate { background: #4a6670; }
.ph-resource-card .ph-rc-text h4 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px;
  color: #222;
}
.ph-resource-card .ph-rc-text p {
  font-size: 13px;
  color: #666;
  margin: 0;
  line-height: 1.45;
}

/* Color variants for border-left */
.ph-resource-card.ph-border-orange { border-left-color: #F27A24; }
.ph-resource-card.ph-border-blue { border-left-color: #1866B4; }
.ph-resource-card.ph-border-red { border-left-color: #c3232f; }
.ph-resource-card.ph-border-teal { border-left-color: #2a9d8f; }
.ph-resource-card.ph-border-slate { border-left-color: #4a6670; }

/* ── CTA Banner (inline) ── */
.ph-cta-banner {
  background: linear-gradient(135deg, #1D9771 0%, #168060 100%);
  color: #fff;
  border-radius: 14px;
  padding: 32px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 36px 0;
}
.ph-cta-banner h3 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
}
.ph-cta-banner p {
  font-size: 15px;
  margin: 0;
  opacity: 0.9;
}
.ph-cta-banner a {
  flex-shrink: 0;
  padding: 12px 28px;
  background: #fff;
  color: #1D9771;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s;
}
.ph-cta-banner a:hover { transform: translateY(-2px); }

/* ── Callout Box ── */
.ph-callout {
  background: #fef9f0;
  border: 1px solid #f0e0c0;
  border-radius: 12px;
  padding: 24px 28px;
  margin: 28px 0;
}
.ph-callout-title {
  font-size: 17px;
  font-weight: 700;
  color: #8a6d3b;
  margin: 0 0 8px;
}
.ph-callout-title i { margin-right: 8px; }
.ph-callout p {
  font-size: 15px;
  color: #666;
  margin: 0;
  line-height: 1.55;
}

/* ── Quiz CTA Card ── */
.ph-quiz-cta {
  background: linear-gradient(135deg, #f0faf6 0%, #e6f7f0 100%);
  border: 2px solid #c8ece0;
  border-radius: 16px;
  padding: 32px 36px;
  text-align: center;
  margin: 32px 0 0;
}
.ph-quiz-cta h3 {
  font-size: 22px;
  font-weight: 700;
  color: #1D9771;
  margin: 0 0 10px;
}
.ph-quiz-cta p {
  font-size: 16px;
  color: #555;
  margin: 0 0 18px;
}
.ph-quiz-cta a {
  display: inline-block;
  padding: 14px 36px;
  background: #1D9771;
  color: #fff;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
  box-shadow: 0 4px 14px rgba(29,151,113,0.2);
}
.ph-quiz-cta a:hover { background: #168060; transform: translateY(-2px); }

/* ── Tool Grid (compact) ── */
.ph-tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.ph-tool-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
}
.ph-tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}
.ph-tool-card i {
  font-size: 22px;
  width: 36px;
  text-align: center;
  flex-shrink: 0;
}
.ph-tool-card .ph-tc-text {
  min-width: 0;
}
.ph-tool-card .ph-tc-text strong {
  display: block;
  font-size: 15px;
  color: #222;
  margin-bottom: 2px;
}
.ph-tool-card .ph-tc-text span {
  font-size: 12px;
  color: #888;
}

/* ── Affiliate Disclosure (compact) ── */
.ph-affiliate-note {
  font-size: 12px;
  color: #999;
  text-align: center;
  padding: 16px 4%;
  border-top: 1px solid #eee;
  margin-top: 20px;
}

/* ── Welcome-Back Banner ── */
.ph-welcome-back {
  background: #e8f5f0;
  border-bottom: 1px solid #c8ece0;
}
.ph-wb-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 4%;
  display: flex;
  align-items: center;
  gap: 14px;
}
.ph-wb-icon {
  font-size: 28px;
  color: #1D9771;
  flex-shrink: 0;
}
.ph-wb-text {
  flex: 1;
  font-size: 14px;
  color: #333;
  line-height: 1.45;
}
.ph-wb-text strong {
  display: block;
  font-size: 15px;
  margin-bottom: 2px;
}
.ph-wb-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.ph-wb-btn-resume {
  padding: 8px 20px;
  background: #1D9771;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.ph-wb-btn-resume:hover { background: #168060; }
.ph-wb-btn-dismiss {
  background: none;
  border: none;
  color: #888;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
}
.ph-wb-btn-dismiss:hover { color: #333; }

/* ── Email Capture ── */
.ph-email-capture {
  background: linear-gradient(135deg, #1D5B4C 0%, #1a3a4a 100%);
  padding: 0;
}
.ph-email-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 4%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.ph-email-text {
  color: #fff;
  flex: 1;
  min-width: 0;
}
.ph-email-text strong {
  display: block;
  font-size: 15px;
  margin-bottom: 3px;
}
.ph-email-text strong i { margin-right: 6px; }
.ph-email-text span {
  font-size: 13px;
  opacity: 0.85;
  line-height: 1.4;
}
.ph-email-form {
  display: flex;
  gap: 0;
  flex-shrink: 0;
}
.ph-email-form input {
  padding: 10px 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-right: none;
  border-radius: 6px 0 0 6px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 14px;
  width: 220px;
  outline: none;
  transition: border-color 0.2s;
}
.ph-email-form input::placeholder { color: rgba(255,255,255,0.5); }
.ph-email-form input:focus { border-color: rgba(255,255,255,0.7); }
.ph-email-form button {
  padding: 10px 20px;
  background: #fff;
  color: #1D9771;
  border: none;
  border-radius: 0 6px 6px 0;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.ph-email-form button:hover { background: #e8f5f0; }
.ph-email-success {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  padding: 6px 0;
}
.ph-email-success i {
  color: #52b788;
  margin-right: 6px;
}

/* ── Progress Bar ── */
.ph-progress {
  background: #f7f5f2;
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-bottom: 1px solid #e8e4df;
  max-width: 600px;
  margin: 0 auto;
}
.ph-progress-track {
  flex: 0 1 300px;
  height: 6px;
  background: #e0ddd8;
  border-radius: 3px;
  overflow: hidden;
}
.ph-progress-fill {
  height: 100%;
  background: #1D9771;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.ph-progress-label {
  font-size: 12px;
  color: #888;
  white-space: nowrap;
}
/* Full-width background wrapper behind centered progress */
.ph-progress-wrapper {
  background: #f7f5f2;
  border-bottom: 1px solid #e8e4df;
  padding: 0 4%;
}

/* ── Visited Tab Dot ── */
.ph-tab-btn[data-visited="true"]::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #1D9771;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .ph-island-grid { grid-template-columns: repeat(2, 1fr); }
  .ph-resource-grid { grid-template-columns: repeat(2, 1fr); }
  .ph-tool-grid { grid-template-columns: repeat(2, 1fr); }
  .ph-hero { min-height: 55vh; padding: 100px 4% 60px; }
  .ph-hero h1 { font-size: 42px; }
  .ph-hero-content { padding: 32px 36px 28px; }
  .ph-hero.ph-compact { padding: 85px 4% 44px; }
  .ph-hero.ph-compact h1 { font-size: 34px; }
}
@media (max-width: 768px) {
  .ph-hero { padding: 80px 5% 50px; min-height: 50vh; }
  .ph-hero h1 { font-size: 34px; }
  .ph-hero .ph-subtitle { font-size: 17px; }
  .ph-hero-content { padding: 24px 20px 20px; border-radius: 18px; }
  .ph-trust { gap: 8px 12px; font-size: 12px; }
  .ph-trust span { padding: 5px 12px; }
  .ph-quick-start a { padding: 14px 32px; font-size: 16px; }
  /* Wave svg drops from 50px → 35px on tablet/mobile, so the -50px pull-up
     at desktop ends up too aggressive here and pokes the scallops high into
     the hero image. Scale the pull-up to match the smaller svg. */
  .ph-wave { margin-top: -35px; }
  .ph-wave svg { height: 35px; }
  .ph-hero.ph-compact { padding: 70px 5% 36px; }
  .ph-hero.ph-compact h1 { font-size: 26px; }
  .ph-hero.ph-compact .ph-subtitle { font-size: 15px; }
  .ph-hero.ph-compact .ph-hero-content { padding: 20px 16px 16px; }
  .ph-hero.ph-compact .ph-quick-start a { padding: 10px 24px; font-size: 14px; }
  .ph-tab-nav {
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ph-tab-nav::-webkit-scrollbar { display: none; }
  .ph-tab-btn { padding: 14px 16px; font-size: 13px; }
  .ph-panel { padding: 32px 5% 40px; }
  .ph-island-grid { grid-template-columns: 1fr; }
  .ph-island-img { height: 180px; }
  .ph-resource-grid { grid-template-columns: 1fr; }
  .ph-tool-grid { grid-template-columns: 1fr; }
  .ph-cta-banner {
    flex-direction: column;
    text-align: center;
    padding: 24px 20px;
  }
  .ph-section-title { font-size: 22px; }
  .ph-wb-inner {
    flex-direction: column;
    text-align: center;
    padding: 14px 5%;
  }
  .ph-wb-actions { justify-content: center; }
  .ph-email-inner {
    flex-direction: column;
    text-align: center;
    padding: 16px 5%;
  }
  .ph-email-form { width: 100%; }
  .ph-email-form input { flex: 1; width: auto; min-width: 0; }
  .ph-progress { max-width: 100%; padding: 8px 5%; }
}

/* ── Print ── */
@media print {
  .ph-tab-nav, .ph-hero-img, .ph-cta-banner,
  .ph-affiliate-note,
  .ph-welcome-back, .ph-email-capture, .ph-progress { display: none; }
  .ph-panel { display: block !important; padding: 20px 0; }
  .ph-panel::before {
    content: attr(data-tab-label);
    display: block;
    font-size: 22px;
    font-weight: 700;
    border-bottom: 2px solid #333;
    padding-bottom: 6px;
    margin-bottom: 16px;
  }
  .ph-island-grid,
  .ph-resource-grid,
  .ph-tool-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ph-island-card, .ph-resource-card, .ph-tool-card {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}