/*
 Theme Name:   Astra Boxie
 Theme URI:    https://storage.ebaoguo.com
 Description:  Astra child theme — Boxie 盒子君 design system.
               Warm orange + cream paper + Fredoka display.
 Author:       ebaoguo
 Author URI:   https://ebaoguo.com
 Template:     astra
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 Text Domain:  astra-boxie
*/

/* ═══════════════════════════════════════════════════
   Boxie Design Tokens
   ═══════════════════════════════════════════════════ */
:root {
  --bx-orange:        #FF7A1A;
  --bx-orange-soft:   #FFB37A;
  --bx-orange-deep:   #C4510A;
  --bx-yellow:        #FFD166;
  --bx-yellow-soft:   #FFF0B0;
  --bx-cream:         #FFF4E1;
  --bx-cream-deep:    #FFE8BE;
  --bx-paper:         #FFFAF0;
  --bx-ink:           #2A1810;
  --bx-ink-soft:      #4A3020;
  --bx-ink-mute:      #7A6050;
  --bx-leaf:          #3D9A6A;
  --bx-berry:         #D94B5C;
  --bx-sky:           #4A9FD4;

  --bx-r-sm:   10px;
  --bx-r-md:   18px;
  --bx-r-lg:   28px;
  --bx-r-xl:   40px;

  --bx-sh-card:    0 2px 0 var(--bx-ink);
  --bx-sh-card-lg: 0 3px 0 var(--bx-ink), 0 14px 28px -8px rgba(42,24,16,.18);
  --bx-sh-pop:     0 3px 0 var(--bx-ink);
  --bx-sh-pop-sm:  0 2px 0 var(--bx-ink);
}

/* ═══════════════════════════════════════════════════
   Global Boxie wrapper
   (applied to body.single-page-landing / .boxie)
   ═══════════════════════════════════════════════════ */
body,
.boxie {
  background: var(--bx-cream);
  color: var(--bx-ink);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* paper-dot texture on body */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, var(--bx-ink) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .028;
  pointer-events: none;
  z-index: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Fredoka', 'Plus Jakarta Sans', sans-serif;
  color: var(--bx-ink);
}

/* ═══════════════════════════════════════════════════
   Astra header overrides — Boxie style
   ═══════════════════════════════════════════════════ */
#masthead,
.ast-hfb-header {
  background: var(--bx-cream) !important;
  border-bottom: 2px solid var(--bx-ink) !important;
  box-shadow: none !important;
}

.ast-primary-header-bar {
  background: var(--bx-cream) !important;
}

.main-header-menu .menu-link,
.main-header-menu .menu-item a {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--bx-ink-soft) !important;
}

.main-header-menu .menu-link:hover {
  color: var(--bx-orange) !important;
}

.ast-masthead-custom-menu-items a,
.ast-header-custom-item a {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* Logo styling */
.ast-logo-title-area {
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  color: var(--bx-ink) !important;
}

/* Mobile hamburger colour */
.ast-mobile-menu-buttons .menu-toggle {
  color: var(--bx-ink) !important;
}

/* ═══════════════════════════════════════════════════
   Astra footer overrides
   ═══════════════════════════════════════════════════ */
#colophon,
.ast-footer-area,
.site-footer {
  background: var(--bx-cream) !important;
  border-top: 2px solid var(--bx-ink) !important;
  color: var(--bx-ink-soft) !important;
}

.ast-footer-area a { color: var(--bx-ink-soft) !important; }
.ast-footer-area a:hover { color: var(--bx-orange) !important; }

/* ═══════════════════════════════════════════════════
   Page layout — no sidebar, full-width
   ═══════════════════════════════════════════════════ */
.entry-content,
.ast-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}

/* Remove default page title on the homepage */
.home .entry-header { display: none; }
.home .page-content { padding: 0; }

/* ═══════════════════════════════════════════════════
   Layout utilities
   ═══════════════════════════════════════════════════ */
.bx-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.bx-section {
  padding: 64px 0;
  position: relative;
  z-index: 1;
}
.bx-section--cream  { background: var(--bx-cream); }
.bx-section--paper  { background: var(--bx-paper); }
.bx-section--orange { background: var(--bx-orange); }
.bx-section--yellow { background: var(--bx-yellow-soft); }
.bx-section--ink    { background: var(--bx-ink); color: var(--bx-paper); }

/* ═══════════════════════════════════════════════════
   Typography
   ═══════════════════════════════════════════════════ */
.bx-eyebrow {
  display: inline-block;
  font-family: 'Caveat', cursive !important;
  font-size: 20px;
  font-weight: 700;
  color: var(--bx-orange-deep);
  letter-spacing: .01em;
}

.bx-display-xl {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0;
}

.bx-display-lg {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: clamp(30px, 4.5vw, 48px);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0;
}

.bx-display-md {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.15;
  margin: 0;
}

.bx-lede {
  font-size: 17px;
  line-height: 1.65;
  color: var(--bx-ink-soft);
  max-width: 600px;
}

.bx-scribble {
  position: relative;
  display: inline-block;
}
.bx-scribble::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 6px;
  background: var(--bx-orange);
  border-radius: 3px;
  opacity: .55;
  transform: rotate(-.5deg) skewX(-3deg);
}

/* ═══════════════════════════════════════════════════
   Cards
   ═══════════════════════════════════════════════════ */
.bx-card {
  background: var(--bx-paper);
  border: 2px solid var(--bx-ink);
  border-radius: var(--bx-r-lg);
  box-shadow: var(--bx-sh-card);
}

.bx-card-lg {
  background: var(--bx-paper);
  border: 2px solid var(--bx-ink);
  border-radius: var(--bx-r-xl);
  box-shadow: var(--bx-sh-card-lg);
}

/* ═══════════════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════════════ */
.bx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px solid var(--bx-ink);
  border-radius: 999px;
  padding: 12px 22px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 15px;
  background: var(--bx-paper);
  color: var(--bx-ink);
  box-shadow: var(--bx-sh-pop-sm);
  cursor: pointer;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform .12s, box-shadow .12s;
}
.bx-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 0 var(--bx-ink);
  color: var(--bx-ink);
}
.bx-btn:active { transform: translateY(1px); box-shadow: none; }

.bx-btn--primary {
  background: var(--bx-orange);
  color: var(--bx-paper) !important;
  border-color: var(--bx-ink);
}
.bx-btn--ink {
  background: var(--bx-ink);
  color: var(--bx-paper) !important;
}
.bx-btn--yellow {
  background: var(--bx-yellow);
  color: var(--bx-ink) !important;
}
.bx-btn--lg { padding: 16px 32px; font-size: 17px; }
.bx-btn--sm { padding: 8px 16px; font-size: 13px; }
.bx-btn--block { width: 100%; }

/* ═══════════════════════════════════════════════════
   Chips / badges
   ═══════════════════════════════════════════════════ */
.bx-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border: 2px solid var(--bx-ink);
  border-radius: 999px;
  background: var(--bx-paper);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--bx-sh-pop-sm);
}
.bx-chip--yellow { background: var(--bx-yellow); }
.bx-chip--orange { background: var(--bx-orange); color: var(--bx-paper); }
.bx-chip--leaf   { background: var(--bx-leaf);   color: var(--bx-paper); }
.bx-chip--berry  { background: var(--bx-berry);  color: var(--bx-paper); }

/* ═══════════════════════════════════════════════════
   Stickers
   ═══════════════════════════════════════════════════ */
.bx-sticker {
  display: inline-block;
  padding: 4px 16px;
  border: 2px solid var(--bx-ink);
  border-radius: 999px;
  font-family: 'Caveat', cursive;
  font-size: 18px;
  font-weight: 700;
  background: var(--bx-paper);
  box-shadow: var(--bx-sh-pop-sm);
  white-space: nowrap;
}
.bx-tilt-l   { transform: rotate(-4deg); }
.bx-tilt-ll  { transform: rotate(-7deg); }
.bx-tilt-r   { transform: rotate(3deg); }
.bx-tilt-rr  { transform: rotate(6deg); }

/* ═══════════════════════════════════════════════════
   Marquee
   ═══════════════════════════════════════════════════ */
.bx-marquee {
  background: var(--bx-ink);
  color: var(--bx-paper);
  padding: 14px 0;
  overflow: hidden;
  border-top: 2px solid var(--bx-ink);
  border-bottom: 2px solid var(--bx-ink);
}
.bx-marquee__track {
  display: flex;
  gap: 28px;
  width: max-content;
  animation: bxMarquee 28s linear infinite;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
}
.bx-marquee__track span { white-space: nowrap; }
@keyframes bxMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════════════
   Section grid helpers
   ═══════════════════════════════════════════════════ */
.bx-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.bx-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.bx-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.bx-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 22px; }
.bx-grid-auto-sm { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 16px; }

@media (max-width: 768px) {
  .bx-grid-2, .bx-grid-3, .bx-grid-4 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════
   Box illustration (CSS only, for hero)
   ═══════════════════════════════════════════════════ */
.bx-box-illustration {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  transform: rotate(-2deg);
}

.bx-box-unit {
  height: 64px;
  border: 2px solid var(--bx-ink);
  border-radius: 8px;
  box-shadow: 0 2px 0 var(--bx-ink);
  position: relative;
}
.bx-box-unit::after {
  content: '';
  position: absolute;
  top: 18px; left: 0; right: 0;
  height: 4px;
  background: var(--bx-ink);
  opacity: .5;
}

/* ═══════════════════════════════════════════════════
   Price card (hero)
   ═══════════════════════════════════════════════════ */
.bx-price-card {
  display: flex;
  background: var(--bx-paper);
  border: 2px solid var(--bx-ink);
  border-radius: 28px;
  box-shadow: var(--bx-sh-card-lg);
  overflow: hidden;
  max-width: 560px;
  margin-top: 28px;
}

.bx-price-card__left {
  background: var(--bx-orange);
  color: var(--bx-paper);
  padding: 22px 26px;
  border-right: 2px solid var(--bx-ink);
  min-width: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.bx-price-card__ribbon {
  position: absolute;
  top: -12px; left: -14px;
  background: var(--bx-berry);
  color: var(--bx-paper);
  font-family: 'Caveat', cursive;
  font-size: 20px;
  padding: 2px 14px;
  border: 2px solid var(--bx-ink);
  border-radius: 999px;
  transform: rotate(-9deg);
  box-shadow: 0 3px 0 var(--bx-ink);
  white-space: nowrap;
}

.bx-price-card__from {
  font-family: 'Caveat', cursive;
  font-size: 22px;
  line-height: 1;
  margin-top: 8px;
}

.bx-price-card__amount {
  font-family: 'Fredoka', sans-serif;
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
}

.bx-price-card__unit { font-size: 13px; opacity: .9; margin-top: 4px; }

.bx-price-card__right {
  padding: 18px 22px;
  flex: 1;
}

.bx-price-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  padding: 6px 0;
  color: var(--bx-ink-soft);
  border-bottom: 1px dashed rgba(42,24,16,.12);
}
.bx-price-row:last-child { border-bottom: none; }
.bx-price-row strong { color: var(--bx-ink); }

/* ═══════════════════════════════════════════════════
   Trust strip below hero
   ═══════════════════════════════════════════════════ */
.bx-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 32px;
  font-size: 14px;
  color: var(--bx-ink-soft);
}
.bx-trust-strip span { display: inline-flex; align-items: center; gap: 6px; }

/* ═══════════════════════════════════════════════════
   Service cards
   ═══════════════════════════════════════════════════ */
.bx-service-card {
  padding: 32px 22px 24px;
  position: relative;
}
.bx-service-number {
  position: absolute;
  top: -14px; left: 22px;
  padding: 3px 14px;
  border: 2px solid var(--bx-ink);
  border-radius: 999px;
  font-family: 'Caveat', cursive;
  font-size: 18px;
  background: var(--bx-orange);
  color: var(--bx-paper);
  box-shadow: 0 3px 0 var(--bx-ink);
  transform: rotate(-4deg);
}
.bx-service-icon {
  width: 68px; height: 68px;
  border-radius: 16px;
  border: 2px solid var(--bx-ink);
  box-shadow: 0 3px 0 var(--bx-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 34px;
  margin-bottom: 14px;
}
.bx-check-list {
  list-style: none;
  padding: 0; margin: 12px 0;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13.5px;
}
.bx-check-list li { display: flex; gap: 8px; align-items: flex-start; }
.bx-check-list li::before {
  content: '';
  width: 16px; height: 16px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8L7 12L13 4' fill='none' stroke='%23C4510A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  margin-top: 1px;
}

/* ═══════════════════════════════════════════════════
   Use Case scenario cards
   ═══════════════════════════════════════════════════ */
.bx-usecase-card {
  padding: 32px 24px 24px;
  position: relative;
  overflow: visible;
}
.bx-usecase-card__bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  border-radius: 18px 18px 0 0;
}
.bx-flow-list {
  background: var(--bx-cream);
  border: 1.5px solid var(--bx-ink);
  border-radius: 14px;
  overflow: hidden;
  margin: 14px 0;
}
.bx-flow-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
  border-bottom: 1px solid rgba(42,24,16,.1);
}
.bx-flow-item:last-child { border-bottom: none; }
.bx-flow-num {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--bx-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}
.bx-tip {
  background: rgba(255,122,26,.09);
  border-left: 3px solid var(--bx-orange);
  border-radius: 0 8px 8px 0;
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--bx-ink-soft);
}

/* ═══════════════════════════════════════════════════
   How to Use — timeline
   ═══════════════════════════════════════════════════ */
.bx-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 820px;
  margin: 0 auto;
}
.bx-timeline-item {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding-bottom: 32px;
  position: relative;
}
.bx-timeline-item::before {
  content: '';
  position: absolute;
  left: 25px;
  top: 52px;
  bottom: 0;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    var(--bx-ink) 0, var(--bx-ink) 6px,
    transparent 6px, transparent 14px
  );
  opacity: .15;
}
.bx-timeline-item:last-child::before { display: none; }
.bx-timeline-num {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 2px solid var(--bx-ink);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600; font-size: 20px;
  box-shadow: 0 3px 0 var(--bx-ink);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.bx-timeline-body {
  flex: 1;
  padding-top: 6px;
}
.bx-timeline-emoji {
  font-size: 32px;
  margin-bottom: 8px;
  display: block;
}

/* ═══════════════════════════════════════════════════
   FAQ accordion (native <details>)
   ═══════════════════════════════════════════════════ */
.bx-faq-item {
  background: var(--bx-paper);
  border: 2px solid var(--bx-ink);
  border-radius: 16px;
  box-shadow: 0 2px 0 var(--bx-ink);
  margin-bottom: 14px;
  overflow: hidden;
}
.bx-faq-item summary {
  padding: 18px 22px;
  font-family: 'Fredoka', sans-serif;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.bx-faq-item summary::-webkit-details-marker { display: none; }
.bx-faq-item summary::after {
  content: '+';
  font-size: 22px;
  font-weight: 600;
  color: var(--bx-orange);
  flex-shrink: 0;
  transition: transform .2s;
}
.bx-faq-item[open] summary::after {
  content: '−';
}
.bx-faq-item .bx-faq-answer {
  padding: 0 22px 18px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--bx-ink-soft);
}
.bx-faq-q-prefix {
  color: var(--bx-orange-deep);
  font-weight: 700;
  margin-right: 6px;
}

/* ═══════════════════════════════════════════════════
   Student perks (ink section overrides)
   ═══════════════════════════════════════════════════ */
.bx-perks-card {
  background: rgba(255,250,240,.06);
  border: 2px solid rgba(255,250,240,.5);
  border-radius: 24px;
  padding: 28px;
  color: var(--bx-paper);
}
.bx-perks-list {
  list-style: none;
  padding: 0; margin: 16px 0 0;
  display: flex; flex-direction: column; gap: 12px;
  font-size: 15px;
}
.bx-perks-list li { display: flex; gap: 10px; align-items: flex-start; }
.bx-perks-tick {
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--bx-yellow);
  color: var(--bx-ink);
  border: 2px solid var(--bx-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════
   Cities chip grid
   ═══════════════════════════════════════════════════ */
.bx-cities { display: flex; flex-wrap: wrap; gap: 10px; }

/* ═══════════════════════════════════════════════════
   Quote embed section
   ═══════════════════════════════════════════════════ */

/* Quote iframe embed ── fills the quote section nicely */
.bx-quote-embed {
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid var(--bx-ink);
  box-shadow: var(--bx-sh-card-lg);
  background: var(--bx-paper);
}
.bx-quote-embed iframe {
  width: 100%;
  min-height: 480px;
  border: none;
  display: block;
}

/* ═══════════════════════════════════════════════════
   Responsive adjustments
   ═══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .bx-hero-grid { grid-template-columns: 1fr !important; }
  .bx-hero-scene { display: none; }
  .bx-coverage-grid { grid-template-columns: 1fr !important; }
  .bx-student-grid  { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  .bx-display-xl { font-size: 36px; }
  .bx-display-lg { font-size: 28px; }
  .bx-section { padding: 44px 0; }
  .bx-price-card { flex-direction: column; }
  .bx-price-card__left { border-right: none; border-bottom: 2px solid var(--bx-ink); }
  .bx-timeline-item { gap: 14px; }
}