/* =============================================================
   Bali Customs Clearance — editor content on the dark theme
   Styles `.bcc-prose-dark`, the wrapper around the_content() in
   template-parts/page-content.php.

   Two jobs:
   1. Give the WP editor's plain HTML a full typographic scale.
   2. Repair the inline-styled blocks baked into older page content
      (card grids, answer boxes, CTA buttons, link grids) which were
      authored against a light theme and undefined CSS variables.
   ============================================================= */

/* ---------- Brand tokens referenced by inline styles in page content ----------
   These were used in the editor (background:var(--brand-navy-light) etc.) but
   never defined anywhere, so every block using them rendered transparent.
   Values map onto the theme's navy/champagne palette. */
:root {
  --brand-navy:         #0F2138;  /* panel surface — one step above the page */
  --brand-navy-light:   #162943;   /* card surface */
  --brand-navy-lighter: #19314F;
  --brand-cream:        #FAFAF8;
  --brand-gold:         #C8A951;
  --brand-gold-dark:    #B89441;
}

.bcc-prose-dark {
  color: rgba(250, 250, 248, 0.82);
  font-size: 1.0625rem;
  line-height: 1.85;
}

/* ---------- Headings ---------- */
.bcc-prose-dark h2 {
  margin: 3rem 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid rgba(200, 169, 81, 0.45);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
  color: #FFFFFF;
}
.bcc-prose-dark h3 {
  margin: 2.25rem 0 0.75rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.35;
  color: #FFFFFF;
}
.bcc-prose-dark h4 {
  margin: 1.75rem 0 0.6rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--brand-gold);
}
.bcc-prose-dark > *:first-child { margin-top: 0; }

/* ---------- Body copy ---------- */
.bcc-prose-dark p { margin: 0 0 1.25rem; }
.bcc-prose-dark strong { color: #FFFFFF; font-weight: 700; }
.bcc-prose-dark em { color: rgba(250, 250, 248, 0.92); }

.bcc-prose-dark a {
  color: var(--brand-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.18s ease;
}
.bcc-prose-dark a:hover { color: #E3C674; }

/* ---------- Lists ---------- */
.bcc-prose-dark ul,
.bcc-prose-dark ol {
  margin: 0 0 1.5rem;
  padding-left: 1.4rem;
}
.bcc-prose-dark ul { list-style: disc; }
.bcc-prose-dark ol { list-style: decimal; }
.bcc-prose-dark li {
  display: list-item;
  margin-bottom: 0.6rem;
  padding-left: 0.25rem;
}
.bcc-prose-dark li::marker { color: var(--brand-gold); }

/* ---------- Quotes & rules ---------- */
.bcc-prose-dark blockquote {
  margin: 1.75rem 0;
  padding: 1rem 1.5rem;
  border-left: 4px solid var(--brand-gold);
  border-radius: 0 10px 10px 0;
  background: rgba(200, 169, 81, 0.07);
  color: rgba(250, 250, 248, 0.9);
}
.bcc-prose-dark hr {
  margin: 2.5rem 0;
  border: 0;
  border-top: 1px solid rgba(200, 169, 81, 0.2);
}

/* ---------- Tables ---------- */
.bcc-prose-dark table {
  width: 100%;
  margin: 1.75rem 0 2rem;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: var(--brand-navy);
  border-radius: 12px;
  overflow: hidden;
  display: block;
  overflow-x: auto;      /* wide tables scroll instead of breaking the layout */
}
.bcc-prose-dark th,
.bcc-prose-dark td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(200, 169, 81, 0.14);
}
.bcc-prose-dark th {
  background: rgba(200, 169, 81, 0.12);
  color: var(--brand-gold);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.bcc-prose-dark tr:last-child td { border-bottom: 0; }

/* ---------- Images ---------- */
.bcc-prose-dark img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
}
.bcc-prose-dark figure { margin: 2rem 0; }
.bcc-prose-dark figure.db-content-image img {
  width: 100%;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(200, 169, 81, 0.15);
}
.bcc-prose-dark figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: rgba(250, 250, 248, 0.55);
  text-align: center;
}

/* =============================================================
   Repaired content blocks
   ============================================================= */

/* ---- Card grid ----
   Authored as `style="grid-template-columns:repeat(3,1fr);gap:24px"` with no
   display:grid, so the cards stacked. !important is required to beat the
   inline rule and make the track count responsive. */
.bcc-prose-dark div[style*="grid-template-columns"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)) !important;
  gap: 20px !important;
  margin: 2rem 0 2.5rem;
}
.bcc-prose-dark div[style*="grid-template-columns"] > div {
  border: 1px solid rgba(200, 169, 81, 0.18);
  border-radius: 16px !important;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.bcc-prose-dark div[style*="grid-template-columns"] > div:hover {
  border-color: rgba(200, 169, 81, 0.4);
  transform: translateY(-2px);
}
.bcc-prose-dark div[style*="grid-template-columns"] > div > h3 {
  margin-top: 0;
  font-size: 1.15rem;
}
.bcc-prose-dark div[style*="grid-template-columns"] > div > p:last-child {
  margin-bottom: 0;
  font-size: 0.95rem;
}

/* ---- Atomic answer callout (AI/featured-snippet paragraph) ---- */
.bcc-prose-dark .aeo-atomic-answer {
  position: relative;
  margin: 2rem 0 2.25rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(200, 169, 81, 0.28);
  border-left: 4px solid var(--brand-gold);
  border-radius: 0 14px 14px 0;
  background: rgba(200, 169, 81, 0.08);
  color: #FFFFFF;
  font-size: 1.02rem;
  line-height: 1.75;
}

/* ---- FAQ block ---- */
.bcc-prose-dark .aeo-faq {
  margin: 2.5rem 0;
  padding: 1.5rem 1.75rem 0.5rem;
  border: 1px solid rgba(200, 169, 81, 0.18);
  border-radius: 16px;
  background: var(--brand-navy);
}
.bcc-prose-dark .aeo-faq > h3 {
  margin-top: 0;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(200, 169, 81, 0.2);
}
.bcc-prose-dark .aeo-faq h4 {
  margin-top: 1.5rem;
  color: var(--brand-gold);
}
.bcc-prose-dark .aeo-faq h4 + p { margin-bottom: 1.25rem; }

/* ---- CTA buttons ----
   .db-cta-button carries inline gold styling (now that --brand-gold resolves);
   .bcc-cta-button ships bare and needs the full treatment. */
.bcc-prose-dark .db-cta-button,
.bcc-prose-dark .bcc-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 0.5rem;
  padding: 14px 30px;
  border-radius: 999px;
  background: var(--brand-gold);
  color: #091628;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(200, 169, 81, 0.22);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.bcc-prose-dark .db-cta-button:hover,
.bcc-prose-dark .bcc-cta-button:hover {
  background: var(--brand-gold-dark);
  color: #091628;
  transform: translateY(-1px);
}

/* Centred CTA panel wrapping .db-cta-button */
.bcc-prose-dark div[style*="text-align:center"] {
  border: 1px solid rgba(200, 169, 81, 0.18);
  border-radius: 16px !important;
}
.bcc-prose-dark div[style*="text-align:center"] > h2 {
  margin-top: 0;
  border-bottom: 0;
  padding-bottom: 0;
}

/* ---- Internal link grid ----
   Authored with light-theme inline colours (#0A1628 text on a 5% navy tint),
   which rendered dark-on-dark. Overridden here. */
.bcc-prose-dark .lbt-internal-links {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2px solid rgba(200, 169, 81, 0.3);
}
.bcc-prose-dark .lbt-internal-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bcc-prose-dark .lbt-internal-links li { margin: 0; }
.bcc-prose-dark .lbt-internal-links a {
  background: rgba(200, 169, 81, 0.07) !important;
  border-color: rgba(200, 169, 81, 0.28) !important;
  color: rgba(250, 250, 248, 0.9) !important;
  text-decoration: none;
}
.bcc-prose-dark .lbt-internal-links a:hover {
  background: rgba(200, 169, 81, 0.16) !important;
  border-color: rgba(200, 169, 81, 0.5) !important;
  color: var(--brand-gold) !important;
}

/* ---- Link-index pages (all-services) ---- */
.bcc-prose-dark .jhg-silo h2 {
  margin-top: 2.25rem;
  font-size: 1.35rem;
}
.bcc-prose-dark .jhg-silo ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px 24px;
  list-style: none;
  padding-left: 0;
}
.bcc-prose-dark .jhg-silo li { margin-bottom: 0.2rem; }
/* The silo markup ships its own `a { color: inherit }` — restore the site's gold. */
.bcc-prose-dark .jhg-silo a { color: var(--brand-gold); text-decoration: none; }
.bcc-prose-dark .jhg-silo a:hover { text-decoration: underline; }

/* ---- Salvage: any remaining light-theme inline colours ----
   Older content hard-codes near-black or mid-grey text that disappears on the
   navy background. Scoped to this wrapper so nothing else is affected. */
.bcc-prose-dark [style*="color:#0A1628"],
.bcc-prose-dark [style*="color:#0a1628"],
.bcc-prose-dark [style*="color: #333"],
.bcc-prose-dark [style*="color:#333"] {
  color: rgba(250, 250, 248, 0.88) !important;
}
.bcc-prose-dark [style*="color: #007bff"],
.bcc-prose-dark [style*="color: #0056b3"],
.bcc-prose-dark [style*="color: #4682b4"] {
  color: var(--brand-gold) !important;
}

/* ---------- Mobile ---------- */
@media (max-width: 767.98px) {
  .bcc-prose-dark { font-size: 1rem; line-height: 1.8; }
  .bcc-prose-dark h2 { font-size: 1.45rem; margin-top: 2.25rem; }
  .bcc-prose-dark h3 { font-size: 1.15rem; }
  .bcc-prose-dark .aeo-atomic-answer { padding: 1.1rem 1.15rem; }
  .bcc-prose-dark .aeo-faq { padding: 1.25rem 1.1rem 0.25rem; }
  .bcc-prose-dark div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  .bcc-prose-dark div[style*="text-align:center"] { padding: 32px 18px !important; }
}

/* =============================================================
   Hero spacing
   The theme ships a prebuilt Tailwind bundle with no md:pb-* or
   md:pt-* utilities, so the hero's vertical padding is set here.
   The bottom value keeps the headline clear of the trust bar that
   straddles the hero's lower edge on desktop.
   ============================================================= */
.bcc-hero-pad {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
@media (min-width: 768px) {
  .bcc-hero-pad {
    padding-top: 5rem;
    padding-bottom: 9rem;
  }
}

/* =============================================================
   Network a11y plugin compatibility
   wp-content/mu-plugins/juara-quality-fix-v1.php underlines in-text
   links and paints them #0a58ca. That colour is tuned for light
   backgrounds; on this navy (#091628) it measures 2.82:1 and fails
   the WCAG AA check the rule exists to satisfy. Handing the colour
   back to the theme restores compliance — the prose gold (#C8A951)
   is 7.99:1 and the footer's white/70 is 9.01:1.
   ============================================================= */
:root {
  --jqf-link-color: inherit;
}

/* Footer link columns are navigation, not prose: they follow the
   surrounding text colour and pick up the brand gold on hover.
   Specificity (0,0,3) beats the plugin's `li a` (0,0,2) on its own,
   so this holds regardless of stylesheet order. */
/* tailwind.min.css carries a base `b, i, li, strong { color: #fff }`, which
   stops list items inheriting their column's text-white/70 and makes footer
   links brighter than the copy around them. Put the chain back. */
footer li {
  color: inherit;
}
footer li a,
footer p a,
footer dd a,
footer td a {
  color: inherit;
  text-decoration: none;
}
footer li a:hover,
footer p a:hover,
footer dd a:hover,
footer td a:hover {
  color: var(--brand-gold);
}

/* =============================================================
   Blog index — section ornament and pagination
   ============================================================= */
.bcc-rule__line {
  display: block;
  width: 3rem;
  height: 1px;
  background: rgba(200, 169, 81, 0.45);
}

.bcc-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: rgba(250, 250, 248, 0.75);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}
.bcc-pagination a.page-numbers:hover {
  border-color: rgba(200, 169, 81, 0.6);
  color: #C8A951;
}
.bcc-pagination .page-numbers.current {
  background: #C8A951;
  border-color: #C8A951;
  color: #091628;
}
.bcc-pagination .page-numbers.dots {
  border-color: transparent;
  color: rgba(250, 250, 248, 0.4);
}

/* Blog hero scrim — the bundled gradient stops cannot go dark enough at the
   top, where the breadcrumb and eyebrow sit over the brightest part of the
   photograph. */
.bcc-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    #091628 0%,
    rgba(9, 22, 40, 0.82) 38%,
    rgba(9, 22, 40, 0.68) 100%
  );
}

/* Story and topic cards are UI, not prose.
   - juara-quality-fix-v1.php underlines every `article a`, which would
     underline each card title and read-link.
   - tailwind.min.css sets `b, i, li, strong { color:#fff }`, so an icon never
     inherits the gold from the element that wraps it. */
.bcc-story-card a,
.bcc-topic-card a {
  text-decoration: none;
}
/* tailwind.min.css carries bare `span { color:#fff }` and
   `b, i, li, strong { color:#fff }` rules, which break the colour chain inside
   these components. Restore inheritance; use .bcc-muted for a deliberate
   softer tint (an attribute match on "text-" would also catch text-2xl). */
.bcc-story-card i,
.bcc-story-card span,
.bcc-story-card li,
.bcc-topic-card i,
.bcc-topic-card span,
.bcc-topic-card li,
.bcc-meta i,
.bcc-meta span,
.bcc-meta li {
  color: inherit;
}
.bcc-story-card .bcc-muted,
.bcc-topic-card .bcc-muted,
.bcc-meta .bcc-muted {
  color: rgba(250, 250, 248, 0.5);
}