/* ==========================================================================
   Appliance Repair Nairobi — custom theme layer (sits on top of Bootstrap)
   ========================================================================== */

/* ---------------- Locally hosted DM Sans ---------------- */
@font-face{
  font-family:'DM Sans';
  src: url('https://repair.co.ke/fonts/dm-sans-v17-latin-regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'DM Sans';
  src: url('https://repair.co.ke/fonts/dm-sans-v17-latin-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'DM Sans';
  src: url('https://repair.co.ke/fonts/dm-sans-v17-latin-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'DM Sans';
  src: url('https://repair.co.ke/fonts/dm-sans-v17-latin-800.woff2') format('woff2');
  font-weight:800; font-style:normal; font-display:swap;
}
*,*::before,*::after{
  font-family:"DM Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}

:root{
  --brand-blue:   #0b3d68;
  --brand-blue-d: #082c4a;
  --brand-orange: #f2931e;
  --brand-orange-d:#d97e0d;
  --ink:          #202833;
  --muted:        #5c6773;
  --bg-soft:      #f4f7fa;
  --border:       #e2e8ee;
  --offwhite:     #f8f6f1;
  --red:          #c50014;
  --red-d:        #9c0010;
}

html, body{ height:100%; }
body{
  color: var(--ink);
  font-family: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding-top: 0;
}
h1,h2,h3,h4,h5,h6,.navbar-brand,.btn{
  font-family: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a{ color: var(--brand-blue); }
a:hover, a:focus{ color: var(--brand-orange); text-decoration:none; }
img{ max-width:100%; height:auto; }
.section{ padding: 48px 0; }
.section-tight{ padding: 28px 2px; }
.section-alt{ background: var(--bg-soft);padding:0.8em;}
h2.section-title{
  font-weight:700; color:var(--brand-blue); margin-bottom:6px;
}
p.section-lead{ color:var(--muted); margin-bottom:28px; }

/* ---------------- Site header (glassmorphic) ---------------- */
.site-header{
  position: sticky; top:0; z-index:1000;
  background: linear-gradient(120deg, rgba(11,61,104,.82) 0%, rgba(8,44,74,.86) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 8px 28px rgba(4,20,36,.18);
  isolation: isolate;
}
.site-header::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: linear-gradient(115deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,.06) 55%, rgba(255,255,255,0) 100%);
}
.site-header > *{ position:relative; z-index:2; }

/* ---------------- Top utility bar ---------------- */
.top-bar{
  background: var(--red);
  border-bottom: 1px solid rgba(255,255,255,.12);
  color:#fff;
  font-size:13px;
}
.top-bar a{ color:#fff; }
.top-bar a:hover{ color:#ffd9dd; }
.top-bar .top-bar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 0;
}
.top-bar .top-phone{ font-weight:600; }
.top-bar .top-phone i{ margin-right:5px; }
.top-bar .top-social{ display:flex; align-items:center; gap:14px; }
.top-bar .top-social a{ margin-left:0; display:inline-flex; align-items:center; }
.top-bar .top-social svg{ width:16px; height:16px; display:block; }

/* ---------------- Brand header ---------------- */
.brand-header{ padding: 14px 0; background:transparent; }
.brand-header .navbar-brand{
  font-size:18px; font-weight:800; color:#fff; padding:0;
  height:auto; line-height:1.1;
}
.brand-header .navbar-brand span{ display:block; font-size:12px; font-weight:400; color:rgba(255,255,255,.72); }
.brand-header .btn-call{
  background:var(--brand-orange); border-color:var(--brand-orange-d); color:#fff; font-weight:600;
}
.brand-header .btn-call:hover{ background:var(--brand-orange-d); color:#fff; }

/* ---------------- Main navigation / mega menu ---------------- */
.navbar-main{
  background: transparent;
  border:0; border-radius:0; margin-bottom:0;
  min-height:48px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.navbar-main .navbar-nav > li > a{
  color:#eaf1f8; font-weight:600; font-size:14px;
  padding: 14px 16px;
}
/* First item's text should line up with the brand text above it, not
   with the row of nav links (which carry extra left padding). */
.navbar-main .navbar-nav > li:first-child > a{ padding-left:0; }
.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus,
.navbar-main .navbar-nav > .open > a{
  background: var(--brand-blue-d); color:#fff;
}
.navbar-main .navbar-toggle{ border-color:#2a557f; margin: 8px 15px; }
.navbar-main .navbar-toggle .icon-bar{ background:#fff; }
.navbar-main .navbar-toggle:hover{ background: var(--brand-blue-d); }

/* Mega dropdown panel */
/* Bootstrap's ".nav > li{position:relative}" outranks a plain ".dropdown-mega"
   class selector, so this override needs matching specificity to win. */
.navbar-nav > li.dropdown-mega{ position:static; }
.dropdown-mega .dropdown-menu{
  left:0; right:0; width:100%;
  margin-top:0; border:0; border-top:3px solid var(--brand-orange);
  border-radius:0; box-shadow:0 12px 24px rgba(0,0,0,.15);
  padding:24px 0;
  background: rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}
.dropdown-mega .mega-inner{
  max-width:1170px; margin:0 auto; padding:0 15px;
  display:flex; flex-wrap:wrap;
}
.dropdown-mega .mega-col{
  flex:1 1 220px; padding:0 15px 15px;
}
.dropdown-mega .mega-col h5{
  color:var(--brand-blue); font-weight:700; text-transform:uppercase;
  font-size:12px; letter-spacing:.04em; border-bottom:2px solid var(--border);
  padding-bottom:6px; margin-bottom:10px;
}
.dropdown-mega .mega-col ul{ list-style:none; padding:0; margin:0; }
.dropdown-mega .mega-col li{
  margin-bottom:6px; padding-bottom:6px;
  border-bottom:1px dashed rgba(150,163,176,.45);
}
.dropdown-mega .mega-col li:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; }
.dropdown-mega .mega-col a{ color:var(--ink); font-size:13px; }
.dropdown-mega .mega-col a:hover{ color:var(--brand-orange); }
.dropdown-mega .mega-col.mega-brands ul{
  display:flex; flex-wrap:wrap; gap:4px 10px;
}
.dropdown-mega .mega-col.mega-brands li{ width:calc(50% - 5px); }

/* Bootstrap's .navbar already has position:relative, so the mega panel's
   absolute positioning resolves against the full navbar width — the
   dropdown-mega li itself must stay position:static (see rule above)
   so it never becomes the containing block. */

/* ---------------- Hero (overlay style, stock image) ---------------- */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  background-image: url("https://images.unsplash.com/photo-1610678751896-8aed7ac465e5?fm=jpg&q=80&w=2000&auto=format&fit=crop");
  background-size: cover; background-position: center;
  color:#fff; padding:88px 0 76px;
}
.hero-overlay{
  position:absolute; inset:0; z-index:0;
  background: linear-gradient(125deg, rgba(8,32,54,.92) 0%, rgba(11,61,104,.85) 55%, rgba(8,44,74,.9) 100%);
}
.hero-sheen{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(115deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,.05) 58%, rgba(255,255,255,0) 100%);
}
.hero > .container{ position:relative; z-index:2; }
.hero h1{ font-weight:800; font-size:34px; margin-top:0; text-shadow:0 2px 12px rgba(0,0,0,.25); }
.hero .hero-sub{ font-size:16px; color:#dfe9f2; margin-bottom:22px; }
.hero .badge-guarantee{
  display:inline-block; background:rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.35); border-radius:4px;
  padding:6px 12px; font-size:13px; margin-bottom:20px;
}
.hero .btn-hero{
  background:var(--brand-orange); border-color:var(--brand-orange-d); color:#fff;
  font-weight:700; padding:12px 26px; font-size:15px;
}
.hero .btn-hero:hover{ background:var(--brand-orange-d); color:#fff; }
.hero-panel{
  position:relative; overflow:hidden;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-radius:10px; padding:24px;
  box-shadow: 0 12px 32px rgba(4,20,36,.25);
}
.hero-panel::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(125deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 100%);
}
.hero-panel h4{ margin-top:0; color:#fff; font-weight:700; position:relative; }
.hero-panel ul{ padding-left:18px; margin-bottom:0; color:#eef4fa; position:relative; }
.hero-panel ul li{ margin-bottom:6px; }

/* ---------------- Quick action buckets ---------------- */
.buckets{ margin-top:-32px; position:relative; z-index:2; }
.bucket-card{
  background:#fff; border-radius:6px; box-shadow:0 8px 20px rgba(11,61,104,.12);
  padding:20px; text-align:center; display:block; height:100%;
  border-bottom:3px solid var(--brand-orange);
}
.bucket-card:hover{ box-shadow:0 12px 28px rgba(11,61,104,.2); }
.bucket-card .bucket-label{
  display:block; text-transform:uppercase; font-size:11px; letter-spacing:.06em;
  color:var(--brand-orange-d); font-weight:700; margin-bottom:4px;
}
.bucket-card .bucket-title{ display:block; font-weight:700; color:var(--ink); font-size:15px; }

/* ---------------- Appliance / service cards ---------------- */
.appliance-row{ display:flex; flex-wrap:wrap; }
.appliance-row > [class*="col-"]{ display:flex; }
.service-card{
  background:var(--offwhite); border:1px solid var(--border); border-radius:6px;
  padding:18px; text-align:center; width:100%; transition:.15s;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  color:var(--ink); font-weight:600;
}
.service-card:hover{ border-color:var(--brand-orange); box-shadow:0 6px 16px rgba(11,61,104,.1); color:var(--brand-orange-d); }
.service-card:hover .service-icon{ color:var(--brand-orange-d); background:#fff4e8; }
.service-card .service-icon{
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:var(--brand-blue);
  margin:0 auto 12px; transition:.15s;
}
.service-card .svc-icon{
  width:34px; height:34px;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.service-card span{ color:inherit; }

/* ---------------- Content / article area ---------------- */

/* Headings — feint dashed rule under every level, capitalized, and a
   consistent size ramp from h1 (32px) down to h6 (18px). Replaces the
   narrower h3-only rule this section used to carry. */
.content-area h1,
.content-area h2,
.content-area h3,
.content-area h4,
.content-area h5,
.content-area h6{
  color: var(--brand-blue);
  font-weight: 700;
  text-transform: capitalize;
  margin-top: 1.4em;
  margin-bottom: 0.6em;
  padding-bottom: 0.35em;
  border-bottom: 1px dashed rgba(92,103,115,.35);
  line-height: 1.3;
}
.content-area h1{ font-size:32px; }
.content-area h2{ font-size:28px;text-decoration:uppercase; }
.content-area h3{ font-size:24px;text-decoration:uppercase; }
.content-area h4{ font-size:21px; }
.content-area h5{ font-size:19px; }
.content-area h6{ font-size:18px; }

.content-area p{ color:var(--muted); line-height:1.7; }

/* Blockquotes — muted grey background, offwhite text */
.content-area blockquote{
  background: var(--muted);
  color: var(--offwhite);
  border-radius: 6px;
  padding: 18px 22px;
  margin: 0 0 24px;
}
.content-area blockquote p{ color: inherit; margin-bottom: .6em; }
.content-area blockquote p:last-child{ margin-bottom: 0; }
.content-area blockquote cite{ display:block; margin-top:.6em; font-size:.85em; opacity:.85; }

/* Lists — slightly indented, feint dashed divider between items.
   ul.checklist keeps its own bullet-free, checkmark styling below,
   so it's excluded here. */
.content-area ul:not(.checklist),
.content-area ol{
  margin: 0 0 1.2em;
  padding-left: 1.3em;
}
.content-area ul:not(.checklist) li,
.content-area ol li{
  padding: .4em 0;
  border-bottom: 1px dashed rgba(92,103,115,.35);
}
.content-area ul:not(.checklist) li:last-child,
.content-area ol li:last-child{
  border-bottom: 0;
}
.content-area ul:not(.checklist) li > ul,
.content-area ol li > ol{
  margin-top: .4em;
  margin-bottom: 0;
}

.content-area ul.checklist{ list-style:none; padding-left:0; }
.content-area ul.checklist li{
  padding-left:24px; position:relative; margin-bottom:8px; color:var(--ink);
}
.content-area ul.checklist li:before{
  content:"✓"; position:absolute; left:0; color:var(--brand-orange-d); font-weight:700;
}
.content-cta{
  background: var(--bg-soft); border-left:4px solid var(--brand-orange);
  padding:18px 20px; border-radius:4px; margin:24px 0;
}
.content-box{
  background:#fff; border-radius:10px; border-left:4px solid var(--red);
  padding:32px 34px; box-shadow:0 6px 20px rgba(11,61,104,.06);
}

/* Tables — responsive: real table from 768px up, stacked cards below it */
.content-area table{
  width:100%;
  border-collapse: collapse;
  margin: 0 0 24px;
}
.content-area table th{
  background: var(--bg-soft);
  color: var(--brand-blue);
  font-weight:700;
  text-align:left;
  padding:10px 14px;
  border-bottom:2px solid var(--border);
}
.content-area table td{
  padding:10px 14px;
  border-bottom:1px solid var(--border);
  color:var(--muted);
}
@media (max-width: 767px){
  .content-area table{
    border:0; border-collapse:separate; border-spacing:0; background:transparent;
  }
  .content-area table thead{ display:none; }
  .content-area table tbody tr{
    display:block; width:100%; margin:0 0 20px; padding:0; overflow:hidden;
    background:#fff; border:1px solid var(--border); border-radius:6px;
    box-shadow:0 2px 6px rgba(11,61,104,.08);
  }
  .content-area table tbody tr:last-child{ margin-bottom:0; }
  .content-area table td{
    display:block; width:100%; padding:10px 14px; text-align:left; vertical-align:top;
    line-height:1.5; border:0; border-bottom:1px solid var(--border); color:var(--ink);
    background:#fff; box-sizing:border-box;
    overflow-wrap:anywhere; word-break:normal;
  }
  .content-area table td:last-child{ border-bottom:0; }
  .content-area table td:first-child{
    padding:12px 14px; color:#fff; background:var(--brand-blue);
    font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.04em;
  }
  .content-area table td ul,
  .content-area table td ol{ margin:0; padding-left:18px; }
  .content-area table td p{ margin:0 0 6px; }
  .content-area table td p:last-child{ margin-bottom:0; }
  .content-area table td a{ color:var(--brand-blue); font-weight:600; text-decoration:underline; }
}

/* ---------------- Brands strip ---------------- */
.brand-chip{
  display:block; text-align:center; background:#fff; border:1px solid var(--border);
  border-radius:4px; padding:12px 6px; font-weight:700; color:var(--brand-blue);
  font-size:12px; letter-spacing:.03em; margin-bottom:12px;
}
.brand-chip:hover{ border-color:var(--brand-orange); color:var(--brand-orange-d); }

/* ---------------- Coverage areas ---------------- */
/* Coverage area: wrapped but uniform chips */
.coverage-area {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Coverage chip: equal width, centered content */
.coverage-chip {
  display: inline-flex;
  align-items: left;
  justify-content: left;
  gap: 6px;

  background: var(--offwhite);
  border: 1px solid var(--border);
  color: var(--brand-blue);

  font-weight: 700;
  font-size: 13px;
  padding: 9px 14px;
  border-radius: 2px;

  /* Uniform width */
  width: 160px;              /* adjust as needed */
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hover state for normal chips */
.coverage-chip:hover {
  border-color: var(--brand-orange);
  color: var(--brand-orange-d);
  background: #fff;
}

/* Pin icon inside chips */
.coverage-chip .pin-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  fill: var(--brand-orange-d);
}

/* "View all" chip */
.coverage-chip-all {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}

.coverage-chip-all:hover {
  background: var(--brand-blue-d);
  border-color: var(--brand-blue-d);
  color: #fff;
}

/* ---------------- FAQ ---------------- */
.faq-grid{ display:flex; flex-wrap:wrap; gap:0 32px; margin-top:10px; }
.faq-col{ flex:1 1 320px; min-width:280px; }
.faq-item{
  background:#fff; border:1px solid var(--border); border-radius:6px;
  padding:2px 18px; margin-bottom:12px;
}
.faq-item summary{
  cursor:pointer; list-style:none; font-weight:700; color:var(--brand-blue);
  padding:14px 22px 14px 0; position:relative; font-size:14.5px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; position:absolute; right:0; top:12px; font-size:18px;
  font-weight:800; color:var(--brand-orange-d);
}
.faq-item[open] summary::after{ content:"\2212"; }
.faq-item p{ color:var(--muted); font-size:13.5px; line-height:1.65; padding-bottom:16px; margin:0; }

/* ---------------- Testimonial ---------------- */
.testimonial-card{
  background:#fff; border-radius:6px; padding:22px; border:1px solid var(--border); height:100%; margin-bottom:2em;
}
.testimonial-card .stars{ color:var(--brand-orange); margin-bottom:8px; }
.testimonial-card p{ color:var(--muted); font-style:italic; }
.testimonial-card .name{ font-weight:700; color:var(--ink); font-style:normal; }

/* ---------------- Footer (overlay style, stock image, glass panels) ---------------- */
footer.site-footer{
  position:relative; overflow:hidden; isolation:isolate;
  background-image: url("https://images.unsplash.com/photo-1650501662347-284973714a68?fm=jpg&q=80&w=2000&auto=format&fit=crop");
  background-size: cover; background-position:center;
  color:#c9d8e6; padding-top:52px;
}
.footer-overlay{
  position:absolute; inset:0; z-index:0;
  background: linear-gradient(160deg, rgba(6,25,43,.94) 0%, rgba(8,44,74,.92) 60%, rgba(6,25,43,.96) 100%);
}
.footer-sheen{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(115deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,.05) 60%, rgba(255,255,255,0) 100%);
}
footer.site-footer > .container, footer.site-footer .footer-bottom{ position:relative; z-index:2; }
.footer-row{ display:flex; flex-wrap:wrap; }
.footer-row > [class*="col-"]{ display:flex; }
.footer-glass{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border-radius:10px; padding:22px; width:100%;
}
footer.site-footer h5{
  color:#fff; font-weight:700; text-transform:uppercase; font-size:13px;
  letter-spacing:.04em; margin-bottom:16px;
}
footer.site-footer a{ color:#c9d8e6; }
footer.site-footer a:hover{ color:#fff; }
footer.site-footer ul{ list-style:none; padding:0; }
footer.site-footer ul.footer-links li{ margin-bottom:8px; font-size:13px; }
footer.site-footer ul.footer-brands{ display:flex; flex-wrap:wrap; gap:6px 12px; }
footer.site-footer ul.footer-brands li{ font-size:12px; width:calc(50% - 6px); }
footer.site-footer .footer-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  background:rgba(255,255,255,.10); border-radius:50%; margin-right:8px;
}
footer.site-footer .footer-social svg{ width:16px; height:16px; }
footer.site-footer .payment-badge{
  display:inline-block; background:#fff; color:var(--brand-blue); font-weight:700;
  font-size:11px; padding:6px 10px; border-radius:4px; margin:0 6px 6px 0;
}
.footer-bottom{
  background:var(--red);
  border-top:1px solid rgba(255,255,255,.1);
  padding:14px 0; margin-top:36px; font-size:12px; color:#fff;
  text-align:center;
}
.footer-bottom a{ color:#ffd9dd; font-weight:700; }

/* ---------------- Sticky call FAB (mobile) ---------------- */
.call-fab{
  position:fixed; right:16px; bottom:16px; z-index:1001;
  background:var(--brand-orange); color:#fff; width:56px; height:56px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:22px; box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.call-fab:hover{ color:#fff; background:var(--brand-orange-d); }

@media (max-width: 767px){
  .top-bar .top-social{ display:none; }
  .hero{ padding:56px 0; text-align:center; }
  .hero-panel{ margin-top:24px; }
  .buckets{ margin-top:18px; }
  .dropdown-mega .dropdown-menu{ position:static; box-shadow:none; }
}



/* =========================================
   Responsive Table-to-Card Layout
   WordPress Additional CSS
   ========================================= */

@media (max-width: 767px) {

  /* Keep the table full width */
  .entry-content table,
  .wp-block-table table,
  .site-main table {
    width: 100%;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
  }

  /* Hide the table header on small screens */
  .entry-content table thead,
  .wp-block-table table thead,
  .site-main table thead {
    display: none;
  }

  /* Turn each table row into a card */
  .entry-content table tbody tr,
  .wp-block-table table tbody tr,
  .site-main table tbody tr {
    display: block;
    width: 100%;
    margin: 0 0 24px;
    padding: 0;
    overflow: hidden;
    background: #d8f9ff;
    border: 1px solid #e3e8ef;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(25, 42, 70, 0.08);
  }

  /* Remove spacing after the final card */
  .entry-content table tbody tr:last-child,
  .wp-block-table table tbody tr:last-child,
  .site-main table tbody tr:last-child {
    margin-bottom: 0;
  }

  /* Convert cells into stacked card sections */
  .entry-content table tbody td,
  .wp-block-table table tbody td,
  .site-main table tbody td {
    display: block;
    width: 100%;
    min-height: auto;
    padding: 12px 12px;
    text-align: left;
    vertical-align: top;
    line-height: 1.2;
    border: 0;
    border-bottom: 1px solid #edf0f4;
    color: #364152;
    background: #ffffff;
    box-sizing: border-box;
  }

  /* Remove the divider from the final cell */
  .entry-content table tbody td:last-child,
  .wp-block-table table tbody td:last-child,
  .site-main table tbody td:last-child {
    border-bottom: 0;
  }

  /* First column becomes the card title */
  .entry-content table tbody td:first-child,
  .wp-block-table table tbody td:first-child,
  .site-main table tbody td:first-child {
    padding: 16px 18px;
    color: #ffffff;
    background: #2457a6;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* Add a subtle accent to the title area */
  .entry-content table tbody td:first-child::before,
  .wp-block-table table tbody td:first-child::before,
  .site-main table tbody td:first-child::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 18px;
    margin-right: 9px;
    vertical-align: -3px;
    background: #f4b942;
    border-radius: 2px;
  }

  /* Improve readability when cells contain lists */
  .entry-content table tbody td ul,
  .entry-content table tbody td ol,
  .wp-block-table table tbody td ul,
  .wp-block-table table tbody td ol,
  .site-main table tbody td ul,
  .site-main table tbody td ol {
    margin: 0;
    padding-left: 20px;
  }

  /* Keep paragraphs from creating excessive gaps */
  .entry-content table tbody td p,
  .wp-block-table table tbody td p,
  .site-main table tbody td p {
    margin: 0 0 8px;
  }

  .entry-content table tbody td p:last-child,
  .wp-block-table table tbody td p:last-child,
  .site-main table tbody td p:last-child {
    margin-bottom: 0;
  }

  /* Improve link visibility inside cards */
  .entry-content table tbody td a,
  .wp-block-table table tbody td a,
  .site-main table tbody td a {
    color: #2457a6;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }

  /* Prevent very long words or URLs from breaking the layout */
  .entry-content table tbody td,
  .wp-block-table table tbody td,
  .site-main table tbody td {
    overflow-wrap: anywhere;
    word-break: normal;
  }
}




table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 16px; text-align: left; }

th, td {
padding: 12px;
border: 1px solid #ddd;
}

th {
background-color: #f4f4f4;
font-weight: bold;
}

tr:nth-child(even) {
background-color: #EDF4FE;
}

@media screen and (max-width: 600px) {
table {
display: block;
overflow-x: auto;
white-space: nowrap;
}

th, td {
font-size: 14px;
padding: 8px;
}
}


th {

  background-color: #db007e;
font-size:14px;
  color: #fff;
font-weight:500px;
  padding: 4px;

  transition: background-color 0.3s ease; /* Smooth transition */

}

th:hover {

  background-color: #0056b3; /* Darker blue on hover */

}
td {
font-size:12px;
border-width:1px;border-color:#f7f7f7;border-style:solid;
}