/*
Theme Name: Assignment For Help
Theme URI: https://assignmentforhelp.example
Author: Assignment For Help
Author URI: https://assignmentforhelp.example
Description: Custom theme for the Assignment For Help student-support website. Ships with a hardcoded homepage and two reusable page templates (sidebar quote-form and full-width) so the content team can add new subject, service and location pages without touching code.
Version: 1.0.7
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: Proprietary
Text Domain: assignment-for-help
*/

/* =========================================================
   0. Design tokens
   ========================================================= */
:root {
  --afh-accent: #1f6f54;
  --afh-accent-dark: #16523e;
  --afh-accent-light: #e7f2ec;
  --afh-navy: #1a2233;
  --afh-navy-soft: #4a5468;
  --afh-bg: #ffffff;
  --afh-bg-alt: #f3f6f4;
  --afh-bg-warm: #fbf9f4;
  --afh-border: #dfe6e1;
  --afh-white: #ffffff;
  --afh-danger: #b3432b;

  --afh-font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
  --afh-font-body: "Work Sans", "Segoe UI", Arial, sans-serif;

  --afh-radius-sm: 6px;
  --afh-radius-md: 12px;
  --afh-radius-lg: 20px;
  --afh-shadow-sm: 0 1px 3px rgba(26, 34, 51, 0.08);
  --afh-shadow-md: 0 8px 24px rgba(26, 34, 51, 0.10);
  --afh-header-h: 76px;
  --afh-container: 1180px;
}

/* =========================================================
   1. Reset & base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--afh-font-body);
  color: var(--afh-navy);
  background: var(--afh-bg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--afh-accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { padding-left: 1.25em; }
h1, h2, h3, h4 {
  font-family: var(--afh-font-heading);
  color: var(--afh-navy);
  line-height: 1.25;
  margin: 0 0 0.6em;
  font-weight: 600;
}
h1 { font-size: clamp(2rem, 4.2vw, 3rem); }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}
.skip-link {
  position: absolute;
  left: 8px; top: -60px;
  background: var(--afh-navy);
  color: #fff;
  padding: 10px 16px;
  z-index: 10000;
  border-radius: var(--afh-radius-sm);
  transition: top 0.15s ease;
}
.skip-link:focus { top: 8px; }

.afh-container {
  max-width: var(--afh-container);
  margin: 0 auto;
  padding: 0 24px;
}
section { padding: 64px 0; }
.afh-section-alt { background: var(--afh-bg-alt); }
.afh-section-warm { background: var(--afh-bg-warm); }
.afh-eyebrow {
  display: inline-block;
  font-family: var(--afh-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--afh-accent-dark);
  background: var(--afh-accent-light);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.afh-section-head { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.afh-section-head p { color: var(--afh-navy-soft); font-size: 1.05rem; }
.afh-lede { font-size: 1.15rem; color: var(--afh-navy-soft); max-width: 720px; }

/* =========================================================
   2. Buttons
   ========================================================= */
.afh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--afh-font-body);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 13px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease, color 0.15s ease;
  line-height: 1.1;
}
.afh-btn:hover { text-decoration: none; transform: translateY(-1px); }
.afh-btn-primary { background: var(--afh-accent); color: #fff; box-shadow: var(--afh-shadow-sm); }
.afh-btn-primary:hover { background: var(--afh-accent-dark); color: #fff; }
.afh-btn-outline { background: transparent; border-color: var(--afh-navy); color: var(--afh-navy); }
.afh-btn-outline:hover { background: var(--afh-navy); color: #fff; }
.afh-btn-ghost { background: transparent; color: var(--afh-accent-dark); border-color: var(--afh-accent); }
.afh-btn-ghost:hover { background: var(--afh-accent-light); color: var(--afh-accent-dark); }
.afh-btn-block { width: 100%; }
.afh-btn-sm { padding: 9px 18px; font-size: 0.88rem; }

/* =========================================================
   3. Header
   ========================================================= */
.afh-site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--afh-border);
  backdrop-filter: saturate(180%) blur(6px);
}
.afh-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: var(--afh-header-h);
}
.afh-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.afh-logo a {
  font-family: var(--afh-font-heading);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--afh-navy);
  text-decoration: none;
  white-space: nowrap;
}
.afh-logo a:hover { text-decoration: none; color: var(--afh-accent-dark); }
.afh-logo .afh-logo-mark {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--afh-accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--afh-font-heading);
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}
/*
 * Hard cap on logo size, no matter how the logo gets onto the page: our own
 * shipped fallback image (.afh-logo-img, rendered by header.php when no
 * Customizer logo is set) AND WordPress's own Customizer "Site Identity ->
 * Logo" upload (the_custom_logo() renders a plain <img class="custom-logo">
 * with no size constraint of its own -- it uses the uploaded file's actual
 * pixel dimensions, so a large source image displays large unless something
 * caps it). Both are covered by the plain `img` selector below so the header
 * can never blow out again regardless of which path put the logo there.
 */
.afh-logo img {
  display: block;
  height: 42px;
  width: auto;
  max-width: 200px;
}

.afh-header-actions { display: flex; align-items: center; gap: 18px; }

/* Primary nav (desktop) */
.afh-primary-nav { display: none; }
@media (min-width: 992px) {
  .afh-primary-nav { display: block; }
}
.afh-nav-list {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.afh-nav-list > li {
  position: relative;
  display: flex;
  align-items: center;
}
.afh-nav-list > li > a,
.afh-nav-list > li > .afh-nav-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border-radius: var(--afh-radius-sm);
  color: var(--afh-navy);
  font-weight: 600;
  font-size: 0.96rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--afh-font-body);
}
.afh-nav-list > li > a:hover,
.afh-nav-list > li.afh-submenu-open > .afh-nav-toggle,
.afh-nav-list > li > a:focus-visible,
.afh-nav-list > li > .afh-nav-toggle:focus-visible {
  background: var(--afh-accent-light);
  color: var(--afh-accent-dark);
  text-decoration: none;
}
.afh-caret { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -4px; transition: transform 0.15s ease; }
.afh-submenu-open > .afh-nav-toggle .afh-caret { transform: rotate(-135deg); margin-top: 3px; }

.afh-submenu {
  list-style: none;
  margin: 0;
  padding: 10px;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: #fff;
  border: 1px solid var(--afh-border);
  border-radius: var(--afh-radius-md);
  box-shadow: var(--afh-shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 50;
}
.afh-nav-list > li.afh-submenu-open > .afh-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Desktop hover-to-open: on a real mouse, hovering (or keyboard-focusing
   into) Services/Subjects reveals the dropdown immediately, no click
   required -- matching the reference site's behavior. This is pure CSS and
   works alongside the JS click-toggle above rather than replacing it: a
   click still opens/closes the .afh-submenu-open class for touch, keyboard
   activation (Enter/Space on the toggle button) and "tap to open, tap
   again to close" use, while :hover/:focus-within here only ever *adds*
   visibility while the pointer/focus is on the item. Scoped to
   (hover: hover) and (pointer: fine) so touchscreens (which report a
   "hover" capability inconsistently) keep the tap-only behavior instead of
   a dropdown that opens on first tap and can't be dismissed by moving
   a finger that isn't there. */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .afh-nav-list > li.afh-has-submenu:hover > .afh-submenu,
  .afh-nav-list > li.afh-has-submenu:focus-within > .afh-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .afh-nav-list > li.afh-has-submenu:hover > .afh-nav-toggle .afh-caret,
  .afh-nav-list > li.afh-has-submenu:focus-within > .afh-nav-toggle .afh-caret {
    transform: rotate(-135deg);
    margin-top: 3px;
  }
}
.afh-submenu li + li { border-top: 1px solid var(--afh-bg-alt); }
.afh-submenu a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--afh-radius-sm);
  color: var(--afh-navy);
  font-weight: 500;
  font-size: 0.94rem;
}
.afh-submenu a:hover { background: var(--afh-accent-light); color: var(--afh-accent-dark); text-decoration: none; }

.afh-header-cta { display: none; }
@media (min-width: 992px) {
  .afh-header-cta { display: inline-flex; }
}

/* Mobile controls: hamburger LEFT, logo CENTER (required layout) */
.afh-mobile-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--afh-radius-sm);
  flex-shrink: 0;
}
.afh-mobile-toggle:hover { background: var(--afh-bg-alt); }
.afh-mobile-toggle .afh-bars {
  width: 22px;
  height: 16px;
  position: relative;
  display: block;
}
.afh-mobile-toggle .afh-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--afh-navy);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.afh-mobile-toggle .afh-bars span:nth-child(1) { top: 0; }
.afh-mobile-toggle .afh-bars span:nth-child(2) { top: 7px; }
.afh-mobile-toggle .afh-bars span:nth-child(3) { top: 14px; }
.afh-drawer-open .afh-mobile-toggle .afh-bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.afh-drawer-open .afh-mobile-toggle .afh-bars span:nth-child(2) { opacity: 0; }
.afh-drawer-open .afh-mobile-toggle .afh-bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.afh-mobile-quote-btn {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--afh-radius-sm);
  background: var(--afh-accent-light);
  color: var(--afh-accent-dark);
  flex-shrink: 0;
}
.afh-mobile-quote-btn:hover { background: var(--afh-accent); color: #fff; text-decoration: none; }

@media (min-width: 992px) {
  .afh-mobile-toggle, .afh-mobile-quote-btn { display: none; }
}

/* three-column header grid on mobile: hamburger | logo (centered) | quote icon */
@media (max-width: 991.98px) {
  .afh-header-inner {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
  }
  .afh-logo { justify-content: center; overflow: hidden; }
  .afh-logo a { font-size: 1.12rem; overflow: hidden; text-overflow: ellipsis; }
  .afh-logo img { height: 34px; max-width: 160px; }
  .afh-header-actions { display: contents; }
}
@media (max-width: 374.98px) {
  .afh-logo a { font-size: 0.98rem; }
  .afh-logo img { height: 30px; max-width: 140px; }
}

/* Mobile off-canvas drawer */
.afh-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16, 22, 34, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 900;
}
.afh-drawer-open .afh-drawer-backdrop { opacity: 1; visibility: visible; }

.afh-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(86vw, 340px);
  background: #fff;
  z-index: 901;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  overflow-y: auto;
  box-shadow: var(--afh-shadow-md);
  padding: 18px 18px 32px;
}
.afh-drawer-open .afh-drawer { transform: translateX(0); }

.afh-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.afh-drawer-close {
  width: 38px; height: 38px;
  border-radius: var(--afh-radius-sm);
  border: none;
  background: var(--afh-bg-alt);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.afh-drawer-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.afh-drawer-nav-list li { border-bottom: 1px solid var(--afh-bg-alt); }
.afh-drawer-nav-list > li > a,
.afh-drawer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 4px;
  color: var(--afh-navy);
  font-weight: 600;
  font-size: 1.02rem;
}
.afh-drawer-submenu-toggle {
  background: none;
  border: none;
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--afh-radius-sm);
  flex-shrink: 0;
}
.afh-drawer-submenu-toggle .afh-caret { margin-top: 0; }
.afh-drawer-submenu-open > .afh-drawer-submenu-toggle .afh-caret { transform: rotate(-135deg); }
.afh-drawer-submenu {
  list-style: none;
  margin: 0 0 10px;
  padding: 0 0 0 14px;
  display: none;
}
.afh-drawer-submenu-open > .afh-drawer-submenu { display: block; }
.afh-drawer-submenu li { border-bottom: none; }
.afh-drawer-submenu a {
  display: block;
  padding: 9px 4px;
  color: var(--afh-navy-soft);
  font-weight: 500;
  font-size: 0.95rem;
}
.afh-drawer-cta { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }

/* =========================================================
   4. Hero
   ========================================================= */
.afh-hero {
  padding: 60px 0 56px;
  background: linear-gradient(180deg, var(--afh-bg-warm) 0%, #ffffff 100%);
}
.afh-hero-grid {
  display: grid;
  gap: 40px;
  align-items: start;
}
@media (min-width: 960px) {
  .afh-hero-grid { grid-template-columns: 1.15fr 0.85fr; align-items: center; }
}
.afh-hero h1 { margin-bottom: 0.5em; }
.afh-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.afh-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin-top: 30px;
  font-size: 0.92rem;
  color: var(--afh-navy-soft);
}
.afh-hero-trust span { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.afh-hero-trust span::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--afh-accent);
  flex-shrink: 0;
}

/* Quote card embedded in hero / sidebar */
.afh-quote-card {
  background: #fff;
  border: 1px solid var(--afh-border);
  border-top: 5px solid var(--afh-accent);
  border-radius: var(--afh-radius-lg);
  box-shadow: var(--afh-shadow-md);
  padding: 26px;
}
.afh-quote-card h3 { margin-bottom: 4px; }
.afh-quote-card .afh-quote-sub { color: var(--afh-navy-soft); font-size: 0.92rem; margin-bottom: 18px; }

/* =========================================================
   5. Forms
   ========================================================= */
.afh-form-field { margin-bottom: 14px; }
.afh-form-field label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--afh-navy);
  margin-bottom: 6px;
}
.afh-form-field input,
.afh-form-field select,
.afh-form-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--afh-border);
  border-radius: var(--afh-radius-sm);
  font-family: var(--afh-font-body);
  font-size: 0.96rem;
  background: #fff;
  color: var(--afh-navy);
}
.afh-quote-form .afh-form-field input,
.afh-quote-form .afh-form-field select,
.afh-quote-form .afh-form-field textarea {
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--afh-accent-light);
}
.afh-quote-form .afh-form-field input::placeholder,
.afh-quote-form .afh-form-field textarea::placeholder {
  color: var(--afh-navy-soft);
  opacity: 1;
}
.afh-form-field input:focus,
.afh-form-field select:focus,
.afh-form-field textarea:focus {
  outline: 2px solid var(--afh-accent);
  outline-offset: 1px;
  border-color: var(--afh-accent);
}
.afh-quote-form .afh-btn-block { border-radius: 14px; }
.afh-form-row { display: grid; gap: 14px; }

/* Country code + phone number: a flex row sized to whatever container it
   actually sits in (hero card, page sidebar, or the narrow slide-in
   panel) instead of a viewport media query. The quote form always lives
   inside a fairly narrow card wherever it appears -- even on a wide
   desktop screen -- so a `@media (min-width: …)` breakpoint here would
   size columns for the viewport while the real available space is the
   card's, causing the phone field to overflow its own container. Flex
   avoids that because it only ever divides the space it's actually
   given. */
.afh-phone-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.afh-phone-group select.afh-phone-code {
  flex: 0 0 auto;
  width: 88px;
  min-width: 88px;
  padding: 14px 8px;
}
.afh-phone-group input[type="tel"] {
  flex: 1 1 140px;
  min-width: 0; /* let the input shrink below its content size instead of overflowing */
  width: auto;
}
.afh-form-note { font-size: 0.8rem; color: var(--afh-navy-soft); margin-top: 10px; }
.afh-hp-field { position: absolute; left: -9999px; top: -9999px; }
.afh-form-status {
  padding: 12px 14px;
  border-radius: var(--afh-radius-sm);
  font-size: 0.9rem;
  margin-bottom: 14px;
}
.afh-form-status-error { background: #fbeae5; color: var(--afh-danger); }
.afh-form-status-success { background: var(--afh-accent-light); color: var(--afh-accent-dark); }
.afh-form-status-success strong { display: block; margin-bottom: 4px; }

/* =========================================================
   6. Cards / grids / lists used across homepage + content pages
   ========================================================= */
.afh-grid { display: grid; gap: 22px; }
.afh-grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.afh-grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.afh-grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.afh-card {
  background: #fff;
  border: 1px solid var(--afh-border);
  border-radius: var(--afh-radius-md);
  padding: 26px;
  box-shadow: var(--afh-shadow-sm);
}
.afh-card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.afh-card p:last-child { margin-bottom: 0; }

.afh-check-list, .afh-cross-list { list-style: none; margin: 0; padding: 0; }
.afh-check-list li, .afh-cross-list li {
  position: relative;
  padding: 8px 0 8px 32px;
  border-bottom: 1px solid var(--afh-bg-alt);
}
.afh-check-list li:last-child, .afh-cross-list li:last-child { border-bottom: none; }
.afh-check-list li::before {
  content: "✓";
  position: absolute; left: 0; top: 8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--afh-accent);
  color: #fff;
  font-size: 0.72rem;
  display: flex; align-items: center; justify-content: center;
}
.afh-cross-list li::before {
  content: "!";
  position: absolute; left: 0; top: 8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--afh-danger);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.afh-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: afh-step;
  display: grid;
  gap: 18px;
}
@media (min-width: 720px) {
  .afh-steps { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
.afh-steps li {
  counter-increment: afh-step;
  background: #fff;
  border: 1px solid var(--afh-border);
  border-radius: var(--afh-radius-md);
  padding: 22px 20px 20px;
  position: relative;
}
.afh-steps li::before {
  content: counter(afh-step);
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--afh-accent);
  color: #fff;
  font-family: var(--afh-font-heading);
  font-weight: 700;
  margin-bottom: 12px;
}
.afh-steps li strong { display: block; margin-bottom: 4px; font-size: 1.02rem; }

.afh-two-col {
  display: grid;
  gap: 30px;
}
@media (min-width: 860px) {
  .afh-two-col { grid-template-columns: 1fr 1fr; }
}

.afh-cta-band {
  background: var(--afh-navy);
  color: #fff;
  border-radius: var(--afh-radius-lg);
  padding: 46px 36px;
  text-align: center;
}
.afh-cta-band h2, .afh-cta-band p { color: #fff; }
.afh-cta-band p { color: rgba(255,255,255,0.82); }
.afh-cta-band .afh-hero-actions { justify-content: center; }
.afh-cta-band .afh-btn-outline { border-color: #fff; color: #fff; }
.afh-cta-band .afh-btn-outline:hover { background: #fff; color: var(--afh-navy); }

.afh-pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.afh-pill {
  background: var(--afh-bg-alt);
  border: 1px solid var(--afh-border);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--afh-navy-soft);
}

/* =========================================================
   7. Content page layout (page.php with sidebar)
   ========================================================= */
.afh-page-banner {
  background: var(--afh-bg-warm);
  padding: 46px 0 40px;
  border-bottom: 1px solid var(--afh-border);
}
.afh-breadcrumbs { font-size: 0.85rem; color: var(--afh-navy-soft); margin-bottom: 14px; }
.afh-breadcrumbs a { color: var(--afh-navy-soft); }
.afh-page-banner h1 { margin-bottom: 10px; max-width: 820px; }

.afh-content-layout {
  display: grid;
  gap: 44px;
  padding: 56px 0 72px;
}
@media (min-width: 960px) {
  .afh-content-layout { grid-template-columns: 1fr 340px; }
}
.afh-article {
  max-width: 760px;
}
.afh-article h2 { margin-top: 1.5em; }
.afh-article h2:first-child { margin-top: 0; }
.afh-article h3 { margin-top: 1.3em; color: var(--afh-accent-dark); }
.afh-article ul li, .afh-article ol li { margin-bottom: 0.4em; }
.afh-article strong { color: var(--afh-navy); }

.afh-sidebar { position: relative; }
.afh-sidebar-sticky { position: sticky; top: calc(var(--afh-header-h) + 20px); display: flex; flex-direction: column; gap: 20px; }
.afh-sidebar-trust {
  background: var(--afh-bg-alt);
  border-radius: var(--afh-radius-md);
  padding: 20px;
  font-size: 0.9rem;
}
.afh-sidebar-trust ul { list-style: none; padding: 0; margin: 10px 0 0; }
.afh-sidebar-trust li { padding: 5px 0; }

.afh-fullwidth-layout { padding: 56px 0 72px; }
.afh-fullwidth-layout .afh-article { max-width: 820px; margin: 0 auto; }

/* =========================================================
   8. Slide-in quote panel (site-wide)
   ========================================================= */
.afh-quote-panel-backdrop {
  position: fixed; inset: 0;
  background: rgba(16, 22, 34, 0.55);
  z-index: 950;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.afh-quote-panel-open .afh-quote-panel-backdrop { opacity: 1; visibility: visible; }
.afh-quote-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(92vw, 420px);
  background: #fff;
  z-index: 951;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  overflow-y: auto;
  padding: 24px 22px 40px;
  box-shadow: var(--afh-shadow-md);
}
.afh-quote-panel-open .afh-quote-panel { transform: translateX(0); }
.afh-quote-panel-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }

/* Floating WhatsApp click-to-chat button. This is the theme's only
   fixed-position corner button -- the earlier floating "Free Quote" pill
   that used to share this same bottom-right corner was removed because
   the two were competing for the same spot. "Get a Free Quote" is still
   available via the header button, the homepage hero and this slide-in
   panel, just not as a second floating icon here. */
.afh-whatsapp-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 400;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--afh-shadow-md);
}
.afh-whatsapp-fab:hover { background: #20bd5a; color: #fff; text-decoration: none; }

/* =========================================================
   9. Confirmation page
   ========================================================= */
.afh-confirmation { padding: 90px 0; text-align: center; }
.afh-confirmation .afh-check-circle {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--afh-accent-light);
  color: var(--afh-accent-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
  margin: 0 auto 20px;
}

/* =========================================================
   10. Footer
   ========================================================= */
.afh-site-footer {
  background: var(--afh-navy);
  color: rgba(255,255,255,0.82);
  padding: 56px 0 0;
  margin-top: 60px;
}
.afh-footer-grid {
  display: grid;
  gap: 34px;
  padding-bottom: 40px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .afh-footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
}
.afh-footer-brand .afh-logo a { color: #fff; }
.afh-footer-brand .afh-logo-mark { background: rgba(255,255,255,0.14); }
.afh-footer-brand p { color: rgba(255,255,255,0.7); font-size: 0.92rem; margin-top: 12px; max-width: 320px; }
.afh-footer-col h4 {
  color: #fff;
  font-family: var(--afh-font-body);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.afh-footer-col ul { list-style: none; margin: 0; padding: 0; }
.afh-footer-col li { margin-bottom: 9px; }
.afh-footer-col a { color: rgba(255,255,255,0.75); font-size: 0.94rem; }
.afh-footer-col a:hover { color: #fff; }
/* Phone/email specifically in solid white, not the dimmer default used by
   the other footer columns -- these are the ones visitors are meant to
   act on directly (call/email), so they get full contrast. */
.afh-footer-contact a { color: #fff; font-weight: 500; }
.afh-footer-contact a:hover { color: rgba(255,255,255,0.85); }
.afh-footer-col .afh-footer-fallback-hint { color: rgba(255,255,255,0.45); font-size: 0.85rem; font-style: italic; }
.afh-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.14);
  padding: 20px 0 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.84rem;
  color: rgba(255,255,255,0.55);
}
.afh-footer-bottom a { color: rgba(255,255,255,0.75); }
.afh-footer-legal-links { display: flex; gap: 18px; flex-wrap: wrap; }

/* =========================================================
   11. 404 / misc
   ========================================================= */
.afh-404 { padding: 90px 0; text-align: center; }

/* =========================================================
   12. Narrow-phone safety net (320-374px)
   ========================================================= */
@media (max-width: 374.98px) {
  .afh-container { padding: 0 16px; }
  .afh-btn { padding: 12px 20px; font-size: 0.92rem; }
  section { padding: 46px 0; }
  .afh-cta-band { padding: 34px 20px; }
}