/* ---------------------------------------------------------------------
 * Rubik, self-hosted.
 *
 * Served from this theme rather than fonts.gstatic.com: the font arrived
 * with Elementor's global settings, so removing Elementor would otherwise
 * take the typeface with it. No third-party request, and nothing to go
 * wrong when the plugin goes.
 *
 * Two files for five weights: Rubik is a variable font, so each weight is
 * an instance of the same woff2. Hebrew is 9 KB, latin 35 KB, and the
 * unicode-range on each face is what stops a Hebrew page downloading the
 * latin file at all.
 * ------------------------------------------------------------------- */

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/rubik-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/rubik-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/rubik-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/rubik-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/rubik-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/rubik-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/rubik-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/rubik-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/rubik-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/rubik-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* taxes-refund theme - de-Elementor rebuild */

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { direction: rtl; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* TOKENS */
:root {
  /* צבעי המותג הרשמיים - dark teal-blue */
  --color-brand: #386783;
  --color-brand-dark: #2A506A;
  --color-brand-deeper: #1F3E52;
  --color-brand-light: #4A81A3;
  --color-brand-glow: #5A9BC0;
  --color-brand-soft: rgba(56, 103, 131, 0.10);
  --color-brand-soft-hover: rgba(56, 103, 131, 0.18);

  /* Gradients */
  --gradient-cta: linear-gradient(135deg, #386783 0%, #2A506A 100%);
  --gradient-cta-hover: linear-gradient(135deg, #2A506A 0%, #1F3E52 100%);
  --gradient-glow: linear-gradient(135deg, #4A81A3 0%, #386783 100%);

  /* Phone button - green pill */
  --color-phone: #16A34A;
  --color-phone-dark: #15803D;
  --color-phone-soft: rgba(22, 163, 74, 0.10);

  --color-text: #0F172B;
  --color-text-secondary: #334155;
  --color-muted: #64748B;
  --color-bg: #FFFFFF;
  --color-bg-soft: #F8FAFC;
  --color-border: rgba(0,0,0,0.08);
  --header-bg: rgba(255,255,255,0.85);
  --header-blur: 20px;
  /* 72px was sized around an 80px-tall square logo. The lockup is 30px
     tall now and the touch targets inside need 44px, so 56px fits both
     with room and gives 16px back at the top of every page. */
  --header-height: 56px;
  --footer-bg: #0F172B;
  --footer-text: rgba(255,255,255,0.85);
  --footer-text-muted: rgba(255,255,255,0.6);
  --footer-divider: rgba(255,255,255,0.12);
  --container-max: 1280px;
  --container-padding: 20px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-cta: 0 8px 24px rgba(56, 103, 131, 0.30);
  --shadow-hover: 0 10px 30px rgba(56, 103, 131, 0.40);
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --font-sans: "Rubik", system-ui, -apple-system, "Segoe UI", "Heebo", Arial, sans-serif;
}

body {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: clip;
}

/* A11Y */
.skip-link {
  position: absolute;
  right: -9999px;
  top: 0;
  background: #fff;
  color: #386783;
  padding: 8px 14px;
  z-index: 10000;
  border: 2px solid #386783;
  text-decoration: none;
  font-weight: 700;
}
.skip-link:focus {
  right: 8px;
  top: 8px;
  outline: 2px solid #386783;
  outline-offset: 2px;
}
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid #386783;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============ SITE HEADER ============ */
/* max-width overrides hello-elementor/theme.css:296 — it clamps
   .site-header:not(.dynamic-header) to 1140px at >=1200px viewports,
   which cancels the 100vw full-bleed. */
.site-header {
  width: 100vw !important;
  max-width: none !important;
  margin-inline: calc(50% - 50vw) !important;
  background: #fff;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
/* Touch targets - WCAG 2.5.5 / AA */
.site-header a,
.site-header button {
  min-height: 44px;
  padding-inline: 12px;
  display: inline-flex;
  align-items: center;
}
@media (prefers-reduced-motion: reduce) {
  .site-header *,
  .mega-menu,
  .site-footer * {
    transition: none !important;
    animation: none !important;
  }
}
.site-header::before,
.site-header::after {
  display: none !important;
}
.site-header__inner {
  border: none !important;
  box-shadow: none !important;
}

.site-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  height: var(--header-height);
  padding: 0 var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.site-header__logo img {
  display: block;
  height: 40px;
  width: auto;
}

.site-header__nav { display: none; }

.main-menu {
  display: flex;
  align-items: center;
  gap: 4px;
}
.main-menu > li > a,
.main-menu > li > .menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background-color var(--transition);
  position: relative;
  cursor: pointer;
  background: transparent;
  border: none;
  white-space: nowrap;
  font-family: inherit;
}
.main-menu > li > a::after,
.main-menu > li > .menu-trigger::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--gradient-cta);
  border-radius: 2px;
  transition: width var(--transition);
}
.main-menu > li > a:hover::after,
.main-menu > li > .menu-trigger:hover::after,
.main-menu > li > .menu-trigger[aria-expanded="true"]::after {
  width: 20px;
}
.main-menu > li > a:hover,
.main-menu > li > .menu-trigger:hover,
.main-menu > li > .menu-trigger[aria-expanded="true"] {
  color: var(--color-brand);
}
.main-menu > li.current-menu-item > a {
  color: var(--color-brand);
  font-weight: 700;
}
.site-header__nav a.active,
.site-header__nav a[aria-current="page"] { font-weight: 800; }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Phone button - green pill */
.site-header__phone {
  display: none;
  align-items: center;
  gap: 6px;
  color: white;
  font-weight: 700;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: var(--radius-full);
  background: var(--color-phone);
  box-shadow: 0 4px 12px rgba(22,163,74,0.25);
  transition: all var(--transition);
  white-space: nowrap;
}
.site-header__phone:hover {
  background: var(--color-phone-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(22,163,74,0.35);
}
.site-header__phone svg {
  width: 15px;
  height: 15px;
}

/* CTA button - gradient turquoise */
.site-header__cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  background: var(--gradient-cta);
  color: white;
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-cta);
  transition: all var(--transition);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.site-header__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-cta-hover);
  opacity: 0;
  transition: opacity var(--transition);
}
.site-header__cta:hover::before { opacity: 1; }
.site-header__cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.site-header__cta > * {
  position: relative;
  z-index: 1;
}

.site-header__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-text);
  transition: background-color var(--transition);
}
.site-header__burger:hover { background: rgba(0,0,0,0.05); }
/* Icon box is forced: without this the svg renders ~2px wide inside the button. */
.site-header__burger svg {
  width: 24px !important;
  min-width: 24px;
  height: 24px !important;
  flex: 0 0 24px;
  display: block;
}

/* ============ MEGA MENU (.has-mega-menu) ============ */
.has-mega-menu {
  position: static; /* so the dropdown can span the full header width */
}

.menu-trigger svg {
  transition: transform var(--transition);
  pointer-events: none;
}
.menu-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.menu-trigger {
  pointer-events: auto;
}
.menu-trigger * {
  pointer-events: none; /* SVG/span must not steal clicks from the button */
}

.mega-menu {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  background: white;
  border-top: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  padding: 32px 40px;
  z-index: 40;
}
.mega-menu[hidden] { display: none; }

.mega-menu__grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.mega-menu__col h4 {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-brand);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.mega-menu__col a {
  display: block;
  padding: 8px 0;
  font-size: 14px;
  color: #383838;
  transition: color 0.15s ease;
}
.mega-menu__col a:hover {
  color: var(--color-brand);
}

/* Mobile: mega menu becomes stacked in mobile menu */
@media (max-width: 1023px) {
  .mega-menu {
    position: static;
    padding: 12px 0;
    box-shadow: none;
    border-top: none;
  }
  .mega-menu__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* MOBILE MENU */
.mobile-menu {
  position: fixed;
  top: 60px; /* matches .site-header height at <=767px, see RESPONSIVE below */
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid rgba(0,0,0,0.08);
  padding: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  z-index: 49;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu ul { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu a {
  display: block;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 500;
  color: #1A1A1A;
  border-radius: 8px;
}
.mobile-menu a:hover { background: rgba(0,0,0,0.05); }

/* FOOTER CTA BANNER */
.footer-cta {
  background: var(--gradient-cta);
  padding: 48px 20px;
  position: relative;
  overflow: hidden;
}
.footer-cta::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 60%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
  transform: rotate(-15deg);
}
.footer-cta__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.footer-cta__text h2 {
  color: white;
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}
.footer-cta__text p {
  color: rgba(255,255,255,0.9);
  font-size: 16px;
}
.footer-cta__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  background: white;
  color: var(--color-brand-dark);
  font-weight: 800;
  font-size: 16px;
  border-radius: var(--radius-full);
  box-shadow: 0 10px 30px rgba(0,0,0,0.20);
  transition: all var(--transition);
}
.footer-cta__button:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.30);
}
@media (min-width: 768px) {
  .footer-cta__inner {
    flex-direction: row;
    text-align: right;
    justify-content: space-between;
  }
  .footer-cta__text h2 { font-size: 32px; }
}

/* FOOTER */
.site-footer { background: var(--footer-bg); color: var(--footer-text); margin-top: 60px; }
.site-footer__col--brand .site-footer__logo-text {
  background: var(--gradient-glow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.site-footer__ext-link {
  background: rgba(34, 211, 238, 0.15);
  color: var(--color-brand-glow) !important;
  border: 1px solid rgba(34, 211, 238, 0.3);
  display: inline-flex;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  transition: background var(--transition);
}
.site-footer__ext-link:hover {
  background: rgba(34, 211, 238, 0.25);
}
.site-footer__grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 48px var(--container-padding) 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.site-footer__col h3 {
  color: white;
  font-size: 16px;
  font-weight: 800;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--footer-divider);
}
.site-footer__col p { color: var(--footer-text-muted); font-size: 14px; line-height: 1.75; margin-bottom: 12px; }
.site-footer__col ul { display: flex; flex-direction: column; gap: 8px; }
.site-footer__col li a, .site-footer__col a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--footer-text-muted);
  font-size: 14px;
  transition: color var(--transition);
}
.site-footer__col li a::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-brand-glow);
  flex-shrink: 0;
}
.site-footer__col a:hover { color: var(--color-brand-glow); }
.site-footer__contact { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.site-footer__contact a { text-decoration: none; }
.site-footer__contact svg { width: 14px; height: 14px; color: var(--color-brand-glow); }
.site-footer__legal {
  border-top: 1px solid var(--footer-divider);
  padding: 20px var(--container-padding);
  text-align: center;
}
.site-footer__legal p {
  color: var(--footer-text-muted);
  font-size: 12px;
  line-height: 1.6;
  max-width: var(--container-max);
  margin: 0 auto;
}

/* RESPONSIVE */
@media (max-width: 767px) {
  .site-header {
    height: 60px;
  }

  .site-header__inner {
    padding: 0 12px !important;
    gap: 8px !important;
  }

  .site-header__logo img {
    width: 110px;
    height: 19px;
  }

  .site-header__phone {
    display: inline-flex;
    padding: 7px 10px;
    font-size: 12px;
    white-space: nowrap;
  }
  .site-header__phone span {
    display: none; /* mobile: icon only */
  }

  .site-header__cta {
    padding: 8px 12px !important;
    font-size: 11px !important;
    white-space: nowrap;
  }

  .site-header__actions {
    gap: 6px;
  }

  .site-header__burger {
    width: 36px;
    height: 36px;
  }

  /* Prevent overflow entirely */
  .site-header__actions {
    flex-shrink: 0;
  }
  .site-header__logo {
    min-width: 0;
    overflow: hidden;
  }

  .footer-cta { padding: 32px 16px; }
  .footer-cta__text h2 { font-size: 22px; }
  .footer-cta__button { padding: 14px 24px; font-size: 14px; }
}

@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.4fr; gap: 28px; padding: 60px 32px 40px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .site-header { height: 64px; }
  .site-header__inner { padding: 0 24px; gap: 16px; }
  .mobile-menu {
    top: 64px;
    max-height: calc(100vh - 64px);
  }
  .site-header__logo img { width: 160px; height: 28px; }
  .site-header__cta { padding: 10px 20px; font-size: 13px; }
  .site-header__phone { display: inline-flex; padding: 7px 12px; font-size: 12px; }
  .site-header__phone span { display: inline; }
}

@media (min-width: 1024px) {
  .site-header__nav { display: flex; }
  .site-header__phone { display: inline-flex; }
  .site-header__burger { display: none; }
  /* 9 nav items + logo + phone + CTA overflow a 1280px row at default
     sizing, so the row is tightened here rather than letting it clip. */
  .main-menu { gap: 0; }
  .main-menu > li > a,
  .main-menu > li > .menu-trigger {
    padding: 8px 9px;
    font-size: 13px;
  }
  .site-header__inner { gap: 12px; }
  .site-header__logo img { width: 150px; height: 26px; }
}

/* ============ SITE FOOTER (new de-Elementor) ============ */
.site-footer{
  width: 100vw !important;
  max-width: none !important;
  margin-inline: calc(50% - 50vw) !important;
  position: relative;
  background:#EAEFF3;
  color:#4A5568;
  font-family: Rubik, system-ui, -apple-system, sans-serif;
  padding-block: 48px 24px; margin-top: 64px;
}
.site-footer__inner{
  max-width:1200px; margin:0 auto; padding-inline:24px;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:32px;
}
.site-footer h2{ color:#225675; font-size:20px; font-weight:600; margin:0 0 16px; }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer li{ display:flex; align-items:flex-start; gap:8px; margin-block:8px; line-height:1.5; }
.site-footer li svg.bullet{ flex:0 0 12px; width:12px; height:12px; margin-top:6px; fill:#4A95D1; }
.site-footer a{ color:#386783; text-decoration:underline; text-underline-offset:2px; }
.site-footer a:hover, .site-footer a:focus-visible{ text-decoration-thickness:2px; }
.site-footer__logo{ display:block; margin-bottom:16px; }
.site-footer__logo img{ height:40px; width:auto; }
.site-footer address{ font-style:normal; margin-block:12px; }
.site-footer__social{ display:flex; gap:10px; margin-top:12px; }
.site-footer__social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px;
  background:#386783; color:#fff; text-decoration:none;
}
.site-footer__social svg{ width:20px; height:20px; fill:#fff; }
.site-footer__badge img{ max-width:100%; height:auto; }
@media (max-width: 900px){ .site-footer__inner{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 520px){ .site-footer__inner{ grid-template-columns:1fr; } }

/* ============ Kill Elementor Theme Builder header/footer injection ============
   Elementor Pro registers on wp_body_open + wp_footer and injects
   .elementor-location-header / .elementor-location-footer regardless of what
   our child header.php / footer.php do. Removing its action hooks in PHP
   crashed the site last time (dependency load order), so hide via CSS. */
.elementor-location-header,
.elementor-location-footer,
[data-elementor-type="header"],
[data-elementor-type="footer"]{
  display: none !important;
}

/* ============ HAMBURGER visibility guard (belt-and-suspenders) ============
   At >=1024 nav is shown + burger hidden by the existing @media (min-width:1024)
   rule further down. This adds defensive class variants so anything that
   Elementor / a stray plugin renders as a hamburger stays hidden on desktop. */
@media (min-width: 1024px){
  .site-header__burger,
  .site-header__hamburger,
  [class*="hamburger"],
  [class*="mobile-menu-toggle"],
  .menu-toggle{
    display: none !important;
  }
}

/* ============ Compact dropdowns (סניפים / מחשבונים) ============
   .has-mega-menu is position:static so the wide multi-column panels can span
   the full header. A compact panel is one short list, so its li anchors it
   instead and the panel sizes to its content. Class-scoped, not #id-scoped,
   so any future short dropdown gets it by adding has-mega-menu--compact. */
@media (min-width: 1024px){
  .has-mega-menu--compact{ position: relative; }
  .has-mega-menu--compact .mega-menu{
    right: 0;
    left: auto;
    width: max-content;
    min-width: 260px;
    padding: 12px 16px;
  }
}
.has-mega-menu--compact .mega-menu__col a {
  padding: 8px 12px;
  border-radius: 6px;
  white-space: nowrap;
}
.has-mega-menu--compact .mega-menu__col a:hover,
.has-mega-menu--compact .mega-menu__col a:focus-visible {
  background: #EAEFF3;
  color: #386783;
}

/* ============ Wide panels: column count + height cap ============
   The full LIVE nav is ~130 links. The two wide panels carry 6 and 3 category
   columns, so the grid gets an explicit count and the rows are top-aligned -
   without align-items:start a 21-link column would stretch its whole row and
   leave big dead gaps under the short ones. */
.mega-menu__grid { align-items: start; }
.mega-menu__grid--cols-1 { grid-template-columns: 1fr; }
.mega-menu__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.mega-menu__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }

@media (min-width: 1024px){
  /* 6 columns of 21 links would run past the fold, so the panel scrolls
     rather than being clipped by the viewport. */
  .has-mega-menu:not(.has-mega-menu--compact) .mega-menu{
    max-height: calc(100vh - var(--header-height) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mega-menu__col a { font-size: 13px; padding: 5px 0; line-height: 1.4; }
  .mega-menu__col h4 { font-size: 14px; }
  .mega-menu__col h4 a { color: inherit; text-decoration: none; }
  .mega-menu__col h4 a:hover { text-decoration: underline; }
}

/* Logo bigger. Overrides the per-breakpoint width/height pairs further up.
   56px inside a 72px header leaves 8px above and below; 60px left it flush
   against the header edges. */
.site-header__logo img {
  height: 56px !important;
  width: auto !important;
  max-height: 56px !important;
  display: block !important;
}
/* ...but 56px would nearly fill the 60px-tall mobile header. */
@media (max-width: 767px){
  .site-header__logo img {
    height: 40px !important;
    max-height: 40px !important;
  }
}
/* The 768-1023 band capped .site-header at 64px while .site-header__inner is
   --header-height (72px), so the inner row overflowed the header by 8px and
   clipped the enlarged logo. Match them. */
@media (min-width: 768px) and (max-width: 1023px){
  .site-header { height: var(--header-height) !important; }
  .mobile-menu {
    top: var(--header-height) !important;
    max-height: calc(100vh - var(--header-height)) !important;
  }
}

/* Hover-open on pointer devices. JS keeps aria-expanded in sync; this is the
   no-JS fallback and covers keyboard tabbing via :focus-within. */
@media (min-width: 900px) and (hover: hover) {
  .has-mega-menu:hover .mega-menu,
  .has-mega-menu:focus-within .mega-menu {
    display: block !important;
  }
}

/* ============ Sticky CTA bar (mobile only) ============ */
.sticky-cta-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  padding: 12px 16px;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
}
.sticky-cta-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1.2;
  width: 100%;
  padding: 10px 16px;
  background: #386783;
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.2s;
}
.sticky-cta-btn:hover,
.sticky-cta-btn:focus-visible {
  background: #2a5266;
  color: #fff;
}
.sticky-cta-amount { font-size: 16px; font-weight: 800; }
.sticky-cta-text { font-size: 12px; font-weight: 600; }
@media (max-width: 899px) {
  .sticky-cta-bar { display: block; }
  /* Clears the fixed bar so the footer's last row isn't trapped behind it. */
  body { padding-bottom: calc(80px + var(--tr-bottom-offset, 0px)); }
}

/* ============ Article template (content-article.php) ============ */
.page-container,
.article-single { max-width: 1000px; margin-inline: auto; padding-block: 2rem; padding-inline: clamp(20px, 4vw, 40px); }
.article-title,
.page-title { font-size: clamp(28px, 4.5vw, 42px); font-weight: 700; line-height: 1.2; color: #1F2937; }
.article-meta { color: #6B7280; font-size: 0.9rem; margin-block: 1rem; }
.breadcrumbs { padding-block: 1rem; font-size: 0.9rem; }
/* Line the trail up with the article text. The nav is a child of the full-width
   .container while the article is a 1000px column with its own side padding, so
   the trail started further out than the text. Same cap, same padding as
   .article-single. Scoped to .container > .breadcrumbs: page.php and the archive
   templates already nest it inside a capped, padded column, and a bare
   .breadcrumbs rule would pad it twice. [class*="breadcrumb"] is deliberately not
   used - Yoast puts .breadcrumb_last on an inner span. */
.container > .breadcrumbs { max-width: 1000px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); text-align: right; }
/* The trail keeps 8px above and below instead of the generic 1rem. The brief asked
   for margin-top:16px here, but the 1rem padding above is already there, so that
   would have ADDED 16px above the breadcrumbs. */
.container > .breadcrumbs { padding-block: 8px; }
.article-form { background: #EAEFF3; padding: 2rem; border-radius: 8px; margin-block: 2rem; }
.toc { background: #F9FAFB; border-inline-start: 4px solid #386783; padding: 1rem; margin-block: 0; }
.toc ul { list-style: none; margin: 0; padding-inline-start: 0; }
.toc li { margin-block: 0.35rem; line-height: 1.5; }
.toc .toc-h3 { padding-inline-start: 1rem; }
.faq-accordion details { border: 1px solid #E5E7EB; border-radius: 6px; margin-block: 0.5rem; padding: 1rem; }
.faq-accordion summary { cursor: pointer; font-weight: 600; color: #225675; }
.author-box { display: flex; gap: 1rem; align-items: start; background: #F9FAFB; padding: 1.5rem; border-radius: 8px; }
.author-box img { border-radius: 50%; flex-shrink: 0; }
.share-buttons { display: flex; gap: 0.5rem; margin-block: 1rem; flex-wrap: wrap; }
.share-buttons a, .share-buttons button {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  background: #EAEFF3;
  color: #386783;
  border: 1px solid #386783;
  font: inherit;
  cursor: pointer;
}
.floating-cta {
  position: fixed;
  bottom: 10px;
  inset-inline-end: 10px;
  background: #003E63;
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  z-index: 999;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  text-align: center;
}
.floating-cta-amount { font-weight: 700; font-size: 1.1rem; }
.floating-cta-text { font-size: 0.85rem; }
/* The Task-1 .sticky-cta-bar already owns the bottom of the mobile viewport,
   so the floating CTA is desktop-only - otherwise they stack and overlap. */
@media (max-width: 899px) {
  .floating-cta { display: none; }
}
@media print {
  .floating-cta, .share-buttons, .toc, .sticky-cta-bar { display: none !important; }
}

/* ============ Modal system (popups converted from Elementor) ============ */
.tr-modal {
  border: none;
  padding: 0;
  max-width: 802px;
  width: 90%;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  position: relative;
}
.tr-modal::backdrop { background: rgba(0,0,0,0.5); }
.tr-modal-close {
  position: absolute;
  top: 0.5rem;
  inset-inline-end: 0.5rem;
  background: transparent;
  border: none;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  color: #4A5568;
}
.tr-modal-content { padding: 2rem; }

/* CTA button component ([tr_cta_button]) */
.tr-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s;
}
.tr-cta-button--primary { background: #386783; color: #fff; }
.tr-cta-button--primary:hover,
.tr-cta-button--primary:focus-visible { background: #2a5266; color: #fff; }
.tr-cta-button--secondary {
  background: #EAEFF3;
  color: #386783;
  border: 1px solid #386783;
}

/* ============ Mobile menu accordion ============
   The mobile menu carries the full 138-link tree. Flat, that is a single
   scroll of ~140 rows; grouped, it opens as 9 rows. The markup is
   <details>/<summary> (header.php, 'mobile' mode), so open/close, keyboard
   operation and the expanded state are all native and no JS touches it. */

.mobile-menu__item { list-style: none; }

.mobile-menu__group {
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.mobile-menu__group:last-child { border-bottom: 0; }

.mobile-menu__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* 44px is the minimum comfortable tap target. */
  min-height: 44px;
  padding: 11px 16px;
  font-size: 15px;
  font-weight: 600;
  color: #1A1A1A;
  cursor: pointer;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}

/* Kill the default disclosure triangle in every engine; the SVG chevron
   replaces it so the arrow sits on the correct side in RTL. */
.mobile-menu__summary { list-style: none; }
.mobile-menu__summary::-webkit-details-marker { display: none; }
.mobile-menu__summary::marker { content: ""; }

.mobile-menu__summary:hover { background: rgba(0,0,0,0.04); }
.mobile-menu__summary:focus-visible {
  outline: 2px solid #386783;
  outline-offset: 2px;
}

.mobile-menu__summary .menu-arrow {
  flex: 0 0 auto;
  transition: transform 180ms ease;
}
.mobile-menu__group[open] > .mobile-menu__summary .menu-arrow,
.mobile-menu__subgroup[open] > .mobile-menu__summary .menu-arrow {
  transform: rotate(180deg);
}

.mobile-menu__panel {
  padding: 2px 0 10px;
}

/* Second level, for the groups big enough to need it (סיבות להחזר מס is 77
   links across 6 sub-categories). */
.mobile-menu__subgroup {
  border-top: 1px solid rgba(0,0,0,0.05);
}
.mobile-menu__subgroup:first-child { border-top: 0; }

.mobile-menu__summary--sub {
  font-size: 14px;
  font-weight: 500;
  color: #386783;
  padding-inline-start: 28px;
  min-height: 40px;
}

.mobile-menu__sublist { padding-bottom: 6px; }

/* Logical padding so the indent flips correctly in RTL. */
.mobile-menu__panel > a,
.mobile-menu__sublist > a {
  font-size: 14px;
  font-weight: 400;
  padding-block: 9px;
  padding-inline-start: 40px;
}
.mobile-menu__panel > a { padding-inline-start: 28px; }

/* A link to the category's own landing page, above its children. */
.mobile-menu__overview { font-weight: 600 !important; }

/* Opening can be animated; closing cannot, because <details> removes the
   content from the flow the moment `open` is dropped. Animating the close
   would mean reimplementing the element in JS, which is the thing this
   markup exists to avoid. */
@keyframes trMobilePanelIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mobile-menu__group[open] > .mobile-menu__panel,
.mobile-menu__subgroup[open] > .mobile-menu__sublist {
  animation: trMobilePanelIn 180ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu__group[open] > .mobile-menu__panel,
  .mobile-menu__subgroup[open] > .mobile-menu__sublist { animation: none; }
  .mobile-menu__summary .menu-arrow { transition: none; }
}

/* ============ Phase 2B: rebuilt Elementor templates ============ */

.tr-icon { flex: 0 0 auto; vertical-align: -0.15em; }

/* 16183 */
.tr-branch-heading {
  font-size: 24px;
  font-weight: 700;
  color: #386783;
  margin: 24px 0 12px;
}

/* 16186 */
.tr-highlight {
  padding: 16px 20px;
  border-radius: 10px;
  margin: 20px 0;
  border-inline-start: 4px solid #E0A800;
  background: #FFF8E1;
}
.tr-highlight p { margin: 0; font-size: 16px; line-height: 1.6; }
.tr-highlight--amber strong { color: #8A6100; }

/* 21934 + 7142: one-line meta rows */
.tr-updated,
.tr-deadline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #5A6672;
  margin: 12px 0;
}

/* 14871: phones only.
   Hidden by CSS and not by a PHP device check, because this markup is page
   cached - a server-side check would store one device's answer for everyone. */
.tr-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.tr-wa-btn:hover,
.tr-wa-btn:focus-visible { background: #1FB855; color: #fff; }
@media (min-width: 768px) {
  .tr-wa-btn { display: none; }
}

/* 7171 */
.tr-calc-cta { margin: 20px 0; }
.tr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* 48px, not 44px: Lighthouse scores touch targets against 48. */
  min-height: 48px;
  min-width: 48px;
  padding: 12px 24px;
  border: 0;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}
.tr-btn--primary { background: #386783; color: #fff; }
.tr-btn--primary:hover,
.tr-btn--primary:focus-visible { background: #2C5268; color: #fff; }
.tr-btn:focus-visible { outline: 2px solid #386783; outline-offset: 2px; }

/* ============ Archive / category / search / 404 templates ============ */
/*
 * These five templates set their own max-width rather than leaning on
 * `.container`, which has no rule in this file and none in the parent theme -
 * it was being styled by Elementor. Taking the width locally is what makes the
 * archives survive Elementor being switched off.
 */
.archive-container,
.error-404 {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 2rem var(--container-padding);
}
.archive-header { margin-block-end: 2rem; }
.archive-title {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  color: var(--color-brand);
  margin-block: 0 0.5rem;
}
.archive-description,
.error-404__lead,
.search-count { color: var(--color-text-secondary); line-height: 1.7; }
.archive-empty { color: var(--color-muted); margin-block: 1.5rem; }
.search-term { color: var(--color-text); }

.term-children ul,
.term-children > ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; }
.term-children li { margin: 0; }
.term-children a {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-full);
  color: var(--color-brand);
  background: var(--color-bg);
  text-decoration: none;
  font-size: 0.9rem;
}
.term-children a:hover,
.term-children a:focus-visible { background: var(--color-brand); color: #fff; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-block: 2rem; }
@media (max-width: 900px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } }
.post-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}
.post-card__link { display: block; color: inherit; text-decoration: none; }
.post-card__image { width: 100%; height: auto; border-radius: var(--radius-sm); }
.post-card__title { font-size: 1.05rem; color: var(--color-brand); margin-block: 0.75rem 0; }
.post-card__link:hover .post-card__title,
.post-card__link:focus-visible .post-card__title { text-decoration: underline; }
.post-card__meta { color: var(--color-muted); font-size: 0.8rem; margin-block: 0.4rem; }
.post-card__excerpt { color: var(--color-text-secondary); font-size: 0.9rem; line-height: 1.6; margin-block-end: 0; }

/* the_posts_pagination() markup */
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-block: 2rem; }
.pagination .page-numbers {
  display: inline-block;
  min-width: 2.5rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-brand);
  text-align: center;
  text-decoration: none;
}
.pagination .page-numbers.current { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus-visible { background: var(--color-brand-soft); }
.pagination .page-numbers.dots { border-color: transparent; }

/* get_search_form() renders core's markup; these are its class names. */
.search-form-wrap { margin-block: 1.5rem; }
.search-form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.search-form label { flex: 1 1 14rem; margin: 0; }
.search-form .search-field {
  width: 100%;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
}
.search-form .search-field:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 1px; }
.search-form .search-submit {
  padding: 0.6rem 1.4rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--gradient-cta);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.search-form .search-submit:hover,
.search-form .search-submit:focus-visible { background: var(--gradient-cta-hover); }

/* ============ PHASE 6 — .container fallback width ============ */
/*
 * `.container` had no rule in this file and none in the parent theme: it was
 * being styled by Elementor. page.php and content-article.php both wrap their
 * content in it, so with Elementor off they lost their page width and their
 * side padding - on a phone that means body text touching the viewport edge.
 *
 * Written with :where() deliberately. :where() contributes ZERO specificity, so
 * this is a true fallback: while Elementor (or anything else) still defines
 * .container, that definition wins without needing !important anywhere, and
 * this rule only takes effect where nothing else sets these properties. That is
 * what makes it safe to add while Elementor is still active.
 */
:where(.container) {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Shown only when the article form's shortcode is not registered. */
.article-form__fallback { margin: 0; color: var(--color-text-secondary); }

/* ============ Article UX pass: layout, type scale, sticky header, TOC ============ */

/* ---- Layout: single column --------------------------------------------------
   No grid and no sidebar: the TOC is a collapsed <details> in the flow. The
   earlier 3-column grid (.article-layout / .toc-wrap) is gone, in markup and CSS.
   min-width:0 stops a long unbroken string stretching the column. */
.article-col { min-width: 0; }
.article-body { min-width: 0; }

/* Every anchor jump and scrollIntoView must land below the sticky header.
   --tr-header-h is the header's real height, set by theme.js (105px desktop, 60px
   mobile). The --header-height token says 72px, and the brief's 96/108px guesses
   are not the rendered values either, so none of them is used.

   scroll-padding-top goes on html, not body: it applies to the scroll CONTAINER,
   and the viewport scroller is the root element. On body it does nothing.
   It replaces the per-element scroll-margin-top this rule used to set on
   .article-body h2/h3 and #Contact - the two are additive, so keeping both would
   have landed every anchor about 120px too low. The header is position:sticky, so
   it is in the flow and no padding-top on main is needed. */
html { scroll-padding-top: calc(var(--tr-header-h, 105px) + 16px); }

/* ---- Typography scale -------------------------------------------------------
   Scoped to the article and page templates, NOT to bare h1/h2/h3/p/li: a global
   rule would also repaint the footer (dark background, light text - a global
   dark-grey p/li colour makes it unreadable), the mega menu and every Elementor
   page that has not been migrated. The calculator needs no exclusion: its
   .tr-calc-isolated wrapper reverts outside styles at higher specificity. */
.article-single h2,
.page-container h2 {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  color: #1F2937;
  margin-block: 3rem 1rem;
}
.article-single h3,
.page-container h3 {
  font-size: clamp(17px, 2.5vw, 20px);
  font-weight: 600;
  color: var(--color-brand);
  margin-block: 2rem 0.5rem;
}
.article-col :is(p, li),
.page-content :is(p, li) {
  font-size: 16px;
  line-height: 1.75;
  color: #374151;
}
.toc li { line-height: 1.5; }
.author-box h2 { margin-block-start: 0; font-size: 1.1rem; }
.article-form h2 { margin-block-start: 0; }

/* ---- Sticky header ----------------------------------------------------------
   Only .site-header. The brief's `header` selector would also have made every
   .article-header / .archive-header / .page-header sticky.
   Note: backdrop-filter makes this element the containing block for its fixed
   descendants, and #mobile-menu is position:fixed inside it. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* ---- Reading progress -------------------------------------------------------- */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--color-brand, #386783);
  z-index: 99;
  transition: width 0.1s linear;
}
@media (prefers-reduced-motion: reduce) {
  .reading-progress { transition: none; }
}

/* ---- Key takeaways ----------------------------------------------------------
   Logical properties: in RTL the start side is the right, which is where the
   rule goes, and the square corners belong on the side that carries the rule. */
.key-takeaways {
  border-inline-start: 4px solid var(--color-brand, #386783);
  background: #F8FAFC;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  margin: 1.5rem 0;
}
.key-takeaways .kt-title {
  font-weight: 700;
  color: #1F2937;
  margin-bottom: 0.5rem;
  font-size: 1.05em;
}
.key-takeaways ul { margin: 0; padding-inline-start: 1.2em; }
.key-takeaways p:last-child { margin-bottom: 0; }

/* ---- TOC: a collapsed <details>, at every width ----------------------------
   Closed by default (no `open` attribute in the markup). */
/* Shrink-to-fit and capped at 320px, so the TOC sits at the start edge (the right,
   in RTL) instead of spanning the column. display:block + width:fit-content, not
   inline-block: same result, but an inline-block leaves a line-box gap under it. */
.toc-collapsed { display: block; width: fit-content; max-width: 320px; margin: 1rem 0 1.5rem; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; }
.toc-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 14px;
  list-style: none;
}
.toc-trigger::-webkit-details-marker { display: none; }
.toc-trigger:focus-visible { outline: 2px solid var(--color-brand, #386783); outline-offset: 2px; border-radius: 8px; }
.toc-chevron { display: inline-block; transition: transform 0.2s; }
.toc-collapsed[open] .toc-chevron { transform: rotate(180deg); }
.toc-collapsed nav.toc { margin: 0; padding: 0 14px 12px; border-radius: 0 0 8px 8px; }
@media (prefers-reduced-motion: reduce) { .toc-chevron { transition: none; } }

/* ============ Featured image, floating widgets, related articles ============ */

/* ---- Featured image ---------------------------------------------------------
   aspect-ratio reserves the box before the image loads, so it cannot shift the
   layout; object-fit crops whatever ratio the upload has to 21:9 (wide and short,
   because the image now sits at the foot of the article). */
.article-featured { margin: 2rem 0; border-radius: 12px; overflow: hidden; }
.article-featured-img { width: 100%; height: auto; display: block; aspect-ratio: 21 / 9; object-fit: cover; }
.article-featured figcaption { padding: 8px 12px; font-size: 13px; color: #64748B; background: #F8FAFC; }

/* ---- Floating widgets -------------------------------------------------------
   Four things are fixed to the bottom of an article page: .floating-cta
   (inset-inline-end:10px, which is the LEFT in RTL), the mobile .sticky-cta-bar
   (full width, shown up to 899px), and the two below. The brief's 24px bottom
   put .back-to-top directly underneath .floating-cta, which is also the higher
   z-index, so the arrow would have been drawn behind it. It is stacked above the
   CTA instead. The mobile offsets use 899px, not 768px, to match the sticky bar:
   between 769 and 899 the bar is showing and a 24px offset sat behind it. */
.back-to-top {
  position: fixed;
  bottom: 90px;
  right: 32px;
  left: auto;
  z-index: 95;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--color-brand, #386783);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  opacity: 0;
  transform: translateY(10px);
  /* Not just transparent: an invisible button must not take keyboard focus or
     clicks. */
  visibility: hidden;
  pointer-events: none;
}
.back-to-top[data-visible="true"] { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; }
.back-to-top:hover { background: var(--color-brand-dark, #2A506A); }
.back-to-top:focus-visible { outline: 2px solid #1F2937; outline-offset: 2px; }

.trust-badge {
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: auto;
  z-index: 94;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--color-brand, #386783);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s, background 0.2s, opacity 0.2s;
}
/* Near-transparent on purpose. This is a reassurance badge, not a call to
   action, and it was pulling the eye away from the refund CTA. It now recedes:
   a faint tint, muted text, a hairline border. On hover it comes forward a
   little for anyone who does want it. (Eden, 01.11.2026.) */
.trust-badge {
  background: rgba(255, 255, 255, 0.55) !important;
  color: #64748b !important;
  border: 1px solid rgba(56, 103, 131, 0.18);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0.85;
}
.trust-badge:hover { background: rgba(255, 255, 255, 0.95) !important; color: #386783 !important; transform: translateY(-2px); opacity: 1; }
.trust-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(56, 103, 131, 0.12);
  color: #64748b;
  font-weight: 900;
  font-size: 12px;
}
@media (max-width: 899px) {
  .back-to-top { bottom: 88px; right: 24px; left: auto; width: 40px; height: 40px; }
  .trust-badge { bottom: 88px; left: 16px; right: auto; font-size: 11px; padding: 8px 10px; }
  .trust-badge-icon { width: 18px; height: 18px; font-size: 10px; }
}
@media print { .back-to-top, .trust-badge { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .back-to-top, .trust-badge { transition: none; }
}

/* ---- Related articles (no thumbnails) ----------------------------------------
   The whole card is clickable: the title link is stretched over it with ::after,
   which keeps a single link per card (no nested anchors, no duplicate link for a
   screen reader) while the excerpt stays plain text. */
.related-articles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 3rem;
}
.related-item {
  position: relative;
  padding: 16px 20px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.related-item:hover,
.related-item:focus-within { border-color: var(--color-brand, #386783); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); }
.related-link { text-decoration: none; }
.related-link::after { content: ""; position: absolute; inset: 0; }
.related-title { font-size: 17px; font-weight: 600; color: var(--color-brand, #386783); margin: 0 0 8px; line-height: 1.4; }
.related-item a { text-decoration: none; }
.related-excerpt { font-size: 14px; color: #64748B; line-height: 1.6; margin: 0; }

/* ============ Header, headline, floating CTA ============ */

/* ---- Centred headline ---------------------------------------------------- */
.article-header h1,
.article-single h1,
h1.entry-title { text-align: center; }
/* Tighter headline spacing. No !important: the only competing margins are the
   user-agent / parent-theme element rules, which lose on specificity. */
.article-header h1,
.article-single h1,
h1.entry-title { margin-block: 1rem 0.5rem; }
/* The space above the headline is .article-single padding-top (2rem originally),
   not the h1 margin or .article-header, which has none. Now 0 for the article
   only: .page-container shares the 2rem rule and is left alone. The headline
   keeps its own 1rem margin-top, which collapses through the padding-less
   .article-header. */
.article-single { padding-block-start: 0; }
/* The byline under a centred title would otherwise sit start-aligned. */
.article-header .article-meta { text-align: center; }

/* ---- Floating CTA -----------------------------------------------------------
   Moved to the right. The old rule positions it with inset-inline-end, which is
   the LEFT in RTL, so left and inset-inline-end are both reset here: setting
   only right would leave left:10px in place and stretch the fixed box across the
   viewport.
   display lives inside the 900px media query on purpose. The existing rule hides
   this at max-width 899px because the mobile .sticky-cta-bar owns the bottom
   edge; setting display here unconditionally would undo that. */
/* 01.11.2026: the floating CTA is now a prominent pill with a coin icon, in the
   orange accent rather than the brand blue, so it reads as an action and stands
   out against a blue-and-white page. A slow shadow pulse draws the eye without
   moving layout; it is switched off for reduced-motion. "תוך דקה" is gone. */
.floating-cta {
  position: fixed;
  bottom: 24px;
  right: 24px;
  left: auto;
  inset-inline-end: auto;
  z-index: 95;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 13px;
  border-radius: 999px;
  background: var(--color-accent, #E8743B);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(232, 116, 59, 0.42), 0 2px 8px rgba(0, 0, 0, 0.18);
  animation: trFloatPulse 2.6s ease-in-out infinite;
}
@keyframes trFloatPulse {
  0%, 100% { box-shadow: 0 10px 28px rgba(232, 116, 59, 0.42), 0 2px 8px rgba(0, 0, 0, 0.18); }
  50%      { box-shadow: 0 10px 36px rgba(232, 116, 59, 0.66), 0 2px 8px rgba(0, 0, 0, 0.2); }
}
@media (prefers-reduced-motion: reduce) { .floating-cta { animation: none; } }
@media (min-width: 900px) { .floating-cta { display: inline-flex; } }
.floating-cta:hover { background: #d4632e; color: #fff; transform: translateY(-1px); }
.floating-cta .cta-icon {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  font-size: 20px; font-weight: 800; line-height: 1;
}
.floating-cta .cta-copy { display: flex; flex-direction: column; align-items: flex-start; text-align: start; }
.cta-amount { font-size: 16px; font-weight: 800; line-height: 1.15; }
.cta-text { font-size: 11.5px; font-weight: 600; margin-top: 2px; opacity: 0.95; }

/* ---- Byline row + inline table of contents -----------------------------------
   The TOC chip shares the byline's line. The open panel is absolutely positioned
   so expanding it never pushes the article down (no gap). */
.article-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.8rem;
  margin-block: 1rem;
}
.article-header .article-meta-row .article-meta { margin: 0; text-align: center; }

.toc-collapsed.toc-inline {
  position: relative;
  display: inline-block;
  width: auto;
  max-width: none;
  margin: 0;
  border: 0;
  background: transparent;
}
.toc-inline > .toc-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-brand, #386783);
  background: #eef2f6;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
}
.toc-inline > .toc-trigger:hover { background: #e2e9ef; }
.toc-inline nav.toc {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 60;
  min-width: 250px;
  max-width: min(90vw, 340px);
  max-height: 60vh;
  overflow: auto;
  margin: 0;
  padding: 0.5rem 0.9rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-inline-start: 4px solid #386783;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
  text-align: start;
}
@media (max-width: 560px) {
  .toc-inline nav.toc { inset-inline: auto 0; min-width: 210px; }
}

/* ---- Header: bigger logo and nav ---------------------------------------------
   The selectors in the brief (.site-logo, .custom-logo, .site-navigation) do not
   exist in this theme: the markup is .site-header__logo and .main-menu. The
   existing logo rule is !important, so this one has to be too.
   The image file is 1200x1200 (square) although header.php declares
   width="210" height="56"; at 72px tall it is 72px wide, so the 240px cap never
   bites. object-fit keeps it undistorted if it ever did. */
.site-header__logo { display: flex; align-items: center; min-height: 90px; }
.site-header__logo img {
  height: 80px !important;
  max-height: 80px !important;
  width: auto !important;
  max-width: 280px !important;
  object-fit: contain;
}
@media (max-width: 768px) {
  .site-header__logo { min-height: 60px; }
  .site-header__logo img { height: 56px !important; max-height: 56px !important; max-width: 200px !important; }
}
/* 15px only from 1200px. Measured at 1100px: logo + nine items at 15px + the
   actions need ~1150px, so the header overflowed the viewport and pushed the
   CTA off the edge. Between 1024 and 1199 the existing 13px stays. */
@media (min-width: 1200px) {
  .main-menu > li > a,
  .main-menu > li > .menu-trigger { font-size: 15px; font-weight: 500; }
}

/* ---- Phone: outline in the brand colour -----------------------------------
   Scoped to .site-header__phone, the only green phone button in the theme (it is
   the only a[href^="tel:"] in header.php, footer.php and shortcodes.php). The
   brief's bare a[href^="tel:"] with !important would also restyle any tel: link
   inside the calculator or an article, and the calculator's isolation reset is
   not !important so it could not defend itself.
   .site-header a already sets padding-inline:12px at (0,1,1), so this is written
   at (0,2,0). Padding is only changed from 768px up: below that the icon-only
   button has its own smaller padding. */
.site-header .site-header__phone {
  background: transparent;
  color: var(--color-brand, #386783);
  border: 1.5px solid var(--color-brand, #386783);
  border-radius: 8px;
  box-shadow: none;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
@media (min-width: 768px) {
  .site-header .site-header__phone { padding: 8px 14px; }
}
.site-header .site-header__phone:hover,
.site-header .site-header__phone:focus-visible {
  background: var(--color-brand, #386783);
  color: #fff;
  transform: none;
  box-shadow: none;
}

/* ============ Phone and tablet: two-row header, type scale, tight padding ============ */

/* The cookie banner (#icc-banner, 134px on a phone) sits on top of every fixed
   widget at the bottom edge. theme.js measures it and publishes the height here;
   the sticky bar, floating CTA, back-to-top and badge all rise by that amount. */
:root { --tr-bottom-offset: 0px; }

/* ---- Header, <=1023px: one row = menu | logo | phone ---------------------------
   CSS only for the row itself; header.php is untouched except for the CTA bar it
   gains after </header> (below). .site-header__actions is display:contents so its
   children join the inner grid and can be placed individually. 1fr auto 1fr keeps
   the logo on the true centre even though the burger and the phone are different
   widths. Desktop (>=1024px) is NOT restructured: a centred logo with nine menu
   items needs ~1600px to stay symmetric and the header is 1196px wide at 1440. */
@media (max-width: 1023px) {
  .site-header { height: auto !important; padding: 8px 12px !important; }
  .site-header__inner {
    display: grid !important;
    /* .site-header is display:flex (parent theme), so without an explicit width the
       grid shrinks to its content and the three columns crowd into the middle. */
    width: 100%;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: auto !important;
    padding: 0 !important;
    gap: 8px 12px !important;
  }
  .site-header__actions { display: contents; }
  .site-header__burger { grid-column: 1; grid-row: 1; justify-self: start; }
  .site-header__logo { grid-column: 2; grid-row: 1; justify-self: center; min-width: 0; }
  .site-header__phone { grid-column: 3; grid-row: 1; justify-self: end; }
  /* The CTA moves out of the sticky header into .site-header__cta-bar below it. */
  .site-header .site-header__cta { display: none !important; }
  .site-header .site-header__phone span { display: none; }
  .site-header .site-header__phone { padding: 6px; min-width: 44px; justify-content: center; }
  /* The drawer opens under the header, whatever height the header now has. */
  .mobile-menu {
    top: var(--tr-header-h, 70px) !important;
    max-height: calc(100vh - var(--tr-header-h, 70px)) !important;
  }

  /* Only the top row stays stuck: the bar is a sibling AFTER the sticky header, in
     normal flow, so it scrolls away underneath it. */
  .site-header__cta-bar {
    display: block;
    padding: 10px 16px;
    background: #fff;
    border-top: 1px solid rgba(56, 103, 131, 0.1);
  }
  .site-header__cta-mobile {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--color-brand, #386783);
    color: #fff;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
  }
  .site-header__cta-mobile:hover,
  .site-header__cta-mobile:focus-visible { background: var(--color-brand-dark, #2A506A); color: #fff; }
}
.site-header__cta-bar { display: none; }
@media (max-width: 1023px) { .site-header__cta-bar { display: block; } }

/* ---- Type scale and padding, <=768px --------------------------------------
   Scoped to the article and page templates, no !important: the rules they
   override sit earlier at equal specificity. A bare h1/h2/h3/p/li !important
   would also hit the footer, the mega menu and the calculator (its isolation
   reset is not !important, so an !important rule beats it). */
@media (max-width: 768px) {
  .article-title,
  .page-title { font-size: clamp(24px, 6.5vw, 28px); font-weight: 700; line-height: 1.3; color: #1F2937; }
  .article-single h2,
  .page-container h2 { font-size: clamp(18px, 5vw, 22px); font-weight: 700; line-height: 1.4; margin-block-start: 2rem; }
  .article-single h3,
  .page-container h3 { font-size: 17px; font-weight: 600; }
  .article-col :is(p, li),
  .page-content :is(p, li) { font-size: 16px; line-height: 1.65; color: #374151; }

  /* The container loses its own 20px side padding on article pages so the 12px
     below is the only inset; the breadcrumbs follow it to stay on the text edge. */
  .article-container { padding-inline: 0; }
  .page-container,
  .article-single { padding-inline: 12px; }
  .container > .breadcrumbs { padding-inline: 12px; }
  .article-body,
  .wprt-container { padding-inline: 0; }
  /* The calculator bleeds out to the viewport edges. !important because Ad Inserter
     writes an inline margin on its wrapper. Only the outermost wrapper:
     applying the negative margin to .code-block-1 AND .tr-calc-isolated (both
     are the same box, nested) would pull it out twice and overflow sideways. */
  .article-body .code-block:has(.tr-calc-isolated),
  .article-body > .tr-calc-isolated { margin-inline: -12px !important; padding: 0 !important; }
}

/* ---- Site-wide reviews, above the footer (markup in footer.php) ---- */
.site-reviews { padding: 48px 20px; background: #F8FAFC; border-top: 1px solid rgba(56, 103, 131, 0.1); }
.site-reviews__inner { max-width: 1200px; margin: 0 auto; }
.site-reviews__title { text-align: center; font-size: clamp(22px, 3vw, 32px); font-weight: 700; color: #1F2937; margin: 0 0 32px; }
@media (max-width: 768px) {
  .site-reviews { padding: 32px 16px; }
  .site-reviews__title { margin-bottom: 24px; }
}

/* ---- Trust badge modal (markup in footer.php, trigger in content-article.php) ----
   The badge used to send people to /about/, which left the article. The same
   three facts now open in place. The panel is the dialog; the backdrop is a
   sibling so a click on it closes without the panel's own clicks bubbling to it. */
.trust-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
}
.trust-modal[data-open] { display: flex; }
.trust-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.trust-modal__panel {
  position: relative;
  width: 90vw;
  max-width: 320px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px 24px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  text-align: center;
}
/* inset-inline-end would put this on the left in RTL; the X belongs in the
   corner the eye goes to first, which here is the right one. */
.trust-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #64748B;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.trust-modal__close:hover { background: #F3F4F6; }
.trust-modal__badge-years {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  color: var(--color-brand);
}
.trust-modal__years-num { font-size: 48px; font-weight: 900; line-height: 1; }
.trust-modal__years-text { margin-top: 4px; font-size: 14px; }
.trust-modal__title { margin: 12px 0 20px; color: #1F2937; font-size: 15px; font-weight: 600; }
.trust-modal__ids { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.trust-modal__id {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  color: #1F2937;
  font-size: 14px;
  text-decoration: none;
}
.trust-modal__id:hover { background: #F8FAFC; border-color: var(--color-brand); color: #1F2937; }
.trust-modal__id:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.trust-modal__id-label { color: #64748B; }
.trust-modal__id-value { font-weight: 700; }
.trust-modal__id-icon { color: var(--color-brand); font-size: 12px; }
.trust-modal__logos {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid #E5E7EB;
}
.trust-modal__logos img { width: 48px; height: 48px; border-radius: 50%; object-fit: contain; }

/* ---- Fixed elements move by transform, never by layout (CLS) ----------------
   The sticky CTA bar, back-to-top, trust badge and floating CTA sit above the
   cookie banner, and the reading-progress bar sits under the header. Both
   distances are only known once theme.js has measured the banner and the header
   (--tr-bottom-offset, --tr-header-h), which happens after first paint. They
   used to be applied through bottom/top, so every one of these elements jumped
   when the measurement landed - PageSpeed counted the sticky bar alone at 0.051.

   Measured before vs after JavaScript on the mobile article: these two fixed
   bars were the ONLY elements that moved. translate is a transform, and a
   transform is not a layout shift, so the same visual result now costs zero
   CLS. It is the standalone translate property, not transform, so the existing
   transform rules (.back-to-top show/hide, .trust-badge:hover) still compose
   with it instead of being overwritten. */
.sticky-cta-bar,
.back-to-top,
.trust-badge,
.floating-cta {
  translate: 0 calc(-1 * var(--tr-bottom-offset, 0px));
}
.reading-progress {
  translate: 0 var(--tr-header-h, 105px);
}

/* ---- Desktop header: width set by the container, not by the menu's text (CLS) ----
   .site-header__inner is a flex row (space-between) that used to take its width
   from its content, so it grew and shrank with the width of the menu text. Any
   font swap moved the WHOLE header sideways - measured at 1350px: inner x 59 /
   width 1216 with Rubik, x 44 / 1247 with Segoe UI, x 38 / 1260 with Tahoma,
   capped at 1280 for anything wider. PageSpeed paints in its Linux fallback font
   before Rubik arrives, and scored that one jump at 0.203 CLS on desktop.

   A fixed width (100%, still capped by the existing 1280px max-width) pins the
   logo and the actions; only the menu text moves inside its own space when the
   font swaps. min-width:0 lets the menu box shrink instead of pushing the
   actions in the extreme case of a very wide fallback font. Below 1024px the
   header is the grid set earlier in this file, which already has width:100%. */
@media (min-width: 1024px) {
  .site-header__inner { width: 100%; }
  .site-header .main-menu { min-width: 0; }
}

/* ---- FAQ arrows without Font Awesome ---------------------------------------
   The FAQ on an article is an Elementor toggle widget (template 7935) that sits
   inside the post body. It draws its two arrows as Font Awesome glyphs:
     <i class="fas fa-caret-left">                     closed
     <i class="... fas fa-caret-up">                   open
   Loading fontawesome.min.css + solid.min.css + fa-solid-900.woff2 (about 100 KB,
   the largest download on the page) for those 8 glyphs is the cost this removes.
   The same two shapes are drawn here as an SVG mask, filled with currentColor, so
   the arrow keeps whatever colour Elementor's toggle styling gives it. Elementor
   still decides which of the two is visible; only what is drawn changes.
   Sized like the glyph: 1em tall, and 0.375em / 0.625em wide (the FA 5 viewBoxes
   192x512 and 320x512). */
.elementor-toggle-icon i { font-style: normal; }
.elementor-toggle-icon i::before {
  content: "";
  display: inline-block;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.elementor-toggle-icon .fa-caret-left::before {
  width: 0.375em;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 512'%3E%3Cpath d='M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 512'%3E%3Cpath d='M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z'/%3E%3C/svg%3E");
}
.elementor-toggle-icon .fa-caret-up::before {
  width: 0.625em;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142L145.858 189.196c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662C329.404 330.457 320.48 352 288.662 352z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142L145.858 189.196c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662C329.404 330.457 320.48 352 288.662 352z'/%3E%3C/svg%3E");
}

/* ---- FAQ list rendered from an Elementor toggle section ---------------------
   inc/perf-cleanup.php turns the toggle-only Elementor section (template 7935)
   into <section class="tr-faq-toggle"><details><summary>..</summary><div ..__body>
   so the article no longer has to load Elementor to open and close four answers.
   The numbers are the ones Elementor's toggle measured on the live page, so the
   list keeps its look: a 1px #d5d8dc rule under each row, 15px bold #225675
   questions with the arrow at the start of the row (right, in RTL), 15px padding,
   answers in grey. The padding is Elementor's too: 20px on the section + 10px on the
   column's wrap above, 10px around and below. The arrows are the same two shapes as
   above, drawn as a mask. */
.tr-faq-toggle { padding: 30px 10px 10px; }
.tr-faq-toggle details { border-bottom: 1px solid #d5d8dc; }
.tr-faq-toggle summary {
  display: flex;
  align-items: center;
  padding: 15px;
  font-size: 15px;
  font-weight: 700;
  line-height: 15px;
  color: #225675;
  cursor: pointer;
  list-style: none;
}
.tr-faq-toggle summary::-webkit-details-marker { display: none; }
.tr-faq-toggle summary::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 512'%3E%3Cpath d='M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z'/%3E%3C/svg%3E") no-repeat right center / auto 15px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 512'%3E%3Cpath d='M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z'/%3E%3C/svg%3E") no-repeat right center / auto 15px;
}
.tr-faq-toggle details[open] summary::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142L145.858 189.196c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662C329.404 330.457 320.48 352 288.662 352z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142L145.858 189.196c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662C329.404 330.457 320.48 352 288.662 352z'/%3E%3C/svg%3E");
}
.tr-faq-toggle__body { padding: 15px; font-size: 15px; line-height: 24px; color: #7a7a7a; }
/* Elementor's toggle tightens its padding on a phone: 12px on the question, 12px 10px on the answer. */
@media (max-width: 767px) {
  .tr-faq-toggle summary { padding: 12px; }
  .tr-faq-toggle__body { padding: 12px 10px; }
}

/* ---- Header logo, sized for a wide lockup --------------------------------
   Everything above this that touches .site-header__logo img was written for
   the old 1200x1200 square: "at 72px tall it is 72px wide, so the 240px cap
   never bites". The file is now taxes-refund-logo-wide.png, 1045x180, a 5.8:1
   lockup - at the same heights it is nearly six times as wide, which is why
   the header reads as oversized.

   Last rule in the file so it settles the eight competing declarations above
   without adding another specificity war. Height drives it and width follows;
   max-width is only a guard.

   Rollback: delete this block from BOTH theme.css and theme.min.css - the
   minified twin is the file actually served (inc/perf-cleanup.php), so a
   change to one alone ships nothing or ships a stale sheet. */
.site-header__logo {
  /* min-height was 90px, sized for an 80px-tall square logo. With a 30px
     lockup it is 60px of empty space that pushes the header to 117px. 44px
     keeps the WCAG 2.5.5 touch target this file sets elsewhere. */
  min-height: 44px !important;
}
.site-header__logo img {
  height: 30px !important;
  max-height: 30px !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain;
}
@media (max-width: 768px) {
  .site-header__logo img {
    height: 26px !important;
    max-height: 26px !important;
    max-width: 180px !important;
  }
}

/* 02.11.2026: the footer's office block - reception hours and the map.
   Colours are inherited from .site-footer on purpose. The address above it
   already reads correctly there, so inheriting cannot introduce a contrast
   problem the way a hard-coded colour would. */
.site-footer__visit {
	margin: 0 0 12px;
	font-size: 0.9375rem;
	line-height: 1.6;
	opacity: 0.9;
	max-width: 42ch;
}
.site-footer__hours {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	font-size: 0.9375rem;
	max-width: 240px;
}
.site-footer__hours li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 3px 0;
}
.site-footer__day { opacity: 0.85; }
.site-footer__time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.site-footer__map {
	margin-top: 8px;
	max-width: 340px;
}
.site-footer__map iframe {
	display: block;
	width: 100%;
	border-radius: 10px;
}
.site-footer__directions {
	display: inline-block;
	margin-top: 8px;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: underline;
}