/* Hello ACLM chrome.
   Colour, font and easing tokens live here and are the single source for both
   the theme and the ACLM Sections plugin. Component styling comes from the
   plugin's monolith.css (the ported guide system); this file only holds the
   page shell, the nav wrapper, and the mobile drawer the guide has no component
   for. Do not restyle .aclm-nav / .aclm-foot internals here. */

:root {
  /* The page ground is warm paper. --aclm-bg is the dark tone, kept for
     sections set to frame-dark and for the dark cards. */
  --aclm-bg: #0f0b0b;
  --aclm-text: #f6f0ee;
  --aclm-text-dim: rgba(246, 240, 238, 0.85);
  --aclm-border-16: rgba(246, 240, 238, 0.16);
  --aclm-pill: rgba(246, 240, 238, 0.16);
  /* The accent is the logo red, on both grounds. Contrast on #0f0b0b is 4.52,
     on paper 3.84, which clears the large-text threshold everywhere it is used.
     accent-deep is NOT a light-ground variant any more: it is reserved for the
     few places small text sits on paper or blush, where it measures 5.80. */
  --aclm-accent: #e63224;
  --aclm-accent-deep: #ae1d20;
  --aclm-ink: #1c1315;
  --aclm-paper: #f6f0ee;
  --aclm-blush: #f0e8e5;
  --aclm-font: "Hanken Grotesk", sans-serif;
  --aclm-ease: cubic-bezier(0.625, 0.05, 0, 1);
}

html { background: var(--aclm-paper); }

.aclm-body,
.aclm-body .site-main {
  font-family: var(--aclm-font);
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 150%;
  background: var(--aclm-paper);
  color: var(--aclm-ink);
  -webkit-font-smoothing: antialiased;
}

.aclm-body * { box-sizing: border-box; }

/* House rule: accent words use colour, never italics. */
.aclm-body em,
.aclm-body i { font-style: normal; }

.aclm-skip { position: absolute; left: -999px; top: 0; }
.aclm-skip:focus { left: 16px; z-index: 100; background: #fff; color: #111; padding: 8px 12px; }

/* Lockup in the nav. The only logo ACLM supply is the stacked one, so this is
   that same artwork re-laid horizontally, with the red mark left exactly as
   drawn and the wordmark in the black of the supplied file. */
.aclm-wordmark img {
  display: block;
  height: 38px;
  width: auto;
}

@media (max-width: 767px) {
  .aclm-wordmark img { height: 32px; }
}

/* The nav floats over the hero on every page. */
.aclm-navwrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: transparent;
}

/* Views with no photo hero (404, search, archives) have nothing to float over,
   so the nav takes its own space and Hello's default templates take the ACLM
   gutter, lining the page body up with the nav and footer. The selectors carry
   .aclm-body to outrank Hello's body:not([class*=elementor-page-]) .site-main. */
.aclm-body.aclm-paper-nav .aclm-navwrap { position: relative; }
.aclm-body.aclm-paper-nav .site-main {
  max-width: none;
  padding: 48px max(var(--aclm-pad-x, 32px), calc((100% - var(--aclm-max, 1800px)) / 2)) var(--aclm-pad-y, 120px);
}
.aclm-body.aclm-paper-nav .page-header .entry-title {
  max-width: none;
  padding-inline: 0;
}
/* Hello's reset paints links #c36, which shows on search result titles. */
.aclm-body.aclm-paper-nav .site-main a { color: var(--aclm-ink); }
.aclm-body.aclm-paper-nav .site-main a:hover { color: var(--aclm-accent-deep); }

/* Mobile drawer. No guide component: the guide simply drops the links at 767px. */
.aclm-burger {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--aclm-ink-16, rgba(28, 19, 21, 0.16));
  border-radius: 100vw;
  background: transparent;
  padding: 10px 11px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}
.aclm-burger span { display: block; height: 1.5px; background: var(--aclm-ink); }
.aclm-navwrap.frame-dark .aclm-burger { border-color: var(--aclm-border-16); }
.aclm-navwrap.frame-dark .aclm-burger span { background: var(--aclm-text); }
/* Hello Elementor's reset paints button:hover and button:focus #c36. */
.aclm-burger:hover, .aclm-burger:focus { background: transparent; }
.aclm-burger:focus-visible { outline: 2px solid var(--aclm-accent); outline-offset: 2px; }

.aclm-drawer {
  display: none;
  flex-direction: column;
  gap: 18px;
  padding: 16px 32px 32px;
  background: rgba(246, 240, 238, 0.97);
}
.aclm-drawer a { color: var(--aclm-ink); text-decoration: none; font-size: 18px; font-weight: 600; }

@media (max-width: 767px) {
  .aclm-burger { display: flex; }
  .aclm-drawer:not([hidden]) { display: flex; }
}

.elementor-kit-1,
.aclm-body .elementor-section,
.aclm-body .e-con { --e-global-color-primary: var(--aclm-ink); }

@media (prefers-reduced-motion: reduce) {
  .aclm-nav-cta::before { transition: none; }
}

/* ---------- Touch targets on mobile ----------
   The drawer links and the footer contact links were rendering at 24 to 26px
   tall. Both are primary actions on a phone (the drawer is the only navigation,
   and the footer holds the only tap-to-call), so the target is padded out to
   44px without changing the type size or the visual rhythm. */
@media (max-width: 767px) {
  .aclm-drawer a {
    display: flex; align-items: center;
    min-height: 44px; padding: 4px 0;
  }
  .aclm-foot-item .aclm-big a {
    display: inline-flex; align-items: center;
    min-height: 44px;
  }
}

/* Client-supplied stacked logo and branch-specific footer details. */
.aclm-body .aclm-wordmark img { height: 70px; width: auto; }
@media (max-width: 767px) {
  .aclm-body .aclm-wordmark img { height: 54px; }
}
@media (max-width: 991px) {
  .aclm-body .aclm-links { display: none; }
  .aclm-body .aclm-burger { display: flex; }
  .aclm-body .aclm-drawer:not([hidden]) { display: flex; }
}

/* Separate navigation, branch details and shared contact channels. */
.aclm-body .aclm-foot-grid { grid-template-columns: 1fr 1fr 1fr; gap: 48px 56px; }
.aclm-body .aclm-foot-menu { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 32px; padding-bottom: 28px; border-bottom: 1px solid var(--aclm-ink-20); }
.aclm-body .aclm-foot-menu a { font-size: 16px; line-height: 1.4; min-height: 44px; display: inline-flex; align-items: center; }
.aclm-footer-office, .aclm-footer-connect { min-width: 0; }
.aclm-foot h2 { margin: 0 0 24px; font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -.02em; }
.aclm-foot h2 span { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--aclm-ink-64); }
.aclm-footer-address { margin: 0 0 24px; font-size: 16px; line-height: 1.6; }
.aclm-footer-hours { margin: 0 0 16px; font-size: 14px; line-height: 1.6; }
.aclm-footer-hours > div { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; margin-top: 12px; }
.aclm-footer-hours dt { font-weight: 500; }
.aclm-footer-hours dd { margin: 0; }
.aclm-footer-note { margin: 0; font-size: 13px; line-height: 1.6; color: var(--aclm-ink-64); }
.aclm-footer-links { display: flex; flex-direction: column; align-items: flex-start; margin-top: -8px; margin-bottom: 20px; }
.aclm-footer-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 19px; color: var(--aclm-ink); }
.aclm-footer-links a:hover { color: var(--aclm-accent); }
.aclm-footer-wechat { display: flex; align-items: center; gap: 18px; }
.aclm-footer-wechat img { display: block; width: 116px; height: 116px; padding: 6px; background: #fff; }
.aclm-footer-wechat p { margin: 0; font-size: 14px; line-height: 1.6; }
.aclm-footer-wechat p span { display: block; }
.aclm-footer-whatsapp { margin-top: 20px; }
.aclm-footer-connect .aclm-footer-whatsapp a { display: inline-flex; align-items: center; min-height: 44px; margin-left: 12px; font-size: 15px; color: var(--aclm-ink); }
.aclm-footer-connect .aclm-footer-whatsapp a:hover, .aclm-footer-connect .aclm-footer-whatsapp a:focus-visible { color: var(--aclm-accent-deep); }
@media (max-width: 991px) {
  .aclm-body .aclm-foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .aclm-footer-connect { grid-column: 1 / -1; border-top: 1px solid var(--aclm-ink-20); padding-top: 28px; }
}
@media (max-width: 600px) {
  .aclm-body .aclm-foot-grid { grid-template-columns: 1fr; gap: 32px; }
  .aclm-body .aclm-foot-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; padding-bottom: 24px; }
  .aclm-body .aclm-foot-menu a { font-size: 14px; }
  .aclm-footer-office + .aclm-footer-office { padding-top: 28px; border-top: 1px solid var(--aclm-ink-20); }
  .aclm-foot h2 { margin-bottom: 20px; }
}