/* =====================================================================
   AMHQ Homepage — design details for the homepage.
   Text, colours, sizes and links are set in Elementor (editable there).
   This file adds the extras Elementor Free can't do on its own:
   the background shape, the brushstroke underline, the ringed icons,
   the value boxes, spacing, hover effects and phone/tablet layout.
   Everything is scoped to AMHQ classes so it won't touch other pages.
   ===================================================================== */

.amhq, .amhq-sec {
  --amhq-navy: #29253D;
  --amhq-navy-deep: #1E1B2C;
  --amhq-blue: #529AC8;
  --amhq-blue-text: #2F6F9E;
  --amhq-blue-light: #7DB6DD;
  --amhq-grey: #ACABB9;
  --amhq-ink-3: #4A4659;
  --amhq-line: #E1E5EC;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.amhq, .amhq *, .amhq-sec, .amhq-sec * { box-sizing: border-box; }
.amhq { color: var(--amhq-navy); line-height: 1.5; }
.amhq :where(h1, h2, h3, p, ul) { margin: 0; padding: 0; font-family: inherit; }
.amhq :where(h1, h2, h3) { color: inherit; text-transform: none; letter-spacing: normal; }
.amhq img { max-width: 100%; height: auto; display: block; border: 0; }
.amhq a { color: inherit; text-decoration: none; }
.amhq a:focus-visible, .amhq button:focus-visible, .amhq input:focus-visible,
.amhq-sec a:focus-visible { outline: 3px solid var(--amhq-blue); outline-offset: 3px; }
.amhq .amhq-container { max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.amhq .amhq-eyebrow { font-size: 14px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--amhq-blue-text); margin-bottom: 10px; }
.amhq .amhq-h2 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; line-height: 1.15; }
.amhq .amhq-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Elementor spacing: we control the gaps between widgets ---------- */
.amhq-sec .elementor-widget:not(:last-child) { margin-bottom: 0; margin-block-end: 0; }
.amhq-sec .elementor-widget.amhq-mb-10 { margin-bottom: 10px !important; margin-block-end: 10px !important; }
.amhq-sec .elementor-widget.amhq-mb-16 { margin-bottom: 16px !important; margin-block-end: 16px !important; }
.amhq-sec .elementor-widget.amhq-mb-20 { margin-bottom: 20px !important; margin-block-end: 20px !important; }
.amhq-sec .elementor-widget.amhq-mb-28 { margin-bottom: 28px !important; margin-block-end: 28px !important; }
.amhq-sec .elementor-widget.amhq-mb-36 { margin-bottom: 36px !important; margin-block-end: 36px !important; }
.amhq-sec .elementor-widget.amhq-mb-40 { margin-bottom: 40px !important; margin-block-end: 40px !important; }
.amhq-sec .elementor-widget.amhq-mb-56 { margin-bottom: 56px !important; margin-block-end: 56px !important; }
.amhq-sec .elementor-inner-section.amhq-mb-36 { margin-bottom: 36px !important; }
.amhq-sec .elementor-text-editor p:last-child, .amhq-sec .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* ---------- Typography (Elementor panel settings override these) ---------- */
.amhq-sec .elementor-heading-title, .amhq-sec .elementor-widget-text-editor, .amhq-sec .elementor-button,
.amhq-sec .elementor-icon-box-title, .amhq-sec .elementor-icon-box-description, .amhq-sec .elementor-icon-list-text { font-family: 'Poppins', system-ui, sans-serif !important; }
.amhq-sec .amhq-t-eyebrow .elementor-heading-title { font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: .2em; text-transform: uppercase; color: var(--amhq-blue-text); }
.amhq-sec .amhq-t-eyebrow-lg .elementor-heading-title { font-size: 16px; letter-spacing: .22em; }
.amhq-sec .amhq-t-h1 .elementor-heading-title { font-size: clamp(40px, 5.2vw, 76px); font-weight: 800; line-height: 1.08; letter-spacing: -.01em; color: var(--amhq-navy); }
.amhq-sec .amhq-t-h2 .elementor-heading-title { font-size: clamp(28px, 3.2vw, 44px); font-weight: 700; line-height: 1.15; color: var(--amhq-navy); }
.amhq-sec .amhq-t-values-h .elementor-heading-title { font-size: clamp(22px, 2.4vw, 34px); font-weight: 700; line-height: 1.25; letter-spacing: .04em; text-transform: uppercase; color: #FFFFFF; }
.amhq-sec .amhq-t-lead, .amhq-sec .amhq-t-lead p { font-size: 19px; line-height: 1.65; color: #555266; max-width: 520px; }
.amhq-sec .amhq-btn-shadow .elementor-button { font-size: 17px; font-weight: 600; line-height: 1.2; border-radius: 10px; }
.amhq-sec .amhq-insta-btn .elementor-button { font-size: 16px; font-weight: 600; line-height: 1.2; border-radius: 10px; }
.amhq-sec .amhq-catbox .elementor-icon-box-title { font-size: 24px; font-weight: 700; line-height: 1.3; color: var(--amhq-navy); margin: 0 0 10px; }
.amhq-sec .amhq-catbox .elementor-icon-box-description { font-size: 15px; line-height: 1.6; color: var(--amhq-ink-3); }
.amhq-sec .amhq-values-list .elementor-icon-list-text { font-size: 16px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #FFFFFF; }
.amhq-sec .amhq-footer-links .elementor-icon-list-text { font-size: 14px; color: var(--amhq-blue-text); }

/* ---------- 1. Header (HTML widget) ---------- */
.amhq-header { position: relative; z-index: 3; }
.amhq-header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; }
.amhq-logo img { height: 56px; width: auto; }
.amhq-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 36px; font-size: 16px; font-weight: 500; }
.amhq-nav > a { color: var(--amhq-navy); padding: 10px 0; }
.amhq-nav > a:hover { color: var(--amhq-blue-text); }
.amhq-search { display: flex; align-items: center; background: #FFFFFF; border: 1px solid #C9CDD8; border-radius: 999px; height: 44px; padding: 0 6px 0 16px; margin: 0; }
.amhq-search input { border: 0 !important; outline: none; background: transparent !important; font: inherit; font-size: 15px; width: 130px; color: var(--amhq-navy); padding: 0 !important; box-shadow: none !important; min-height: 0 !important; height: auto !important; }
.amhq-search button { border: 0 !important; background: transparent !important; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0 !important; border-radius: 50%; min-height: 0; }
.amhq-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.amhq-nav-btn { display: none; width: 48px; height: 48px; border: 1px solid #C9CDD8; border-radius: 12px; background: #FFFFFF; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.amhq-nav-toggle:focus-visible + .amhq-nav-btn { outline: 3px solid var(--amhq-blue); outline-offset: 3px; }
.amhq-nav-btn span { display: block; width: 20px; height: 2px; background: var(--amhq-navy); border-radius: 2px; }

/* ---------- 1. Hero ---------- */
.amhq-hero-sec { position: relative; overflow: hidden; }
.amhq-hero-sec::before { content: ""; position: absolute; top: -120px; right: -140px; width: 760px; height: 820px; background: #E4ECF3; border-radius: 46% 54% 38% 62% / 42% 38% 62% 58%; pointer-events: none; z-index: 0; }
.amhq-hero-sec > .elementor-container { position: relative; z-index: 1; }
.amhq-hero-row { padding: 40px 0 64px; }
.amhq-hero-copy .elementor-widget-wrap { padding-right: 32px !important; }
.amhq-underline { position: relative; display: inline-block; white-space: nowrap; }
.amhq-underline::after { content: ""; position: absolute; left: -4%; bottom: -0.1em; width: 108%; height: 0.24em; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 24' preserveAspectRatio='none'%3E%3Cpath d='M4 16 C 50 6, 120 4, 216 10 C 150 10, 80 13, 30 20' fill='none' stroke='%23529AC8' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.amhq-btn-shadow .elementor-button { box-shadow: 0 14px 28px rgba(41,37,61,.22); transition: transform .15s ease, background-color .15s ease; }
.amhq-btn-shadow .elementor-button:hover { transform: translateY(-1px); }
.amhq-hero-art-svg { display: flex; justify-content: center; }
.amhq-hero-art-svg svg { width: 100%; max-width: 540px; height: auto; display: block; }

/* ---------- 2. Post of the week (AMHQ widget) ---------- */
.amhq-potw { background: var(--amhq-navy-deep); color: #E9E8EF; }
.amhq-potw-inner { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; padding-top: 96px; padding-bottom: 96px; }
.amhq-potw-media { flex: 1 1 520px; min-width: 0; max-width: 620px; }
.amhq-potw-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; }
.amhq-potw-copy { flex: 1 1 400px; min-width: 0; }
.amhq-potw .amhq-eyebrow { color: var(--amhq-blue-light); letter-spacing: .24em; margin-bottom: 16px; }
.amhq-potw h2 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; line-height: 1.15; color: #FFFFFF; margin-bottom: 20px; }
.amhq-potw h2 a { color: inherit; }
.amhq-potw-excerpt { color: #B4B2C2; font-size: 17px; line-height: 1.7; margin-bottom: 32px !important; }
.amhq-potw-link { display: inline-block; border-bottom: 2px solid var(--amhq-blue); color: #FFFFFF !important; padding-bottom: 6px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 15px; }
.amhq-potw-link:hover { color: var(--amhq-blue-light) !important; }

/* ---------- 3. Four categories (Icon Box widgets) ---------- */
.amhq-cats-row .elementor-container, .amhq-cats-row .elementor-row { flex-wrap: wrap; }
.amhq-cats-row .elementor-column .elementor-widget-wrap { padding: 0 16px !important; }
.amhq-catbox .elementor-icon { border: 6px solid #FFFFFF; box-shadow: 0 0 0 2px var(--amhq-blue); transition: transform .2s ease, background-color .2s ease; }
.amhq-catbox:hover .elementor-icon { transform: translateY(-4px); }
.amhq-catbox .elementor-icon-box-description { max-width: 240px; margin-left: auto; margin-right: auto; }
.amhq-catbox .elementor-icon-box-title a { color: inherit; text-decoration: none !important; }

/* ---------- 4. Values (Icon List widget, shown as boxes) ---------- */
.amhq-values-list .elementor-icon-list-items { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0 !important; padding: 0 !important; }
.amhq-values-list .elementor-icon-list-item { margin: 0 !important; padding: 22px 12px !important; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; justify-content: center; text-align: center; inset: auto !important; }
.amhq-values-list .elementor-icon-list-item::after { display: none !important; }
.amhq-values-list .elementor-icon-list-icon { display: none !important; }

/* ---------- 5. Latest articles (AMHQ widget) ---------- */
.amhq-latest { background: #FFFFFF; }
.amhq-latest-inner { padding-top: 96px; padding-bottom: 96px; }
.amhq-latest-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 40px; }
.amhq-latest-all { font-weight: 600; font-size: 16px; color: var(--amhq-blue-text) !important; }
.amhq-latest-grid { display: grid; grid-template-columns: repeat(var(--amhq-cols, 4), minmax(0, 1fr)); gap: 28px; }
.amhq-card { display: flex; flex-direction: column; color: var(--amhq-navy); border: 1px solid var(--amhq-line); border-radius: 14px; overflow: hidden; background: #FFFFFF; transition: box-shadow .2s ease, transform .2s ease; }
.amhq-card:hover { box-shadow: 0 16px 34px rgba(41,37,61,.12); transform: translateY(-3px); }
.amhq-card-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #E4ECF3; display: block; }
.amhq-card-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.amhq-card-cat { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--amhq-blue-text); }
.amhq-card-title { font-size: 19px; font-weight: 700; line-height: 1.35; flex: 1; }
.amhq-card-more { font-size: 15px; font-weight: 600; color: var(--amhq-blue-text); }

/* ---------- 6. Instagram ---------- */
.amhq-insta-btn .elementor-button { transition: background-color .15s ease, color .15s ease; }

/* ---------- 7. Footer ---------- */
.amhq-footer-sec { border-top: 1px solid #DDDCE3; }
.amhq-footer-logo img { height: 44px; width: auto; display: block; }
.amhq-footer-links .elementor-icon-list-item::after { display: none !important; }
.amhq-footer-links a:hover .elementor-icon-list-text { text-decoration: underline; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .amhq-latest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .amhq-cats-row .elementor-column { width: 50% !important; margin-bottom: 40px; }
  .amhq-values-list .elementor-icon-list-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .amhq-nav { gap: 8px 24px; }
  .amhq-hero-sec::before { width: 560px; height: 620px; }
  .amhq-hero-copy .elementor-widget-wrap { padding-right: 0 !important; }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  .amhq-sec .amhq-t-lead, .amhq-sec .amhq-t-lead p { font-size: 17px; }
  .amhq-sec .amhq-catbox .elementor-icon-box-title { font-size: 19px; }
  .amhq-sec .amhq-catbox .elementor-icon-box-description { font-size: 14px; }
  .amhq-sec .amhq-values-list .elementor-icon-list-text { font-size: 14px; }
  .amhq-logo img { height: 44px; }
  .amhq-nav-btn { display: inline-flex; }
  .amhq-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; background: #FFFFFF; border: 1px solid var(--amhq-line); border-radius: 14px; padding: 8px 16px 16px; box-shadow: 0 16px 30px rgba(41,37,61,.12); }
  .amhq-nav > a { padding: 14px 0; border-bottom: 1px solid var(--amhq-line); }
  .amhq-search { margin-top: 14px; }
  .amhq-search input { width: 100%; flex: 1; }
  .amhq-nav-toggle:checked ~ .amhq-nav { display: flex; }
  .amhq-hero-sec::before { top: auto; bottom: -160px; right: -200px; width: 480px; height: 520px; }
  .amhq-hero-row { padding: 16px 0 48px; }
  .amhq-hero-copy { margin-bottom: 28px; }
  .amhq-btn-shadow .elementor-button { width: 100%; text-align: center; }
  .amhq-btn-shadow .elementor-button-content-wrapper { justify-content: center; }
  .amhq-potw-inner, .amhq-latest-inner { padding-top: 56px; padding-bottom: 56px; }
  .amhq-potw-inner { gap: 28px; }
  .amhq-catbox .elementor-icon { font-size: 44px !important; padding: 32px !important; }
  .amhq-values-list .elementor-icon-list-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .amhq-values-list .elementor-icon-list-item { padding: 18px 8px !important; }
  .amhq-latest-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .amhq-insta-row .elementor-widget-button .elementor-button-wrapper { text-align: left !important; }
}
@media (max-width: 340px) {
  .amhq-cats-row .elementor-column { width: 100% !important; }
}
