/*
Theme Name: UAE Gratuity Calculator
Theme URI: https://uaelabournews.com
Author: UAE Labour News
Author URI: https://uaelabournews.com
Description: Premium Gratuity Calculator UAE – Federal Decree-Law No. 33 of 2021. Light professional design, bilingual EN/HI, PDF export, fully responsive.
Version: 3.8.2
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: uae-gratuity
Tags: calculator, gratuity, uae, labour, seo
*/

:root {
  --navy: #0B1C2E;
  --navy-mid: #132F4C;
  --gold: #B8860B;
  --gold-bright: #D4A017;
  --gold-soft: #FBF3E0;
  --teal: #0F766E;
  --teal-soft: #E6F7F5;
  --white: #FFFFFF;
  --bg: #F7F9FC;
  --bg-card: #FFFFFF;
  --border: #E2E8F0;
  --text: #1E293B;
  --text-muted: #64748B;
  --text-light: #94A3B8;
  --success: #059669;
  --danger: #DC2626;
  --shadow-sm: 0 1px 3px rgba(11,28,46,0.06);
  --shadow: 0 4px 16px rgba(11,28,46,0.08);
  --shadow-lg: 0 12px 32px rgba(11,28,46,0.1);
  --radius: 12px;
  --radius-lg: 16px;
  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --header-h: 84px;
  --header-h-scrolled: 48px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px); /* keeps anchor targets
    (FAQ, disclaimer, trust, etc.) from landing hidden behind the sticky
    header when jumped to via #anchor links */
}
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--navy); }
button, input, select { font-family: inherit; }
ul, ol { list-style: none; }

h1,h2,h3,h4 { font-weight: 700; line-height: 1.25; color: var(--navy); }
h1 { font-size: clamp(1.6rem, 3.5vw, 2.25rem); }
h2 { font-size: clamp(1.3rem, 2.8vw, 1.7rem); }
h3 { font-size: clamp(1.05rem, 2vw, 1.2rem); }

.container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; }
.section { padding: 3rem 0; }
.text-center { text-align: center; }
.hidden { display: none !important; }

/* ========== HEADER ==========
   One consolidated block (desktop → tablet → mobile). Pattern: logo pinned
   left, nav TRUE-CENTERED via a CSS Grid middle column (auto 1fr auto),
   lang switcher + hamburger pinned right. Grid-column centering is more
   robust than margin-left:auto — the nav centers within its own column
   regardless of how wide the logo or actions blocks are, so it can never
   look off-centre no matter what content sits on either side. */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--header-h);
  transition: box-shadow 0.25s ease, height 0.25s ease;
}
.site-header.scrolled {
  height: var(--header-h-scrolled);
  box-shadow: 0 2px 14px rgba(11,28,46,0.08);
}
.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto; /* logo | nav (truly centered in the
    remaining space) | actions — the standard, most robust professional
    header pattern; unlike margin-left:auto, the nav is centered in ITS
    OWN column regardless of how wide the logo or actions blocks are */
  align-items: center;
  column-gap: 0.9rem;
  min-height: var(--header-h); /* explicit reference height, not a % chain —
    a % height here would need .container to have a definite height too,
    which it doesn't, so it would silently collapse to auto and top-align
    everything instead of centering it (this was the actual bug) */
  transition: min-height 0.25s ease;
}
.site-header.scrolled .header-inner { min-height: var(--header-h-scrolled); }

/* -- Brand / logo (always left, never shrinks away) -- */
.site-branding {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--navy);
  min-width: 0;
}
.site-branding img.logo-mark {
  display: block;
  height: 54px;
  width: 54px;
  flex-shrink: 0;
  object-fit: contain;
  transition: height 0.25s ease, width 0.25s ease;
}
.site-header.scrolled .site-branding img.logo-mark { height: 26px; width: 26px; }
.logo-text { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.logo-text .brand {
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.2;
  color: var(--navy);
  white-space: nowrap;
  transition: font-size 0.2s ease;
}
.logo-text .tagline {
  display: block;
  font-size: 0.66rem;
  line-height: 1.3;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  max-height: 16px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.22s ease, opacity 0.18s ease, margin-top 0.22s ease;
}
.site-header.scrolled .logo-text .brand { font-size: 0.82rem; }
.site-header.scrolled .logo-text .tagline { max-height: 0; opacity: 0; }

/* -- Nav: true grid-column centering, not a margin-auto approximation -- */
.main-nav {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 0.1rem;
}
.main-nav a {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.4rem 0.65rem;
  border-radius: 6px;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}
.main-nav a:hover, .main-nav a.active { color: var(--navy); background: var(--bg); }

/* -- Lang switcher + hamburger: always at the far right -- */
.header-actions { grid-column: 3; display: flex; align-items: center; gap: 0.5rem; }
.lang-switcher {
  position: relative;
  display: flex;
  background: var(--bg);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
  flex-shrink: 0;
  padding: 2px;
}
.lang-switcher::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(50% - 2px);
  height: calc(100% - 4px);
  background: linear-gradient(135deg, var(--gold-bright, #D4A017), var(--gold));
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(184,134,11,0.4);
  transition: transform 0.25s cubic-bezier(.4,0,.2,1);
  z-index: 0;
}
.lang-switcher[data-active="hi"]::before {
  transform: translateX(100%);
}
.lang-btn {
  position: relative;
  z-index: 1;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--text-muted);
  padding: 0.3rem 0.65rem;
  min-width: 36px;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: color 0.2s ease;
}
.lang-btn.active { color: var(--navy); }
.mobile-toggle {
  display: none;
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--navy);
  cursor: pointer;
  padding: 0.3rem;
  line-height: 0;
}

/* -- Tablet: tighten before things get cramped, well before the hamburger
      breakpoint kicks in, so nothing ever wraps or overlaps -- */
@media (max-width: 1024px) and (min-width: 901px) {
  .main-nav { gap: 0; }
  .main-nav a { font-size: 0.8rem; padding: 0.4rem 0.5rem; }
}
@media (max-width: 900px) and (min-width: 769px) {
  .logo-text .tagline { display: none; }
  .main-nav a { font-size: 0.78rem; padding: 0.4rem 0.45rem; }
}

/* -- Mobile: collapse nav into a hamburger dropdown -- */
@media (max-width: 768px) {
  :root { --header-h: 60px; --header-h-scrolled: 46px; }
  .logo-text .tagline { display: none; }
  .site-branding img.logo-mark { height: 32px; width: 32px; }
  .site-header.scrolled .site-branding img.logo-mark { height: 24px; width: 24px; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    margin-left: 0;
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.75rem;
    box-shadow: var(--shadow-lg);
    border-bottom: 1px solid var(--border);
  }
  .main-nav.open { display: flex; }
  .main-nav a { width: 100%; padding: 0.7rem 1rem; }
  .mobile-toggle { display: block; }
}

/* ========== HERO – light premium ========== */
.hero {
  background: linear-gradient(180deg, #FFFFFF 0%, #F0F4F8 50%, var(--bg) 100%);
  padding: 2rem 0 2.5rem;
  position: relative;
}
.hero-content {
  text-align: center;
  margin-bottom: 1.75rem;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--gold-soft);
  border: 1px solid rgba(184,134,11,0.25);
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.8rem;
  border-radius: 50px;
  margin-bottom: 0.85rem;
}
.hero h1 { color: var(--navy); margin-bottom: 0.5rem; }
.hero h1 span { color: var(--gold); }
.hero .lead {
  color: var(--text-muted);
  max-width: 540px;
  margin: 0 auto;
  font-size: 0.95rem;
}

/* ========== CALCULATOR CARD ========== */
.calculator-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  max-width: 920px;
  margin: 0 auto;
}
.calc-header {
  background: var(--navy);
  color: var(--white);
  padding: 0.9rem 1.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}
.calc-header h2 {
  color: var(--white);
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
}
.calc-header .badge {
  background: var(--gold-bright);
  color: var(--navy);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.18rem 0.55rem;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.calc-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.calc-inputs {
  padding: 1.5rem;
  border-right: 1px solid var(--border);
  min-width: 0; /* stop the breakdown table's forced min-width from
    inflating this grid track past the viewport — see .result-panel */
}
.result-panel {
  padding: 1.5rem;
  background: #FAFBFC;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  /* Without this, a CSS Grid item's "automatic minimum size" is based on
     its content's intrinsic width — and the breakdown table further down
     forces itself to min-width:520px so its 5 columns stay legible. On a
     ~375px phone that 520px demand was bubbling up through this grid item,
     forcing both columns to ~562px wide. .calculator-card clips overflow
     (overflow:hidden, no scrollbar), so the right ~35% of the form and
     results was silently invisible and unreachable — this was the "input
     and output area going out of view" bug. min-width:0 stops the table's
     size from propagating past its own .table-wrap (which already scrolls
     horizontally on its own), so this column instead correctly shrinks to
     the actual viewport width at every breakpoint. */
  min-width: 0;
}

/* Form */
.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.35rem;
}
.form-group label .optional {
  font-weight: 400;
  color: var(--text-light);
  font-size: 0.75rem;
}
.input-wrap { position: relative; }
.input-wrap .prefix {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-light);
  font-weight: 600;
  font-size: 0.9rem;
  pointer-events: none;
}
.form-control {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  color: var(--navy);
  background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
}
.form-control:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(15,118,110,0.12);
}
.form-control.has-prefix { padding-left: 3rem; }
.form-hint {
  font-size: 0.72rem;
  color: var(--text-light);
  margin-top: 0.25rem;
}
.btn-calculate {
  width: 100%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
  color: var(--navy);
  border: none;
  padding: 0.9rem 1.25rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  box-shadow: 0 3px 12px rgba(184,134,11,0.3);
  margin-top: 0.35rem;
}
.btn-calculate:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(184,134,11,0.4);
}
.btn-reset {
  width: 100%;
  background: transparent;
  color: var(--text-muted);
  border: 1.5px solid var(--border);
  padding: 0.6rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 0.6rem;
  transition: all 0.2s;
}
.btn-reset:hover {
  border-color: var(--text-light);
  background: var(--bg);
}

/* Result */
.result-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-light);
  padding: 1.5rem 1rem;
}
.result-empty svg { width: 56px; height: 56px; margin-bottom: 0.85rem; opacity: 0.45; }
.result-empty p { font-size: 0.9rem; max-width: 200px; }

.result-content { display: none; }
.result-content.active { display: block; }

.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
  justify-content: center;
}
.btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: var(--white);
  border: 1.5px solid var(--border);
  color: var(--text);
  padding: 0.45rem 0.7rem;
  border-radius: 7px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.1s;
}
/* Every action button (PDF / Print / Share / Copy) shares this exact
   resting style — no button should look permanently "pressed" or singled
   out. The only visual differences between buttons happen on genuine
   interaction: hover, keyboard focus, the active click-down moment, and
   the brief is-busy loading state while a PDF is being generated. */
.btn-action:hover {
  border-color: var(--gold);
  color: var(--navy);
  background: var(--gold-soft);
  box-shadow: 0 2px 10px rgba(184,134,11,0.18);
}
.btn-action:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.btn-action:active {
  transform: scale(0.96);
  background: var(--gold-soft);
  border-color: var(--gold);
}
.btn-action.is-busy {
  color: transparent;
  pointer-events: none;
  position: relative;
}
.btn-action.is-busy::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  top: 50%;
  left: 50%;
  margin: -7px 0 0 -7px;
  border: 2px solid rgba(11,28,46,0.25);
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: btnSpin 0.7s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

.breakdown-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  margin-bottom: 0.85rem;
}
.breakdown-table th,
.breakdown-table td {
  padding: 0.5rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.breakdown-table th {
  font-weight: 600;
  color: var(--text-muted);
  background: var(--white);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.breakdown-table td { color: var(--text); }
.breakdown-table tr:last-child td {
  border-bottom: none;
  font-weight: 700;
  color: var(--navy);
}
.breakdown-table .amount { text-align: right; font-variant-numeric: tabular-nums; }
/* Sticky mobile bar */
.mobile-sticky-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--navy);
  color: var(--white);
  padding: 0.7rem 1rem;
  z-index: 999;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.mobile-sticky-bar .amount { font-weight: 700; font-size: 1.05rem; }
.mobile-sticky-bar .sticky-label { font-size: 0.65rem; opacity: 0.7; }
.mobile-sticky-bar .btn-mini {
  background: var(--gold-bright);
  color: var(--navy);
  border: none;
  padding: 0.45rem 0.9rem;
  border-radius: 7px;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}

/* ========== CONTENT SECTIONS ========== */
.how-it-works { background: var(--white); }
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-top: 1.75rem;
}
.step-card {
  background: var(--bg);
  border-radius: var(--radius);
  padding: 1.35rem;
  border: 1px solid var(--border);
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.step-card:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-sm);
}
.step-num {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--gold), var(--gold-bright));
  color: var(--navy);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.9rem;
  margin: 0 auto 0.75rem;
}
.step-card h3 { margin-bottom: 0.4rem; font-size: 1rem; }
.step-card p { font-size: 0.85rem; color: var(--text-muted); }

.faq-section { background: var(--bg); }

/* ========== TRUST / TRUST-SIGNALS SECTION ==========
   Re-themed to match the site's signature navy+gold accent (the same
   treatment used by .step-num and the hero badge) instead of the
   previous stand-alone teal, so this section reads as part of the same
   design system as "How it Works" rather than a visually separate block. */
.trust-section { background: var(--bg); }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.trust-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--gold);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.trust-card:hover { border-color: var(--gold-bright); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.trust-icon {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-bright));
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.trust-card h3 { font-size: 1.02rem; margin-bottom: 0.5rem; color: var(--navy); }
.trust-card p { font-size: 0.87rem; color: var(--text-muted); line-height: 1.6; }

.faq-list { max-width: 720px; margin: 1.75rem auto 0; }
.faq-item {
  background: var(--white);
  border-radius: var(--radius);
  margin-bottom: 0.6rem;
  border: 1px solid var(--border);
  overflow: hidden;
}
.faq-question {
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  padding: 1rem 1.2rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  transition: background 0.2s;
}
.faq-question:hover { background: var(--bg); }
.faq-question .icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  transition: all 0.2s;
}
.faq-item.open .faq-question .icon {
  background: var(--teal);
  color: var(--white);
  transform: rotate(45deg);
}
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-answer-inner {
  padding: 0 1.2rem 1.1rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.65;
}

.disclaimer-box {
  background: #FFFBEB;
  border: 1px solid #F59E0B;
  border-radius: var(--radius);
  padding: 1.1rem 1.35rem;
  font-size: 0.85rem;
  color: #92400E;
  line-height: 1.55;
  margin-top: 1.75rem;
}
.disclaimer-box strong { color: #78350F; }

/* ========== FOOTER (light – matches theme) ========== */
.site-footer {
  background: var(--white);
  color: var(--text-muted);
  padding: 2.25rem 0 1.35rem;
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1.75rem;
  margin-bottom: 1.75rem;
}
.footer-brand .brand {
  color: var(--navy);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}
.footer-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  margin-bottom: 0.6rem;
}
.footer-logo { width: 34px; height: 34px; flex-shrink: 0; }
.footer-logo-link .brand { margin-bottom: 0; }
.footer-brand p { font-size: 0.8rem; line-height: 1.5; max-width: 300px; color: var(--text-muted); }
.footer-links h4 {
  color: var(--gold);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.7rem;
}
.footer-links a {
  display: block;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}
.footer-links a:hover { color: var(--navy); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-light);
}

/* ========== PRINT ========== */
/* ========== PRINT — only the calculator inputs + calculation, nothing
   else from the site, plus a small branded header and a "come back to
   the site" line so the printout is self-explanatory on paper. ========== */
.print-only-header, .print-only-footer { display: none; }
@media print {
  .site-header, .mobile-sticky-bar, .hero-content, .hero-badge,
  .lang-switcher, .mobile-toggle, .main-nav,
  .how-it-works, .trust-section, .faq-section, .disclaimer-box,
  .ai-answer-section,
  #about, .site-footer,
  .calc-header .badge,
  .btn-calculate, .btn-reset, .result-actions,
  .result-empty { display: none !important; }

  .print-only-header {
    display: block !important;
    padding-bottom: 0.6rem;
    margin-bottom: 0.75rem;
    border-bottom: 2px solid #0B1C2E;
    font-size: 11px;
    color: #334155;
  }
  .print-only-header strong { display: block; font-size: 14px; color: #0B1C2E; margin-bottom: 2px; }
  .print-only-footer {
    display: block !important;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #cbd5e1;
    font-size: 11px;
    color: #475569;
    text-align: center;
  }

  /* Inputs stay visible in print — this is the whole point of the print
     view: the exact figures entered, plus the calculation, on paper.
     (An earlier revision accidentally hid .calc-inputs here via a second,
     later @media print block that silently overrode this one — merged
     into this single block so that regression can't happen again.) */
  .hero { background: none; padding: 0; }
  .calculator-card { box-shadow: none; border: 1px solid #ccc; }
  .calc-body { grid-template-columns: 1fr; }
  .calc-inputs { border-right: none; border-bottom: 1px solid #ccc; }
  .result-panel { background: #fff !important; padding: 1.25rem 0 0; }
  .result-content { display: block !important; }
  .result-hero { border: none; }
  .out-section, .inputs-bases, .bases-grid { page-break-inside: avoid; break-inside: avoid; }
  .form-control { border: 1px solid #999; }
  body { background: white; }

  /* The tabbed details section: show every panel stacked on paper (a tab
     bar is meaningless once printed) rather than only whichever one the
     visitor last had open on screen. The table is used for the breakdown
     (not the mobile card layout), since paper always has room for it. */
  .view-details-link { display: none !important; }
  .result-details { display: block !important; border-top: none; background: #fff; padding: 0; }
  .details-tabs { display: none !important; }
  .tab-panel { display: block !important; page-break-inside: avoid; break-inside: avoid; margin-bottom: 1rem; }
  .table-wrap { display: block !important; overflow: visible !important; }
  .breakdown-cards { display: none !important; }
  .breakdown-table { min-width: 0 !important; font-size: 11px !important; }

  /* Full & Final Settlement statement: force the navy/gold section bars
     to actually print (browsers strip background colours by default
     unless told otherwise) and keep it from breaking awkwardly mid-row
     across a page boundary. The compact "hero" number above it is
     redundant on paper — Net Payable is already the ledger's own final
     row — so it's hidden here specifically (only for this tool's
     `.result-hero-compact` class; the standalone Gratuity Calculator's
     plain `.result-hero` print behaviour is untouched). */
  .statement-doc, .statement-doc * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  .result-hero-compact { display: none !important; }
  .statement-doc { border-color: #0B1C2E !important; page-break-inside: auto; }
  .statement-table tr { page-break-inside: avoid; }
  .statement-confirm, .statement-sign-primary, .statement-signoff { page-break-inside: avoid; }
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .hero { padding: 1.35rem 0 1.75rem; }
  .hero h1 { font-size: 1.45rem; }
  .hero .lead { font-size: 0.9rem; }

  .calc-body {
    grid-template-columns: 1fr;
  }
  .calc-inputs {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 1.25rem;
  }
  .result-panel {
    padding: 1.25rem;
    min-height: auto;
  }
  .result-details { padding: 1.25rem; }
  .details-tabs { gap: 0.15rem; }
  .tab-btn { padding: 0.5rem 0.65rem; font-size: 0.78rem; }
  .form-control { font-size: 16px; } /* no iOS zoom */
  .result-actions { gap: 0.35rem; }
  .bases-grid { font-size: 0.9rem; }
  .base-row { padding: 0.5rem 0.7rem; flex-wrap: wrap; }
  .btn-action {
    flex: 1 1 calc(50% - 0.35rem);
    justify-content: center;
    font-size: 0.72rem;
    padding: 0.5rem 0.4rem;
  }
  .breakdown-table { font-size: 0.75rem; }
  .breakdown-table th, .breakdown-table td { padding: 0.4rem 0.35rem; }
  .deriv-step { font-size: 0.75rem; padding: 0.45rem 0.7rem; }
  .sb-donut-wrap { gap: 1rem; }
  .steps-grid { grid-template-columns: 1fr; gap: 0.9rem; }
  .section { padding: 2.25rem 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .mobile-sticky-bar.show { display: flex; }
  /* Reserves space so the fixed sticky bar can never overlap page content
     (e.g. the Reset button, right below the form) — set dynamically in
     JS to the bar's real measured height, since its height varies with
     translation string length (Hindi wraps differently), font scaling
     and device width. A safe static fallback is kept for the instant
     before JS measures it. */
  body.has-sticky-result { padding-bottom: calc(var(--sticky-bar-h, 84px) + 10px); }
}

@media (max-width: 400px) {
  .btn-action { flex: 1 1 100%; }
  .container { padding: 0 0.9rem; }
  .result-amount .value { font-size: 1.5rem; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .calc-inputs, .result-panel { padding: 1.25rem; }
}

/* ========== FINAL OUTPUT ARCHITECTURE ========== */
.result-hero {
  text-align: center;
  padding: 1.25rem 1rem 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.85rem;
}
.result-hero-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.result-hero-amount {
  font-size: clamp(1.85rem, 5vw, 2.35rem);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.result-hero-amount .currency {
  font-size: 0.45em;
  font-weight: 600;
  color: var(--gold);
  vertical-align: super;
  margin-right: 0.15rem;
}
.result-hero-service {
  margin-top: 0.45rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.out-section {
  margin-bottom: 1.1rem;
}
/* .out-section-title is defined once, further down, with the gold accent
   bar treatment — see "Output section titles" below. (A plain duplicate
   used to live here, fully shadowed by that later rule; removed.) */

.bases-grid {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.base-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.84rem;
}
.base-row:last-child { border-bottom: none; }
.base-label { color: var(--text-muted); font-weight: 500; flex-shrink: 0; }
.base-val { color: var(--navy); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.period-main { font-weight: 600; color: var(--navy); }
.period-dates { font-size: 0.72rem; color: var(--text-light); margin-top: 0.15rem; }
.breakdown-table .num { text-align: center; font-variant-numeric: tabular-nums; }
.breakdown-table .row-sub td { background: var(--bg); font-weight: 600; }
.breakdown-table .row-cap td { color: var(--danger); font-weight: 600; }
.breakdown-table .row-total td {
  border-top: 2px solid var(--navy);
  background: var(--gold-soft);
  font-weight: 800;
  color: var(--navy);
}

.derivation-list {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.35rem 0;
}
.deriv-step {
  padding: 0.5rem 0.9rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  line-height: 1.5;
}
.deriv-step:last-child { border-bottom: none; }

.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
  justify-content: center;
}

@media (max-width: 640px) {
  .base-row { flex-direction: column; gap: 0.15rem; }
  .base-val { text-align: left; }
  .result-actions .btn-action { flex: 1 1 calc(50% - 0.4rem); justify-content: center; }
  .breakdown-table { font-size: 0.72rem; }
}

/* ========== AI / AUTHORITY SECTIONS ========== */
.ai-answer-section {
  background: var(--white);
  padding: 2.5rem 0 1.5rem;
  border-top: 1px solid var(--border);
}
.ai-answer-section h2 {
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  margin-bottom: 0.75rem;
}
.ai-answer-lead {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 1rem;
}
.ai-answer-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.ai-answer-meta a {
  font-weight: 600;
  color: var(--teal);
}

.method-block {
  background: var(--navy);
  color: #E2E8F0;
  border-radius: 12px;
  padding: 1.15rem 1.25rem;
  overflow-x: auto;
  font-size: 0.78rem;
  line-height: 1.55;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  margin-bottom: 0.85rem;
  border: 1px solid rgba(255,255,255,0.08);
}
.method-block code {
  white-space: pre;
  color: inherit;
  font-family: inherit;
}

/* ========== SERVICE BREAKDOWN — compact donut chart ========== */
.service-breakdown {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.15rem;
}
.sb-donut-wrap {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.sb-donut {
  flex-shrink: 0;
  width: 128px;
  height: 128px;
}
.donut-svg { width: 100%; height: 100%; }
.donut-svg circle { transition: stroke-dasharray 0.5s ease; }
.donut-center-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  fill: var(--text-muted);
}
.donut-center-value {
  font-size: 15px;
  font-weight: 800;
  fill: var(--navy);
}
.sb-legend {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.sb-legend-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}
.sb-swatch {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  margin-top: 0.2rem;
}
.sb-swatch-first { background: linear-gradient(135deg, #D4A017, #B8860B); }
.sb-swatch-rest { background: linear-gradient(135deg, #14B8A6, #0F766E); }
.sb-legend-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.sb-legend-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--navy);
}
.sb-legend-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}
.sb-legend-amt {
  flex-shrink: 0;
  text-align: right;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
.sb-note {
  margin: 0.9rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.5;
  text-align: center;
}
.round-footer {
  font-size: 0.72rem;
  color: var(--text-light);
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
  line-height: 1.45;
  text-align: center;
}
@media (max-width: 420px) {
  .sb-donut-wrap { flex-direction: column; align-items: stretch; text-align: center; }
  .sb-donut { align-self: center; }
  .sb-legend-row { text-align: left; }
}
.sb-total {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: linear-gradient(135deg, #0B1C2E 0%, #132a42 100%);
  border-radius: 10px;
  color: #fff;
}
.sb-total-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  margin-bottom: 0.35rem;
  opacity: 0.9;
}
.sb-total-row.muted { opacity: 0.7; }
.sb-total-final {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: 0.35rem;
}
.sb-total-final span {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.9;
}
.sb-total-final strong {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--gold-bright, #F0C75E);
  font-variant-numeric: tabular-nums;
}
.sb-total.is-capped .sb-total-final strong {
  color: #F0C75E;
}

/* Derivation steps — professional numbered list */
.deriv-step {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.55rem 0.9rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  line-height: 1.5;
}
.deriv-step:last-child { border-bottom: none; }
.deriv-n {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--navy);
  margin-top: 1px;
}
.deriv-text { flex: 1; word-break: break-word; }

/* Authority content sections — premium alignment */
.ai-answer-section {
  background: linear-gradient(180deg, #fff 0%, var(--bg) 100%);
}
.ai-answer-section .container {
  max-width: 720px;
}
.ai-answer-lead {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text);
}
.ai-answer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  padding: 0.75rem 1rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  border-left: 3px solid var(--gold);
}
.method-block {
  box-shadow: 0 8px 24px rgba(11, 28, 46, 0.12);
}
.how-it-works .step-card,
.trust-section .trust-card {
  height: 100%;
}
.how-it-works .text-center h2,
.trust-section .text-center h2,
.ai-answer-section h2 {
  letter-spacing: -0.01em;
}

/* Methodology + AI-answer summary: present in DOM for AI/crawlers to read
   and quote, not shown to human visitors — the same law/formula is already
   explained visually (and with full working) in the "How it Works" step
   cards and the results panel below, so showing this prose block too was
   pure duplication. */
.methodology-ai-only,
.ai-answer-section {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Floating card effect — How it Works + Trust */
.how-it-works .step-card,
.trust-section .trust-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  will-change: transform;
}
.how-it-works .step-card:hover,
.trust-section .trust-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(11, 28, 46, 0.12);
}
.how-it-works {
  background: var(--white);
}
.trust-section {
  background: linear-gradient(180deg, #F0F7F6 0%, var(--bg) 100%);
}
.trust-section .trust-card {
  border-top-color: var(--teal, #0F766E);
}
.trust-section .trust-icon {
  background: linear-gradient(135deg, var(--teal, #0F766E), #14B8A6);
  color: #fff;
}

/* Output section titles — international, clean */
.out-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 0.65rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.out-section-title::before {
  content: '';
  width: 3px;
  height: 0.85em;
  background: linear-gradient(180deg, var(--gold), var(--gold-bright, #D4A017));
  border-radius: 2px;
  flex-shrink: 0;
}

/* Result panel spacing on all breakpoints */
.result-content .out-section {
  margin-bottom: 1.15rem;
}
.result-hero {
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .result-hero-amount {
    font-size: 1.75rem;
  }
  .result-actions {
    gap: 0.35rem;
  }
  .result-actions .btn-action {
    flex: 1 1 calc(50% - 0.35rem);
    min-width: 0;
    font-size: 0.78rem;
    padding: 0.55rem 0.5rem;
  }
  .breakdown-table {
    font-size: 0.72rem;
  }
  .breakdown-table th,
  .breakdown-table td {
    padding: 0.4rem 0.3rem;
  }
  .period-dates {
    font-size: 0.68rem;
  }
  .sb-donut-wrap {
    gap: 0.85rem;
  }
  .deriv-step {
    padding: 0.45rem 0.7rem;
    font-size: 0.75rem;
  }
}

@media (max-width: 400px) {
  .result-actions .btn-action {
    flex: 1 1 100%;
  }
  .breakdown-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .result-hero-amount {
    font-size: 2rem;
  }
  .sb-donut-wrap {
    gap: 1.1rem;
  }
}


/* ========== OUTPUT THEME COLOURS (v3.7) ========== */
.breakdown-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  font-size: 0.82rem;
}
.breakdown-table thead th {
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.65rem 0.55rem;
  border: none;
}
.breakdown-table td {
  padding: 0.55rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.breakdown-table tbody tr:hover td {
  background: rgba(184, 134, 11, 0.06);
}
.breakdown-table .period-main { color: var(--navy); font-weight: 700; }
.breakdown-table .period-dates { color: var(--text-muted); }
.breakdown-table .amount { font-weight: 700; color: var(--navy); }
.breakdown-table .row-sub td {
  background: #F8FAFC;
  font-weight: 600;
  color: var(--text);
}
.breakdown-table .row-cap td {
  background: #FEF3C7;
  color: #92400E;
  font-weight: 600;
}
.breakdown-table .row-total td {
  background: linear-gradient(90deg, #0B1C2E, #132a42);
  color: #fff !important;
  border-top: none;
  font-weight: 800;
}
.breakdown-table .row-total .amount,
.breakdown-table .row-total strong {
  color: #F0C75E !important;
}

.service-breakdown {
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(11, 28, 46, 0.06);
}
.sb-legend-row:hover .sb-swatch {
  filter: brightness(1.1);
}
.derivation-list {
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(11, 28, 46, 0.04);
}
.deriv-n {
  background: linear-gradient(135deg, var(--gold), var(--gold-bright, #D4A017));
  border: none;
  color: var(--navy);
}

/* Table: ensure 5 columns fit; Amount never clipped */
.table-wrap {
  overflow-x: auto !important;
  width: 100%;
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
}
.breakdown-table {
  width: 100% !important;
  min-width: 520px !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
  font-size: 0.78rem !important;
  margin: 0 !important;
  border: none !important;
}
.breakdown-table thead th {
  background: var(--navy) !important;
  color: #fff !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.55rem 0.45rem !important;
  white-space: nowrap !important;
  border: none !important;
  vertical-align: middle;
}
.breakdown-table thead th.col-amt,
.breakdown-table thead th:last-child {
  text-align: right !important;
  min-width: 5.5rem !important;
  padding-right: 0.65rem !important;
}
.breakdown-table td {
  padding: 0.5rem 0.45rem !important;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.breakdown-table td.amount,
.breakdown-table td:last-child {
  text-align: right !important;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap !important;
  min-width: 5.5rem;
  padding-right: 0.65rem !important;
}
.breakdown-table td.num {
  text-align: center !important;
  white-space: nowrap;
}

/* ========== OUTPUT SECTION — REDESIGNED ==========
   Rethought from the ground up around what a visitor actually needs, in
   the order they need it:
     1. The number (result-hero) — as large and unambiguous as possible.
     2. A few glanceable supporting facts (quick-stats chips) — no digging.
     3. Actions to save/verify it (PDF, print, share, copy).
     4. Everything else (recap, table, chart, step-by-step), presented as
        tabs in a FULL-WIDTH section below the two-column form/result row
        — not squeezed into a narrow column, so a 5-column table or a
        donut chart both get real room, on every screen size. */

/* --- Compact hero column (inside the 2-col grid) --- */
.quick-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 1.1rem;
}
.stat-chip {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
  flex: 1 1 auto;
  min-width: 108px;
}
.stat-chip .chip-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: 700;
}
.stat-chip .chip-value {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy);
}
.stat-chip.chip-ok { justify-content: center; }
.stat-chip.chip-ok .chip-value { color: var(--teal); font-size: 0.82rem; }
.stat-chip.chip-warn { background: #FEF3C7; border-color: #F5D68A; justify-content: center; }
.stat-chip.chip-warn .chip-value { color: #92400E; font-size: 0.82rem; }

.view-details-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  background: none;
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 0.6rem;
  margin-top: 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--teal);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.view-details-link:hover { background: var(--teal-soft); border-color: var(--teal); }
.round-footer-compact {
  margin-top: 0.9rem;
  font-size: 0.72rem;
}

/* --- Full-width details section --- */
.result-details {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding: 1.5rem;
}
.result-details.active { display: block; }

.details-tabs {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.35rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}
.details-tabs::-webkit-scrollbar { display: none; }
.tab-btn {
  flex: 0 0 auto;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.55rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tab-btn:hover { color: var(--navy); }
.tab-btn.active { color: var(--navy); border-bottom-color: var(--gold-bright); }
.tab-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: ugcTabFade 0.18s ease; }
@keyframes ugcTabFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* --- Mobile card layout for the breakdown (replaces the horizontally-
   scrolling table below 640px — the table stays for tablet/desktop where
   there's genuine room for 5 columns) --- */
.breakdown-cards { display: none; }
.bd-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  margin-bottom: 0.75rem;
}
.bd-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.6rem;
  margin-bottom: 0.65rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--border);
}
.bd-card-title { font-weight: 700; color: var(--navy); font-size: 0.92rem; }
.bd-card-dates { font-size: 0.75rem; color: var(--text-muted); }
.bd-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}
.bd-card-grid div { display: flex; flex-direction: column; gap: 0.15rem; }
.bd-card-grid span { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
.bd-card-grid strong { font-size: 0.88rem; color: var(--text); font-variant-numeric: tabular-nums; }
.bd-card-amount {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
}
.bd-card-amount span { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }
.bd-card-amount strong { font-size: 1rem; color: var(--navy); font-variant-numeric: tabular-nums; }

.bd-summary {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.25rem 1rem;
  margin-top: 0.25rem;
}
.bd-sum-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.bd-sum-row:last-child { border-bottom: none; }
.bd-sum-row span { color: var(--text-muted); }
.bd-sum-row strong { font-variant-numeric: tabular-nums; color: var(--text); }
.bd-sum-cap strong { color: var(--danger); }
.bd-sum-total {
  margin: 0.25rem -1rem -0.25rem;
  padding: 0.85rem 1rem;
  background: var(--navy);
  border-radius: 0 0 11px 11px;
  border-bottom: none;
}
.bd-sum-total span { color: rgba(255,255,255,0.75); font-weight: 700; }
.bd-sum-total strong { color: var(--gold-bright); font-size: 1.15rem; }

@media (max-width: 640px) {
  .table-wrap { display: none; }
  .breakdown-cards { display: block; }
}
@media (max-width: 900px) {
  .bd-card-grid { grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
  .bd-card-grid strong { font-size: 0.82rem; }
}
@media (max-width: 420px) {
  .stat-chip { min-width: 100%; flex-direction: row; justify-content: space-between; align-items: center; }
}


   The certificate used to be captured while hidden off-screen via
   position:absolute/fixed — a combination that html2canvas/html2pdf can
   render as a blank canvas in some browsers, because html2pdf.js clones
   the source into its own internal wrapper before rendering it, and a
   second layer of absolute/fixed positioning on top of that clone is a
   known cause of blank output. The fix: show the certificate for real,
   in normal document flow, inside this overlay — nothing hidden, nothing
   for the renderer to get wrong. It auto-closes the instant the PDF has
   been generated. */
.pdf-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 28, 46, 0.6);
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 6vh 12px 40px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  animation: ugcFadeIn 0.15s ease;
}
@keyframes ugcFadeIn { from { opacity: 0; } to { opacity: 1; } }
html.ugc-pdf-lock,
html.ugc-pdf-lock body { overflow: hidden !important; height: 100%; }
.pdf-overlay-inner {
  width: 700px;
  max-width: 100%;
  flex-shrink: 0;
}
.pdf-overlay-status {
  background: var(--gold-bright, #F0C75E);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.8rem;
  text-align: center;
  padding: 0.55rem 1rem;
  border-radius: 10px 10px 0 0;
  letter-spacing: 0.02em;
}
.pdf-cert {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  border-radius: 0 0 10px 10px;
}
@media (max-width: 740px) {
  /* Certificate keeps its fixed 700px basis for consistent PDF proportions;
     on narrow phones the overlay itself scrolls horizontally so the whole
     preview stays readable rather than being squeezed or clipped. */
  .pdf-overlay { justify-content: flex-start; }
}

/* ============================================================
   FULL & FINAL SETTLEMENT CALCULATOR — additional components
   ============================================================ */
.form-section-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy);
  margin: 1.5rem 0 0.85rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}
.form-group:first-child .form-section-title,
.form-section-title:first-child { margin-top: 0; }

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 560px) {
  .form-row-2 { grid-template-columns: 1fr; }
}

/* Repeatable "Other Additions" / "Other Deductions" line items */
.lineitem-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.6rem; }
.lineitem-row {
  display: grid;
  grid-template-columns: 1fr 140px auto;
  gap: 0.5rem;
  align-items: center;
}
@media (max-width: 480px) {
  .lineitem-row { grid-template-columns: 1fr 100px auto; }
}
.lineitem-row .form-control { padding: 0.6rem 0.75rem; font-size: 0.9rem; }
.btn-remove-row {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  color: var(--text-light);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.btn-remove-row:hover { background: #FEE2E2; border-color: #FCA5A5; color: #B91C1C; }
.btn-add-row {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--teal);
  cursor: pointer;
  margin-bottom: 0.5rem;
  transition: background 0.2s, border-color 0.2s;
}
.btn-add-row:hover { background: var(--teal-soft); border-color: var(--teal); }

/* ============================================================
   SETTLEMENT STATEMENT — a single continuous, printable ledger
   document (inspired by real HR/accounting F&F statements): a
   navy-and-gold color-graded version of the classic "section bar +
   alternating rows + final total row" layout, rather than a modern
   card/tab dashboard. This is deliberate — the whole point is that it
   should look and print like an official statement someone can sign,
   not like a SaaS results screen.
   ============================================================ */
.result-hero-compact { padding-bottom: 0.5rem; }

/* ============================================================
   F&F PAGE LAYOUT — stacked, full-width (not the 2-column
   input|output grid used by the standalone Gratuity Calculator).
   With this many fields, a side-by-side layout left a tall form next
   to a short, empty-looking result column. Scoped to #fnfCalcCard (an
   ID unique to this page) so the Gratuity Calculator's own layout is
   completely untouched.
   ============================================================ */
#fnfCalcCard .calc-body {
  display: block; /* form flows full-width, top to bottom */
}
#fnfCalcCard .calc-inputs { border-right: none; }
#fnfCalcCard .result-panel { padding: 0; }

/* Form fields laid out 3-up (falling back to 2, then 1) now that the
   form has the full card width to work with, instead of being
   squeezed into a half-width column. */
.form-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 860px) {
  .form-row-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .form-row-3 { grid-template-columns: 1fr; }
}

/* Result summary — a horizontal bar (amount | stat chips | actions)
   that actually uses the full width now available, instead of a
   narrow stacked box. Wraps to a stacked layout only on narrower
   screens where a single row would get cramped. */
.result-summary-bar {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
  padding: 1.5rem;
  background: linear-gradient(135deg, var(--bg) 0%, var(--white) 100%);
  border-bottom: 1px solid var(--border);
}
.result-summary-bar .result-hero-compact {
  flex: 0 0 auto;
  padding-bottom: 0;
  padding-top: 0;
  min-width: 220px;
  border-bottom: none;
  margin-bottom: 0;
  text-align: left;
}
.result-summary-bar .result-hero-title { margin-bottom: 0.35rem; }
.result-summary-bar .quick-stats {
  flex: 1 1 320px;
  margin: 0;
}
.result-summary-bar .result-actions-col {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 160px;
}
.result-summary-bar .result-actions-col .result-actions { margin: 0; }
.result-summary-bar .view-details-link { margin-top: 0; width: auto; white-space: nowrap; }
@media (max-width: 900px) {
  .result-summary-bar { flex-direction: column; align-items: stretch; gap: 1.1rem; }
  .result-summary-bar .result-hero-compact { text-align: center; }
  .result-summary-bar .result-actions-col { flex-direction: row; }
  .result-summary-bar .result-actions-col .result-actions { flex: 1; }
  .result-summary-bar .view-details-link { width: 100%; }
}
@media (max-width: 480px) {
  .result-summary-bar .result-actions-col { flex-direction: column; }
}

.statement-doc {
  border: 2px solid var(--navy);
  border-radius: 10px;
  overflow: hidden;
  background: var(--white);
}
.statement-doc-header {
  background: linear-gradient(135deg, var(--navy) 0%, #16324F 100%);
  color: var(--white);
  padding: 0.9rem 1.1rem;
  text-align: center;
}
.statement-doc-header span {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: var(--gold-bright);
  margin-bottom: 0.15rem;
}
.statement-doc-header strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.statement-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
}
.statement-table td {
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.statement-table tr:nth-child(even):not(.row-section):not(.row-total) td { background: var(--bg); }
.statement-table td.amount,
.statement-table td:last-child:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 600;
  color: var(--navy);
}
.statement-table .row-section td {
  background: var(--navy);
  color: var(--gold-bright);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.55rem 0.9rem;
  border-bottom: none;
}
.statement-table .amount-negative { color: #B91C1C !important; }
.statement-table .row-sub td {
  font-weight: 700;
  background: var(--bg) !important;
  border-top: 1.5px solid var(--navy);
  border-bottom: 1.5px solid var(--navy);
}
.statement-table .row-total.row-net td {
  font-size: 1.15rem;
  padding: 1rem 0.9rem;
  background: var(--navy);
  color: var(--white);
  font-weight: 800;
  border-bottom: none;
}
.statement-table .row-total.row-net td.amount,
.statement-table .row-total.row-net td:last-child { color: var(--gold-bright); }

@media (max-width: 480px) {
  .statement-table { font-size: 0.8rem; }
  .statement-table td { padding: 0.5rem 0.6rem; }
}

/* Confirmation declaration + primary (employee) signature line, shown
   directly beneath the statement — this is the line that matters most
   on a settlement document, so it's prominent and always visible (not
   tucked into a tab). A smaller, secondary HR sign-off row follows. */
.statement-confirm {
  margin: 1.25rem 0 1rem;
  padding: 0.9rem 1rem;
  background: var(--bg);
  border-left: 3px solid var(--gold-bright);
  border-radius: 0 8px 8px 0;
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.6;
}
.statement-sign-primary {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 560px) {
  .statement-sign-primary { grid-template-columns: 1fr; gap: 0.9rem; }
}
.statement-sign-primary .sig-field span {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: 0.4rem;
}
.statement-sign-primary .sig-line {
  border-bottom: 1.5px solid var(--navy);
  height: 1.6rem;
}
.statement-signoff {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--border);
}
@media (max-width: 560px) {
  .statement-signoff { grid-template-columns: 1fr; }
}
.signoff-col { display: flex; flex-direction: column; gap: 0.5rem; }
.signoff-role {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-light);
}
.signoff-line { border-bottom: 1px solid var(--border); height: 1.1rem; }

.form-hint-live {
  color: var(--teal);
  font-weight: 600;
  margin-top: -0.4rem;
  margin-bottom: 0.9rem;
}
.form-hint-balance {
  margin-top: 0.6rem;
  font-size: 0.95rem;
}

.formula-toggle { margin: 1rem 0 0; }
.formula-toggle svg { transition: transform 0.2s ease; }
.formula-toggle.is-open svg { transform: rotate(180deg); }
.formula-breakdown {
  margin-top: 0.75rem;
  animation: ugcFormulaFade 0.2s ease;
}
@keyframes ugcFormulaFade { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   BLOG / GUIDES — single post, archive listing, generic page
   ============================================================ */
.blog-container { max-width: 760px; margin: 0 auto; }
.blog-container-wide { max-width: 1080px; }
.page-title { margin-bottom: 1.25rem; }

/* ---- Table of contents + content layout ---- */
.blog-post-layout {
  display: block;
  margin-bottom: 1rem;
}
.blog-post-layout.has-toc {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}
/* Without this, a CSS Grid item's "automatic minimum size" is based on
   its content's intrinsic width — a table, a long inline <code> snippet,
   or any other unbreakable content can force the column (and therefore
   the whole page) wider than the viewport, with no scrollbar to reach
   the clipped part. Same root cause as the earlier calculator-layout
   fix; same fix here. */
.post-toc,
.entry-content { min-width: 0; }
@media (max-width: 960px) {
  .blog-post-layout.has-toc { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}

.post-toc {
  position: sticky;
  top: calc(var(--header-h-scrolled) + 1.25rem);
}
.post-toc-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 1.1rem;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--navy);
  cursor: pointer;
}
.post-toc-toggle svg { transition: transform 0.2s ease; }
.post-toc-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.post-toc-inner {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.4rem;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.post-toc-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-light);
  margin-bottom: 0.9rem;
}
.post-toc-inner ol { list-style: none; margin: 0; padding: 0; }
.post-toc-item { margin-bottom: 0.15rem; }
.post-toc-item a {
  display: block;
  padding: 0.4rem 0 0.4rem 0.85rem;
  border-left: 2px solid var(--border);
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text-secondary, var(--text));
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.post-toc-item.post-toc-h3 a { padding-left: 1.5rem; font-size: 0.8rem; }
.post-toc-item a:hover { color: var(--teal); }
.post-toc-item a.active { border-left-color: var(--gold-bright, #D4A017); color: var(--navy); font-weight: 700; }

@media (max-width: 960px) {
  .post-toc-toggle { display: flex; }
  .post-toc-inner {
    display: none;
    position: static;
    max-height: none;
    margin-top: 0.6rem;
    border-radius: 0 0 10px 10px;
    border-top: none;
  }
  .post-toc-inner.open { display: block; }
  .post-toc { position: static; }
}

/* ---- Premium article typography ---- */
.entry-content {
  line-height: 1.8;
  color: var(--text);
  font-size: 1.06rem;
}
.entry-content > *:first-child { margin-top: 0; }
.entry-content > p:first-of-type {
  font-size: 1.18rem;
  line-height: 1.7;
  color: var(--navy);
  font-weight: 500;
}
.entry-content h1 { font-size: clamp(1.6rem, 3.5vw, 2rem); margin: 2.5rem 0 1.1rem; }
.entry-content h2 {
  font-size: clamp(1.3rem, 2.8vw, 1.6rem);
  color: var(--navy);
  margin: 2.75rem 0 1.1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--border);
  scroll-margin-top: 90px;
}
.entry-content h2:first-of-type { margin-top: 0; }
.entry-content h3 {
  font-size: 1.2rem;
  color: var(--navy);
  margin: 2.1rem 0 0.9rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--gold-bright, #D4A017);
  scroll-margin-top: 90px;
}
.entry-content h4 { font-size: 1.05rem; color: var(--navy); margin: 1.75rem 0 0.75rem; }
.entry-content h5, .entry-content h6 {
  font-size: 0.92rem;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 1.5rem 0 0.65rem;
}
.entry-content p { margin-bottom: 1.3rem; }
.entry-content strong, .entry-content b { color: var(--navy); font-weight: 700; }
.entry-content a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.entry-content a:hover { color: var(--gold-bright, #D4A017); }

/* Bullet lists — a soft gold dot instead of the default browser bullet */
.entry-content ul {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
}
.entry-content ul li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.65rem;
}
.entry-content ul li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-bright, #D4A017);
}
.entry-content ul ul { margin-top: 0.65rem; }
.entry-content ul ul li::before { background: var(--teal); width: 5px; height: 5px; }

/* Numbered lists — gold circled numbers, matching the calculators'
   step-by-step derivation styling so the site's numbered-list "voice"
   stays consistent everywhere. */
.entry-content ol {
  list-style: none;
  counter-reset: ugc-ol;
  margin: 0 0 1.4rem;
  padding: 0;
}
.entry-content ol li {
  counter-increment: ugc-ol;
  position: relative;
  padding-left: 2.4rem;
  margin-bottom: 0.9rem;
  min-height: 1.6rem;
}
.entry-content ol li::before {
  content: counter(ugc-ol);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-bright, #D4A017));
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.entry-content li p { margin-bottom: 0.5rem; }

.entry-content img { border-radius: 12px; margin: 1.75rem 0; box-shadow: 0 8px 24px rgba(11,28,46,0.08); }
.entry-content figure { margin: 1.75rem 0; }
.entry-content figcaption {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-light);
  margin-top: 0.6rem;
}

.entry-content blockquote {
  position: relative;
  border-left: 3px solid var(--gold-bright, #D4A017);
  background: var(--bg);
  padding: 1.1rem 1.4rem 1.1rem 3rem;
  margin: 1.75rem 0;
  border-radius: 0 10px 10px 0;
  color: var(--navy);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.65;
}
.entry-content blockquote::before {
  content: '"';
  position: absolute;
  left: 0.9rem;
  top: 0.55rem;
  font-size: 2.2rem;
  font-family: Georgia, serif;
  font-style: normal;
  color: var(--gold-bright, #D4A017);
  opacity: 0.6;
  line-height: 1;
}
.entry-content blockquote p:last-child { margin-bottom: 0; }

.entry-content hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
  margin: 2.5rem 0;
}

.entry-content code {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.15rem 0.4rem;
  font-size: 0.88em;
  color: #B8860B;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}
.entry-content pre {
  background: var(--navy);
  color: #E2E8F0;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  margin: 1.75rem 0;
  font-size: 0.88rem;
  line-height: 1.6;
}
.entry-content pre code { background: none; border: none; padding: 0; color: inherit; }

/* Tables — WordPress ships these completely unstyled by default */
.entry-table-wrap { overflow-x: auto; margin: 1.75rem 0; border-radius: 10px; border: 1px solid var(--border); }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 0.94rem; margin: 0; }
.entry-content th {
  background: var(--navy);
  color: var(--white);
  text-align: left;
  padding: 0.75rem 1rem;
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.entry-content td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); }
.entry-content tbody tr:nth-child(even) { background: var(--bg); }
.entry-content tbody tr:last-child td { border-bottom: none; }


.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-light);
  margin-bottom: 1.25rem;
}
.breadcrumb a { color: var(--text-light); }
.breadcrumb a:hover { color: var(--teal); }
.breadcrumb span[aria-current] { color: var(--navy); font-weight: 600; }

.blog-post-title { font-size: clamp(1.6rem, 4vw, 2.25rem); margin-bottom: 0.75rem; }
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-light);
  margin-bottom: 1.5rem;
}
.post-meta a { color: var(--teal); }
.post-meta-sep { opacity: 0.5; }
.blog-post-thumb { margin-bottom: 1.75rem; }
.blog-post-thumb img { width: 100%; height: auto; border-radius: 14px; }

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 2rem 0;
}
.post-tag {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-size: 0.78rem;
  color: var(--text-secondary, var(--text));
}
.post-tag:hover { border-color: var(--teal); color: var(--teal); }

.post-cta-box {
  background: linear-gradient(135deg, var(--navy) 0%, #16324F 100%);
  border-radius: 16px;
  padding: 1.75rem;
  margin: 2.5rem 0;
  text-align: center;
}
.post-cta-box h3 { color: var(--white); margin-bottom: 0.4rem; }
.post-cta-box p { color: rgba(255,255,255,0.75); margin-bottom: 1.25rem; font-size: 0.92rem; }
.post-cta-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright, #D4A017) 100%);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.7rem 1.25rem;
  border-radius: 10px;
}
.btn-cta-outline {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.4);
}
.btn-cta-outline:hover { background: rgba(255,255,255,0.1); color: var(--white); }

.blog-archive .section-subtitle { max-width: 620px; margin-left: auto; margin-right: auto; }
.blog-cat-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 1.75rem 0 0;
}
.blog-cat-filter a {
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--white);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary, var(--text));
}
.blog-cat-filter a:hover { border-color: var(--teal); color: var(--teal); }
.blog-cat-filter a.active { background: var(--navy); border-color: var(--navy); color: var(--white); }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.post-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.post-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(11,28,46,0.08); }
.post-card-thumb-link { display: block; aspect-ratio: 16/9; background: var(--bg); }
.post-card-thumb { width: 100%; height: 100%; object-fit: cover; }
.post-card-thumb-placeholder { display: flex; align-items: center; justify-content: center; color: var(--border); width: 100%; height: 100%; }
.post-card-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.post-card-meta { display: flex; gap: 0.5rem; font-size: 0.72rem; color: var(--text-light); margin-bottom: 0.5rem; }
.post-card-cat { color: var(--teal); font-weight: 600; }
.post-card-title { font-size: 1.05rem; margin-bottom: 0.5rem; line-height: 1.35; }
.post-card-title a { color: var(--navy); }
.post-card-title a:hover { color: var(--teal); }
.post-card-excerpt { font-size: 0.87rem; color: var(--text-secondary, var(--text)); line-height: 1.55; margin-bottom: 1rem; flex: 1; }
.post-card-link { font-size: 0.83rem; font-weight: 700; color: var(--teal); align-self: flex-start; }
.blog-pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 3rem; flex-wrap: wrap; }
.blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 600;
}
.blog-pagination .page-numbers.current { background: var(--navy); color: var(--white); border-color: var(--navy); }
.blog-pagination .page-numbers:hover:not(.current) { border-color: var(--teal); color: var(--teal); }

@media (max-width: 560px) {
  .blog-grid { grid-template-columns: 1fr; }
}