/*
Theme Name: AGI Insurance
Theme URI: https://assureinsurance.com.sg/
Author: AGI Insurance
Author URI: https://assureinsurance.com.sg/
Description: A professional insurance broker theme with hero slider, block editor support, responsive navigation with dropdown menus, and a full-featured homepage layout.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: agi-insurance
Tags: block-editor-patterns, full-site-editing, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =============================================
   CSS CUSTOM PROPERTIES
   ============================================= */
:root {
  --color-primary: #1a3a8c;
  --color-primary-dark: #122a6b;
  --color-accent: #cc0000;
  --color-accent-hover: #a00000;
  --color-white: #ffffff;
  --color-light: #f4f6f9;
  --color-muted: #6b7280;
  --color-text: #1f2937;
  --color-border: #e5e7eb;
  --color-footer-bg: #555f6d;
  --color-footer-dark: #3d444d;
  --color-dropdown-bg: #1e3a8a;
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  --header-height: 80px;
  --transition: all 0.25s ease;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.18);
  --radius: 4px;
  --radius-lg: 8px;
}

/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; transition: var(--transition); }

ul { list-style: none; }

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
  font-weight: 700;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--color-primary);
  margin-bottom: 2rem;
  position: relative;
}
.section-title::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--color-accent);
  margin-top: 10px;
}

/* =============================================
   HEADER — desktop nav always inline (overlayMenu:"never")
   Mobile hamburger + drawer injected via wp_body_open PHP hook.
   ============================================= */

/* ── Outer header bar ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.09);
  padding: 0 40px !important;
  min-height: var(--header-height);
  align-items: center !important;
  flex-wrap: nowrap !important;
}
.site-header.scrolled {
  box-shadow: 0 2px 14px rgba(0,0,0,0.13);
}

/* ── Logo ── */
.site-logo,
.wp-block-group.site-logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0 !important;
}
.site-logo .wp-block-site-logo,
.wp-block-group.site-logo .wp-block-site-logo { margin: 0 !important; line-height: 0; }
.site-logo img,
.wp-block-group.site-logo img {
  height: 60px !important;
  width: auto !important;
  display: block;
}
.site-logo .wp-block-site-title,
.wp-block-group.site-logo .wp-block-site-title { margin: 0 !important; }
.site-logo .wp-block-site-title a,
.wp-block-group.site-logo .wp-block-site-title a {
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  font-size: 0.72rem !important;
  color: var(--color-primary) !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-decoration: none !important;
  white-space: nowrap;
}

/* ── wp:navigation wrapper ── */
.agi-primary-nav.wp-block-navigation {
  margin: 0 !important;
  padding: 0 !important;
  flex: 1;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  min-height: var(--header-height);
  color: var(--color-text);
  /* Remove any WP default colours */
  --navigation-layout-justification-setting: flex-end;
}

/* With overlayMenu:"never" WP renders only the inline container — no responsive wrapper */
.agi-primary-nav .wp-block-navigation__container {
  display: flex !important;
  align-items: stretch !important;
  height: var(--header-height);
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  flex-wrap: nowrap;
}

.agi-primary-nav .wp-block-navigation-item {
  position: relative;
  display: flex !important;
  align-items: stretch !important;
  margin: 0 !important;
}

/* Top-level link / button */
.agi-primary-nav .wp-block-navigation-item__content {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  padding: 0 13px !important;
  font-family: var(--font-heading) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #333 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  border-bottom: 3px solid transparent !important;
  border-top: 3px solid transparent !important;
  transition: color 0.2s ease, border-bottom-color 0.2s ease !important;
  letter-spacing: 0.01em;
  gap: 3px;
  background: none !important;
  cursor: pointer;
}
.agi-primary-nav .wp-block-navigation-item__content:hover,
.agi-primary-nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.agi-primary-nav .current-menu-item > .wp-block-navigation-item__content {
  color: var(--color-primary) !important;
  border-bottom-color: var(--color-accent) !important;
}

/* "Get a Quote" (5th item) — bold, primary colour */
.agi-primary-nav .wp-block-navigation__container > li:nth-child(5) > .wp-block-navigation-item__content,
.agi-primary-nav .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) > .wp-block-navigation-item__content {
  color: var(--color-primary) !important;
  font-weight: 700 !important;
}

/* Submenu chevron icon */
.agi-primary-nav .wp-block-navigation__submenu-icon {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 2px !important;
  opacity: 0.55;
  transition: transform 0.2s ease;
  pointer-events: none;
}
.agi-primary-nav .wp-block-navigation__submenu-icon svg {
  width: 9px !important;
  height: 9px !important;
  fill: currentColor !important;
  stroke: none !important;
}
.agi-primary-nav .wp-block-navigation-item:hover .wp-block-navigation__submenu-icon {
  transform: rotate(180deg);
}

/* ── Dropdown panel ── */
.agi-primary-nav .wp-block-navigation__submenu-container {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  min-width: 215px !important;
  background: var(--color-dropdown-bg) !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.22) !important;
  z-index: 9999 !important;
  border-top: 3px solid var(--color-accent) !important;
}
.agi-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item {
  display: block !important;
  height: auto !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
.agi-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child {
  border-bottom: none !important;
}
.agi-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block !important;
  height: auto !important;
  padding: 11px 22px !important;
  color: #fff !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  border: none !important;
  white-space: nowrap !important;
  transition: background 0.15s ease, padding-left 0.15s ease !important;
}
.agi-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: rgba(255,255,255,0.11) !important;
  padding-left: 28px !important;
  color: #fff !important;
  border: none !important;
}

/* Hide WP's responsive container entirely — we use our own PHP mobile nav */
.agi-primary-nav .wp-block-navigation__responsive-container,
.agi-primary-nav .wp-block-navigation__responsive-container-open,
.agi-primary-nav .wp-block-navigation__responsive-container-close {
  display: none !important;
}

/* ── Hide desktop nav + show PHP hamburger on mobile ── */
@media (max-width: 960px) {
  .site-header { padding: 0 20px !important; }

  /* Hide WP's inline nav on mobile */
  .agi-primary-nav { display: none !important; }

  /* Show PHP hamburger button */
  .agi-mob-nav { display: block; }
}
@media (min-width: 961px) {
  /* Hide PHP hamburger on desktop */
  .agi-mob-nav { display: none !important; }
}
@media (max-width: 600px) {
  .site-header { padding: 0 16px !important; }
  .site-logo img,
  .wp-block-group.site-logo img { height: 46px !important; }
}

/* =============================================
   MOBILE NAV — PHP-injected hamburger + drawer
   ============================================= */

/* Hamburger button — 3-line icon */
.agi-mob-nav {
  display: none; /* shown via media query above */
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10000;
  height: var(--header-height);
  align-items: center;
  padding-right: 20px;
}
.agi-mob-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius);
}
.agi-burger-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
/* Animate to × when drawer open */
body.agi-mob-open .agi-burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.agi-mob-open .agi-burger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.agi-mob-open .agi-burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Slide-in drawer */
.agi-mob-drawer {
  position: fixed;
  top: 0;
  right: -320px;
  width: 300px;
  max-width: 88vw;
  height: 100%;
  background: var(--color-white);
  box-shadow: -4px 0 24px rgba(0,0,0,0.18);
  z-index: 9999;
  overflow-y: auto;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}
.agi-mob-drawer.is-open { right: 0; }

.agi-mob-drawer-header {
  display: flex;
  justify-content: flex-end;
  padding: 14px 16px 8px;
  border-bottom: 1px solid var(--color-border);
}
.agi-mob-close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--color-primary);
  border-radius: var(--radius);
}
.agi-mob-close:hover { background: var(--color-light); }

/* Mobile menu list */
.agi-mob-menu {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1;
}
.agi-mob-menu > li {
  border-bottom: 1px solid var(--color-border);
}
.agi-mob-menu > li > a,
.agi-mob-sub-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 20px;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}
.agi-mob-menu > li > a:hover,
.agi-mob-sub-toggle:hover {
  background: var(--color-light);
  color: var(--color-primary);
}

/* Chevron rotate on open */
.agi-mob-chevron { transition: transform 0.25s ease; flex-shrink: 0; opacity: 0.6; }
.agi-mob-has-sub.is-open .agi-mob-chevron { transform: rotate(180deg); }

/* Sub-menu */
.agi-mob-sub {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--color-primary);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.agi-mob-has-sub.is-open .agi-mob-sub { max-height: 600px; }
.agi-mob-sub li a {
  display: block;
  padding: 11px 20px 11px 28px;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: background 0.15s, padding-left 0.15s;
}
.agi-mob-sub li:last-child a { border-bottom: none; }
.agi-mob-sub li a:hover {
  background: rgba(255,255,255,0.1);
  padding-left: 34px;
  color: #fff;
}

/* Dark overlay behind drawer */
.agi-mob-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.agi-mob-overlay.is-visible {
  display: block;
  opacity: 1;
}

/* Prevent body scroll when drawer open */
body.agi-mob-open { overflow: hidden; }

/* =============================================
   HERO SLIDER — native FSE block pattern
   agi-hero-slider > agi-slider-track > agi-slide (wp:cover blocks)
   ============================================= */

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes growIn {
  from { opacity: 0; width: 0; max-width: 0; }
  to   { opacity: 1; width: 52px; max-width: 52px; }
}
@keyframes zoomBg {
  from { transform: scale(1); }
  to   { transform: scale(1.065); }
}

/* Outer wrapper group */
.agi-hero-slider {
  position: relative;
  overflow: hidden;
  background: #0a1a4a;
  margin-top: 0 !important;
  /* Remove default block padding */
  padding: 0 !important;
}
/* inner track — holds all slides side by side */
.agi-hero-slider > .wp-block-group > .agi-slider-track,
.agi-slider-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  transition: transform 0.72s cubic-bezier(0.77, 0, 0.175, 1);
  will-change: transform;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}

/* Each slide is a wp:cover */
.agi-slide {
  min-width: 100% !important;
  min-height: 520px !important;
  flex-shrink: 0 !important;
  position: relative;
}

/* Ken-Burns on active slide */
.agi-slide.agi-slide-active .wp-block-cover__image-background {
  animation: zoomBg 9s ease forwards;
}

/* Override wp:cover inner container — left-align, no centering */
.agi-slide .wp-block-cover__inner-container {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  max-width: 100% !important;
}

/* Slide text group sits on the left */
.agi-slide-text {
  padding: 0 48px 0 80px !important;
  max-width: 600px !important;
  text-align: left !important;
  margin: 0 !important;
}
.agi-slide-text * {
  text-align: left !important;
}

/* Hide the WP default dim overlay; we use our own gradient */
.agi-slide .wp-block-cover__background {
  display: none !important;
}
/* Gradient overlay */
.agi-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(10,26,74,0.85) 0%,
    rgba(10,26,74,0.60) 40%,
    rgba(10,26,74,0.15) 70%,
    transparent 100%
  );
  z-index: 2;
  pointer-events: none;
}
/* Inner container sits above gradient */
.agi-slide .wp-block-cover__inner-container { z-index: 3 !important; }

/* ── Fly-in: elements start hidden; .agi-anim-running triggers animations ──
   JS removes .agi-anim-running, forces reflow, then re-adds it to replay  */

/* All slide content hidden by default */
.agi-slide .agi-slide-caption,
.agi-slide .agi-red-line,
.agi-slide .agi-slide-subcaption,
.agi-slide .wp-block-buttons {
  opacity: 0;
  animation: none;
}

/* Caption flies in from the left */
.agi-slide.agi-slide-active.agi-anim-running .agi-slide-caption {
  animation: slideInLeft 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
/* Red separator grows from width:0 */
.agi-slide.agi-slide-active.agi-anim-running .agi-red-line {
  animation: growIn 0.5s ease 0.5s both;
}
/* Sub-caption slides up */
.agi-slide.agi-slide-active.agi-anim-running .agi-slide-subcaption {
  animation: slideInUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.65s both;
}
/* CTA button slides up last */
.agi-slide.agi-slide-active.agi-anim-running .wp-block-buttons {
  animation: slideInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.85s both;
}

/* Red line — wp:separator */
.agi-slide .agi-red-line.wp-block-separator {
  border: none !important;
  height: 3px !important;
  background-color: #cc0000 !important;
  width: 52px !important;
  max-width: 52px !important;
  margin: 14px 0 16px !important;
}

/* CTA button */
.agi-slide .agi-slide-btn .wp-block-button__link {
  border: 1.5px solid rgba(255,255,255,0.55) !important;
  border-radius: 30px !important;
  backdrop-filter: blur(4px);
  transition: background 0.2s ease, border-color 0.2s ease !important;
}
.agi-slide .agi-slide-btn .wp-block-button__link:hover {
  background-color: #cc0000 !important;
  border-color: #cc0000 !important;
}

/* Vertical dot nav — injected by JS */
.agi-slider-dots {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10;
}
.agi-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  cursor: pointer;
  border: none;
  padding: 0;
  transition: var(--transition);
}
.agi-slider-dot.agi-dot-active {
  background: var(--color-white);
  transform: scale(1.4);
}
.agi-slider-dot:hover { background: rgba(255,255,255,0.7); }

/* Editor: show all slides stacked for visibility */
.block-editor-block-list__layout .agi-slider-track { flex-direction: column !important; }
.block-editor-block-list__layout .agi-slide { min-width: 100% !important; }
.block-editor-block-list__layout .agi-slide .agi-slide-caption,
.block-editor-block-list__layout .agi-slide .agi-red-line,
.block-editor-block-list__layout .agi-slide .agi-slide-subcaption,
.block-editor-block-list__layout .agi-slide .wp-block-buttons { opacity: 1 !important; animation: none !important; }
/* =============================================
   SUB-NAV WRAPPER — agi-insurance/sub-nav-bar
   ============================================= */
.agi-sub-nav-wrapper {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  padding: 0 !important;
  gap: 0 !important;
  background: #1a3a8c;
}
.agi-sub-nav-welcome {
  background: #142d70;
  min-width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 28px !important;
  gap: 6px !important;
}
.agi-sub-nav-welcome p { margin: 0 !important; }
.agi-welcome-title {
  color: rgba(255,255,255,0.9) !important;
  font-family: var(--font-heading) !important;
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}
.agi-welcome-cta a {
  color: #fff !important;
  font-family: var(--font-heading) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-bottom: 2px solid var(--color-accent) !important;
  padding-bottom: 2px !important;
}
.agi-welcome-cta a:hover { border-bottom-color: #fff !important; }

.agi-sub-nav-bar {
  flex: 1;
  display: flex !important;
  align-items: stretch !important;
  padding: 0 !important;
  gap: 0 !important;
}

.agi-nav-icon-wrap {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-right: 1px solid rgba(255,255,255,0.1);
  transition: background 0.2s ease;
  padding: 0 !important;
  min-height: 88px;
}
.agi-nav-icon-wrap:last-child { border-right: none; }
.agi-nav-icon-wrap:hover { background: rgba(255,255,255,0.08); }
.agi-nav-icon-wrap p {
  margin: 0 !important;
  width: 100%;
  text-align: center;
}
.agi-nav-icon-wrap p a {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  padding: 50px 10px 14px !important;
  color: rgba(255,255,255,0.85) !important;
  font-family: var(--font-heading) !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  text-align: center !important;
  background-position: center 12px !important;
  background-repeat: no-repeat !important;
  background-size: 30px auto !important;
  transition: color 0.2s;
  line-height: 1.3;
}
.agi-nav-icon-wrap p a:hover { color: #fff !important; }

/* SVG icons per category */
.nav-motor p a { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 40" fill="none" stroke="%23fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="14" width="56" height="20" rx="4"/><path d="M10 14l6-10h32l6 10"/><circle cx="16" cy="34" r="5"/><circle cx="48" cy="34" r="5"/><path d="M21 34h22"/></svg>') !important; }
.nav-commercial p a { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 44" fill="none" stroke="%23fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="10" width="40" height="26" rx="3"/><path d="M42 20h16l4 10v6H42V20z"/><circle cx="14" cy="38" r="5"/><circle cx="52" cy="38" r="5"/><path d="M19 38h27"/></svg>') !important; }
.nav-personal p a { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 58" fill="none" stroke="%23fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><circle cx="24" cy="12" r="8"/><path d="M8 56v-14a16 16 0 0132 0v14"/></svg>') !important; }
.nav-travel p a { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 50" fill="none" stroke="%23fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="32" cy="28" rx="28" ry="18"/><path d="M4 28h56"/><path d="M20 10c-4 6-6 12-6 18s2 12 6 18"/><path d="M44 10c4 6 6 12 6 18s-2 12-6 18"/></svg>') !important; }
.nav-other p a { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" fill="none" stroke="%23fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><circle cx="24" cy="24" r="16"/><path d="M36 36l14 14"/></svg>') !important; }

@media (max-width: 900px) {
  .agi-sub-nav-wrapper { flex-direction: column !important; }
  .agi-sub-nav-bar { flex-wrap: wrap !important; }
  .agi-nav-icon-wrap { flex: 0 0 33.333% !important; min-width: 33.333% !important; }
}
@media (max-width: 480px) {
  .agi-nav-icon-wrap { flex: 0 0 50% !important; min-width: 50% !important; }
}

/* =============================================
   ABOUT AGI SECTION — agi-insurance/about-section pattern
   ============================================= */
.agi-about-section {
  background: #f4f6f9;
  padding: 64px 40px;
  overflow: hidden;
}
.agi-about-columns {
  max-width: 1200px;
  margin: 0 auto;
  align-items: center !important;
  gap: 60px !important;
}
.agi-about-content {
  flex: 0 0 55% !important;
}
.agi-about-image {
  flex: 0 0 40% !important;
}
.agi-about-heading {
  font-family: var(--font-heading) !important;
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
  font-weight: 800 !important;
  color: var(--color-primary) !important;
  margin-bottom: 20px !important;
}
.agi-about-section .agi-red-line {
  background-color: #cc0000 !important;
  color: #cc0000 !important;
  border: none !important;
  height: 3px !important;
  width: 52px !important;
  max-width: 52px !important;
  margin: 0 0 24px !important;
}
.agi-about-text {
  font-size: 1rem !important;
  line-height: 1.75 !important;
  color: #374151 !important;
  margin-bottom: 32px !important;
}
.agi-about-img {
  border-radius: 8px;
  overflow: hidden;
  margin: 0 !important;
}
.agi-about-img img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}
.agi-btn-primary .wp-block-button__link {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  font-family: var(--font-heading) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  padding: 12px 28px !important;
  transition: background-color 0.2s ease, transform 0.15s ease !important;
  border: none !important;
}
.agi-btn-primary .wp-block-button__link:hover {
  background-color: var(--color-accent) !important;
  transform: translateY(-1px);
}
@media (max-width: 768px) {
  .agi-about-section { padding: 48px 20px; }
  .agi-about-columns { flex-direction: column !important; }
}
/* =============================================
   PROMO CARDS — agi-insurance/promo-cards pattern
   Constrained to content width like other sections (not full-bleed)
   ============================================= */

/* Outer wrapper — matches content width system */
.agi-promo-section {
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 40px !important;
  box-sizing: border-box;
}

.agi-promo-cards {
  gap: 24px !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
}
.agi-promo-col {
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 !important;
}
.agi-promo-card {
  min-height: 280px !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
}
.agi-promo-card .wp-block-cover__inner-container {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  max-width: 100% !important;
}
.agi-promo-card .wp-block-cover__image-background {
  transition: transform 0.5s ease;
}
.agi-promo-card:hover .wp-block-cover__image-background {
  transform: scale(1.05) !important;
}
.agi-promo-card-inner {
  width: 100% !important;
  padding: 28px 30px !important;
}
.agi-promo-heading {
  color: #fff !important;
  font-family: var(--font-heading) !important;
  font-size: clamp(1rem, 2vw, 1.35rem) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin-bottom: 10px !important;
}
.agi-promo-list {
  color: rgba(255,255,255,0.9) !important;
  font-size: 0.84rem !important;
  list-style: disc !important;
  padding-left: 18px !important;
  margin: 0 !important;
}
.agi-promo-list li { padding: 2px 0 !important; }

/* Breakpoint widths — mirrors responsive system */
@media (min-width: 1263px) and (max-width: 1439px) {
  .agi-promo-section { max-width: 1000px; padding: 0 0 !important; }
}
@media (min-width: 1024px) and (max-width: 1262px) {
  .agi-promo-section { max-width: 900px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .agi-promo-section { padding: 0 32px !important; }
}
@media (min-width: 640px) and (max-width: 767px) {
  .agi-promo-section { max-width: 600px; padding: 0 0 !important; }
  .agi-promo-cards { flex-direction: column !important; gap: 16px !important; }
}
@media (max-width: 639px) {
  .agi-promo-section { padding: 0 16px !important; }
  .agi-promo-cards { flex-direction: column !important; gap: 12px !important; }
}

/* =============================================
   SPONSORS — agi-insurance/sponsors-section
   ============================================= */
.agi-sponsors-section {
  background: #fff;
  border-top: 1px solid #e5e7eb;
  padding: 50px 40px 60px;
}
.agi-sponsors-heading {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 28px !important;
}
.agi-sponsors-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  padding: 0 !important;
}
.agi-sponsor-item {
  flex: 0 0 12.5%;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  margin: 0 !important;
}
.agi-sponsor-logo {
  margin: 0 !important;
  text-align: center;
}
.agi-sponsor-logo img {
  max-width: 110px !important;
  max-height: 60px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  filter: none;
  opacity: 1;
  transition: opacity 0.25s ease, transform 0.25s ease;
  display: block !important;
  margin: 0 auto !important;
}
.agi-sponsor-item:hover .agi-sponsor-logo img {
  opacity: 0.8;
  transform: scale(1.05);
}

/* =============================================
   FOOTER — matches assureinsurance.com.sg design
   Dark slate background, muted headings, plain list links
   ============================================= */
.agi-site-footer {
  background-color: #555f6d !important;
  color: rgba(255,255,255,0.82) !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--font-body) !important;
}

/* Top content area */
.agi-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 52px 40px 40px !important;
}
.agi-footer-columns {
  gap: 36px !important;
  align-items: flex-start !important;
}
.agi-footer-col {
  min-width: 0;
}

/* Column headings — muted uppercase, NO border */
.agi-footer-heading {
  font-family: var(--font-heading) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: rgba(255,255,255,0.5) !important;
  margin-bottom: 12px !important;
  margin-top: 24px !important;
  padding-bottom: 0 !important;
  border: none !important;
  border-bottom: none !important;
}
.agi-footer-col .agi-footer-heading:first-child {
  margin-top: 0 !important;
}

/* Paragraph text */
.agi-footer-text {
  font-size: 0.8rem !important;
  color: rgba(255,255,255,0.72) !important;
  line-height: 1.7 !important;
  margin-bottom: 6px !important;
}
.agi-footer-text a { color: rgba(255,255,255,0.82) !important; text-decoration: none !important; }
.agi-footer-text a:hover { color: #fff !important; text-decoration: underline !important; }
.agi-footer-text strong { color: rgba(255,255,255,0.72) !important; font-weight: 600 !important; }

/* Navigation lists — plain, no bullets, no › arrow */
.agi-footer-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.agi-footer-list li {
  margin-bottom: 6px !important;
  padding: 0 !important;
}
.agi-footer-list li a {
  font-size: 0.8rem !important;
  color: rgba(255,255,255,0.72) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
  display: inline-block;
}
.agi-footer-list li a:hover { color: #fff !important; }

/* Social links — circle border icons */
.agi-footer-social {
  margin-top: 18px !important;
  gap: 8px !important;
  padding: 0 !important;
  list-style: none !important;
}
.agi-footer-social.wp-block-social-links {
  display: flex !important;
  flex-wrap: wrap;
}
.agi-footer-social .wp-block-social-link {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}
.agi-footer-social .wp-block-social-link:hover {
  border-color: rgba(255,255,255,0.8) !important;
  background: rgba(255,255,255,0.08) !important;
}
.agi-footer-social .wp-block-social-link a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
}
.agi-footer-social .wp-block-social-link svg {
  width: 14px !important;
  height: 14px !important;
  fill: rgba(255,255,255,0.8) !important;
}

/* Bottom copyright bar — darker strip */
.agi-footer-bottom {
  background-color: #444d57 !important;
  padding: 16px 40px !important;
  text-align: center !important;
}
.agi-footer-copy {
  font-size: 0.75rem !important;
  color: rgba(255,255,255,0.45) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}
.agi-footer-copy a { color: rgba(255,255,255,0.65) !important; text-decoration: none !important; }
.agi-footer-copy a:hover { color: #fff !important; }
.agi-footer-copy strong { font-weight: 600 !important; color: rgba(255,255,255,0.65) !important; }

/* =============================================
   RESPONSIVE — content width breakpoints
   ============================================= */

/* Shared content-width wrapper applied via margin:auto on key sections */
.agi-about-columns,
.agi-footer-inner,
.agi-sponsors-section > .wp-block-group,
.agi-sponsors-section,
.agi-promo-section {
  box-sizing: border-box;
}

/* ≥1440px — full 1200px content width */
@media (min-width: 1440px) {
  .agi-about-columns     { max-width: 1200px; margin-left: auto; margin-right: auto; }
  .agi-footer-inner      { max-width: 1200px; margin-left: auto; margin-right: auto; }
  .agi-sponsors-section  { padding-left: calc((100% - 1200px) / 2); padding-right: calc((100% - 1200px) / 2); }
  .agi-promo-cards       { max-width: 100%; }
  .agi-slide-text        { padding-left: 100px !important; }
}

/* 1263px–1439px */
@media (min-width: 1263px) and (max-width: 1439px) {
  .agi-about-columns     { width: 1000px; margin-left: auto; margin-right: auto; }
  .agi-footer-inner      { width: 1000px; margin-left: auto; margin-right: auto; }
  .agi-sponsors-section  { padding-left: calc((100% - 1000px) / 2); padding-right: calc((100% - 1000px) / 2); }
  .agi-slide-text        { padding-left: 80px !important; }
}

/* 1024px–1262px */
@media (min-width: 1024px) and (max-width: 1262px) {
  .agi-about-columns     { max-width: 900px; margin-left: auto; margin-right: auto; }
  .agi-footer-inner      { max-width: 900px; margin-left: auto; margin-right: auto; }
  .agi-sponsors-section  { padding-left: 40px; padding-right: 40px; }
  .agi-slide-text        { padding-left: 60px !important; }
}

/* 768px–1023px — tablet landscape */
@media (min-width: 768px) and (max-width: 1023px) {
  .agi-about-columns     { max-width: 700px; margin-left: auto; margin-right: auto; gap: 36px !important; }
  .agi-footer-inner      { max-width: 100%; padding: 48px 32px 36px !important; }
  .agi-footer-columns    { gap: 28px !important; }
  .agi-sponsors-section  { padding-left: 32px; padding-right: 32px; }
  .agi-sponsor-item      { flex: 0 0 16.666% !important; }
  .agi-slide-text        { padding-left: 48px !important; }
  .agi-slide             { min-height: 440px !important; }
  .agi-promo-cards       { flex-direction: row !important; }
}

/* 640px–767px */
@media (min-width: 640px) and (max-width: 767px) {
  .agi-about-columns     { width: 600px; margin-left: auto; margin-right: auto; flex-direction: column !important; }
  .agi-about-content,
  .agi-about-image       { flex: 0 0 100% !important; }
  .agi-footer-inner      { width: 600px; margin-left: auto; margin-right: auto; padding-top: 40px !important; padding-bottom: 28px !important; }
  .agi-footer-columns    { flex-direction: column !important; gap: 0 !important; }
  .agi-sponsors-section  { padding-left: 20px; padding-right: 20px; }
  .agi-sponsor-item      { flex: 0 0 25% !important; }
  .agi-slide             { min-height: 380px !important; }
  .agi-slide-text        { padding-left: 32px !important; padding-right: 24px !important; }
  .agi-promo-cards       { flex-direction: column !important; }
  .agi-sub-nav-wrapper   { flex-direction: column !important; }
  .agi-sub-nav-bar       { flex-wrap: wrap !important; }
  .agi-nav-icon-wrap     { flex: 0 0 33.333% !important; min-width: 33.333% !important; }
  .agi-footer-col        { padding-bottom: 24px !important; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .agi-footer-col:last-child { border-bottom: none !important; }
}

/* <640px — mobile */
@media (max-width: 639px) {
  .agi-about-columns     { flex-direction: column !important; padding: 0 20px; }
  .agi-about-content,
  .agi-about-image       { flex: 0 0 100% !important; }
  .agi-about-section     { padding: 40px 0; }
  .agi-footer-inner      { padding: 36px 20px 24px !important; }
  .agi-footer-columns    { flex-direction: column !important; gap: 0 !important; }
  .agi-footer-col        { padding-bottom: 20px !important; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 0 !important; }
  .agi-footer-col:last-child { border-bottom: none !important; }
  .agi-sponsors-section  { padding-left: 16px; padding-right: 16px; }
  .agi-sponsor-item      { flex: 0 0 33.333% !important; }
  .agi-slide             { min-height: 300px !important; }
  .agi-slide-text        { padding: 0 20px 0 24px !important; max-width: 100% !important; }
  .agi-slide-caption     { font-size: clamp(1.3rem, 5vw, 1.8rem) !important; }
  .agi-slide-subcaption  { font-size: 0.85rem !important; }
  .agi-promo-cards       { flex-direction: column !important; }
  .agi-sub-nav-wrapper   { flex-direction: column !important; }
  .agi-sub-nav-bar       { flex-wrap: wrap !important; }
  .agi-nav-icon-wrap     { flex: 0 0 50% !important; min-width: 50% !important; }
  .agi-footer-heading    { font-size: 0.78rem !important; }
  .agi-promo-card        { min-height: 220px !important; }
}