/*
 * AZTEK UI: the site-wide look from the picked homepage design (artifact V5Eb76kQVvfrvxS1PiaJhN).
 * Loaded by mu-plugins/aztek-ui.php. Every rule starts from body.aztek-ui, the class that plugin adds, so this file
 * does nothing unless the switch is on. Page words, layouts and widgets stay as they are.
 * Change it: edit this file and upload it again. aztek-ui.php versions it by the file's date, so browsers get the new copy at once.
 * Notes: drafts\theme_2026-10-30\README.md
 */

/* Newsreader for the headings: self-hosted next to Montserrat (uploaded 28 Oct). Italic loads only if a page uses it. */
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/wp-content/uploads/aztek-fonts/newsreader-500-normal-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: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/wp-content/uploads/aztek-fonts/newsreader-400-italic-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; }

/* ---------- 1. The design's colours and type ---------- */
body.aztek-ui {
  --az-maroon: #7E0808; --az-deep: #6C0606; --az-night: #4A0606; --az-amber: #E79118; --az-tint: #F7D8B2; --az-blush: #F2D9D6;
  --az-ink: #1B1514; --az-slate: #474D57; --az-muted: #6B645E; --az-band: #F6F3EF; --az-line: #E7E1D9; --az-field: #8A8079; --az-error: #B42318;
  --az-sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --az-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --az-abar: 0px;                         /* height of the WordPress toolbar for signed-in staff */
  --az-hdr-h: 64px;
  /* header spacing, 10 gaps in the row: 21 px from 1,320 px wide, tightening to 16 px at 1,270 px, so the logo with its pyramid, 9 menu items, phone and button stay on one line */
  --az-gap: clamp(16px, calc((100vw - 1110px) / 10), 21px);
  color: var(--az-slate);
  font-family: var(--az-sans);
  font-weight: 400;
}
@media screen and (min-width: 783px) { body.aztek-ui.admin-bar { --az-abar: 32px; } }
@media screen and (max-width: 782px) { body.aztek-ui.admin-bar { --az-abar: 46px; } }
@media screen and (max-width: 600px) { body.aztek-ui.admin-bar { --az-abar: 0px; } }
html:has(body.aztek-ui) { scroll-padding-top: calc(var(--az-hdr-h, 64px) + 16px); }
body.aztek-ui ::selection { background: var(--az-tint); color: var(--az-ink); }

/* ---------- 2. Links (Phlox's default is cyan; :where keeps these weaker than any widget's own colour) ---------- */
:where(body.aztek-ui) a { color: var(--az-maroon); }
:where(body.aztek-ui) a:hover { color: var(--az-deep); }
body.aztek-ui .elementor-icon-box-description a,
body.aztek-ui .elementor-widget-text-editor a { color: var(--az-maroon); }
body.aztek-ui a:focus-visible, body.aztek-ui button:focus-visible, body.aztek-ui input:focus-visible, body.aztek-ui textarea:focus-visible, body.aztek-ui [role="button"]:focus-visible { outline: 2px solid var(--az-maroon); outline-offset: 2px; }

/* ---------- 3. Headings: Newsreader to H4, Montserrat below. Sizes stay as they are on each page. ---------- */
body.aztek-ui :is(h1, h2, h3, h4, .aux-h1, .aux-h2, .aux-h3, .aux-h4) { font-family: var(--az-serif); font-weight: 500; letter-spacing: -0.01em; color: var(--az-ink); }
body.aztek-ui :is(h1, .aux-h1) { letter-spacing: -0.018em; }
body.aztek-ui :is(h1, h2, h3, h4) :is(strong, b) { font-weight: 500; }
body.aztek-ui :is(h5, h6, .aux-h5, .aux-h6) { font-family: var(--az-sans); font-weight: 600; letter-spacing: 0; color: var(--az-ink); }
body.aztek-ui .aux-modern-heading-primary, body.aztek-ui .aux-modern-heading-primary a { color: var(--az-maroon) !important; }
body.aztek-ui .aux-modern-heading-secondary { color: var(--az-ink) !important; }
body.aztek-ui .entry-title a { color: inherit; }
body.aztek-ui .entry-title a:hover { color: var(--az-maroon); }

/* ---------- 4. Small parts that carry the old reds ---------- */
body.aztek-ui .elementor-widget-icon-box .elementor-icon, body.aztek-ui .elementor-widget-icon-box .elementor-icon i { color: var(--az-maroon) !important; fill: var(--az-maroon) !important; }
body.aztek-ui .elementor-widget-divider { --divider-color: var(--az-maroon) !important; }

/* ---------- 5. Buttons: the design's maroon pill ---------- */
body.aztek-ui #main .elementor-widget-button:not(#az-home *) .elementor-button,
body.aztek-ui .aux-button,
body.aztek-ui .wpforms-container button.wpforms-submit {
  display: inline-flex !important; align-items: center; justify-content: center; min-height: 48px; margin: 0;
  padding: 0 24px !important; border: 1.5px solid var(--az-maroon) !important; border-radius: 999px !important; box-shadow: none !important;
  background: var(--az-maroon) !important; color: #FFFFFF !important;
  font-family: var(--az-sans) !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: 0;
  text-decoration: none; cursor: pointer; transition: background-color .2s, border-color .2s;
}
body.aztek-ui #main .elementor-widget-button:not(#az-home *) .elementor-button:hover,
body.aztek-ui .aux-button:hover,
body.aztek-ui .wpforms-container button.wpforms-submit:hover { background: var(--az-deep) !important; border-color: var(--az-deep) !important; color: #FFFFFF !important; }
body.aztek-ui .aux-button .aux-overlay { display: none !important; }
/* "Read More" on the blog, news and search lists: the design's small outline pill */
body.aztek-ui .aux-read-more {
  display: inline-flex !important; align-items: center; min-height: 36px; padding: 0 16px !important; border: 1.5px solid var(--az-maroon) !important; border-radius: 999px !important;
  background: transparent !important; color: var(--az-maroon) !important; font-family: var(--az-sans) !important; font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.2 !important; text-decoration: none; transition: background-color .2s, color .2s;
}
body.aztek-ui .aux-read-more::after { display: none !important; }
body.aztek-ui .aux-read-more:hover { background: var(--az-maroon) !important; color: #FFFFFF !important; }
body.aztek-ui .aux-read-more .aux-read-more-text { color: inherit !important; }

/* ---------- 6. The form (WPForms 904): the design's fields. WPForms' own CSS can load after this file, hence !important. ---------- */
body.aztek-ui .wpforms-container .wpforms-field { padding: 8px 0 !important; }
body.aztek-ui .wpforms-container .wpforms-field-label { margin: 0 0 6px !important; font-family: var(--az-sans) !important; font-size: 13.5px !important; font-weight: 600 !important; color: var(--az-ink) !important; }
body.aztek-ui .wpforms-container .wpforms-required-label { color: var(--az-maroon) !important; }
body.aztek-ui .wpforms-container input[type="text"], body.aztek-ui .wpforms-container input[type="email"], body.aztek-ui .wpforms-container input[type="tel"], body.aztek-ui .wpforms-container textarea {
  width: 100% !important; max-width: none !important; min-height: 48px; margin: 0 !important; padding: 12px 14px !important; border: 1px solid var(--az-field) !important; border-radius: 12px !important;
  background: #FFFFFF !important; box-shadow: none !important; font-family: var(--az-sans) !important; font-size: 16px !important; line-height: 1.4 !important; color: var(--az-ink) !important;
}
body.aztek-ui .wpforms-container input[type="text"], body.aztek-ui .wpforms-container input[type="email"], body.aztek-ui .wpforms-container input[type="tel"] { height: 48px !important; }
body.aztek-ui .wpforms-container textarea { min-height: 140px; resize: vertical; }
body.aztek-ui .wpforms-container input:focus, body.aztek-ui .wpforms-container textarea:focus { outline: 2px solid var(--az-maroon) !important; outline-offset: 1px; border-color: var(--az-maroon) !important; }
body.aztek-ui .wpforms-container em.wpforms-error, body.aztek-ui .wpforms-container label.wpforms-error { margin: 4px 0 0 !important; font-size: 13px !important; font-weight: 600 !important; font-style: normal !important; color: var(--az-error) !important; }
body.aztek-ui .wpforms-container .wpforms-submit-container { margin-top: 14px !important; padding: 0 !important; }
body.aztek-ui .wpforms-confirmation-container-full { margin: 0; padding: 12px 16px; border: 0; border-radius: 12px; background: var(--az-band); color: var(--az-ink); }

/* ---------- 7. Lists, navigation, go-to-top ---------- */
body.aztek-ui .aux-pagination li > a, body.aztek-ui .aux-pagination li > span { border-color: var(--az-line); color: var(--az-ink); }
body.aztek-ui .aux-pagination li > a:hover, body.aztek-ui .aux-pagination li.active > span { background-color: var(--az-maroon); border-color: var(--az-maroon); color: #FFFFFF; }
body.aztek-ui .aux-next-prev-posts .np-title { font-family: var(--az-sans); color: var(--az-ink); }
body.aztek-ui .aux-next-prev-posts .np-nav-text { color: var(--az-muted); }
body.aztek-ui .aux-next-prev-posts .aux-arrow-nav.aux-outline { box-shadow: 0 0 0 1px var(--az-maroon) inset; }
body.aztek-ui .aux-arrow-nav.aux-outline .aux-overlay::after, body.aztek-ui .aux-arrow-nav .aux-overlay::after { background-color: var(--az-maroon); }
body.aztek-ui .aux-goto-top-btn .aux-arrow-nav.aux-outline { box-shadow: 0 0 0 1.5px var(--az-maroon) inset; }
body.aztek-ui .not-found .aux-back-to-home { color: var(--az-maroon); }

/* ---------- 8. Header (template "AZTEK Header 2026", class az-hdr) ---------- */
/* Phlox's overflow-x: hidden on #inner-body stops position: sticky; clip doesn't. The sticky header sits above page widgets. */
body.aztek-ui #inner-body { overflow-x: clip; }
body.aztek-ui #site-elementor-header { position: sticky; top: var(--az-abar); z-index: 1000; }
/* The frosted bar is a layer behind the header, not a filter on it: a filter on the header would trap Phlox's full-screen menu. */
body.aztek-ui #site-elementor-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); box-shadow: 0 1px 0 rgba(27, 21, 20, .09); }
body.aztek-ui .az-hdr .az-hdr-right { gap: var(--az-gap); }
body.aztek-ui .az-hdr .aux-master-menu.aux-horizontal { display: flex; gap: var(--az-gap); }
body.aztek-ui .az-hdr .aux-elementor-header-menu .aux-menu-depth-0 { padding: 0; }
body.aztek-ui .az-hdr .aux-elementor-header-menu .aux-menu-depth-0 > .aux-item-content { padding: 6px 0; font-family: var(--az-sans); font-size: 14px; font-weight: 500; line-height: 1.6; letter-spacing: 0; text-transform: none; color: var(--az-ink); }
body.aztek-ui .az-hdr .aux-elementor-header-menu .aux-menu-depth-0.aux-hover > .aux-item-content,
body.aztek-ui .az-hdr .aux-elementor-header-menu .aux-menu-depth-0 > .aux-item-content:hover,
body.aztek-ui .az-hdr .aux-elementor-header-menu .current-menu-item > .aux-item-content { color: var(--az-maroon); }
body.aztek-ui .az-hdr .az-tel, body.aztek-ui .az-hdr .az-call, body.aztek-ui .az-hdr .az-cta { flex: none; }
body.aztek-ui .az-hdr .az-tel a, body.aztek-ui .az-hdr .az-cta .elementor-button { white-space: nowrap; }
body.aztek-ui .az-hdr .az-call { display: none; }
body.aztek-ui .az-hdr .az-call .elementor-icon-list-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* below 1,270 px the phone number becomes a phone icon, which frees room for the gaps; the menu turns into the burger at 1,180 px (set in the Phlox menu widget) */
@media (max-width: 1269px) { body.aztek-ui { --az-gap: clamp(14px, calc((100vw - 1040px) / 10), 21px); } body.aztek-ui .az-hdr .az-tel { display: none; } body.aztek-ui .az-hdr .az-call { display: block; } }
@media (max-width: 1180px) { body.aztek-ui .az-hdr .az-hdr-right { gap: 8px; } body.aztek-ui .az-hdr .az-nav { order: 9; } }
/* the burger and Phlox's full-screen menu, in the design's words */
body.aztek-ui .az-hdr .aux-burger:before, body.aztek-ui .az-hdr .aux-burger:after, body.aztek-ui .az-hdr .aux-burger .mid-line { border-color: var(--az-ink); }
/* The panel sits inside the header, so these need more strength than the bar's menu rules above and the widget's own CSS */
body.aztek-ui .az-hdr .aux-fs-popup { background-color: #FFFFFF; }
body.aztek-ui .az-hdr .aux-fs-popup .aux-master-menu .aux-menu-depth-0 > .aux-item-content { padding: 8px 0; font-family: var(--az-serif); font-size: 26px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; text-transform: none; color: var(--az-ink); }
body.aztek-ui .az-hdr .aux-fs-popup .aux-master-menu .aux-menu-depth-0.current-menu-item > .aux-item-content { color: var(--az-maroon); }
body.aztek-ui .aux-fs-popup .aux-panel-close { border-color: var(--az-maroon); }

/* ---------- 9. Footer (template "AZTEK Footer 2026", class az-ft) ---------- */
body.aztek-ui .az-ft .az-serif .elementor-heading-title { font-family: var(--az-serif); }
body.aztek-ui .az-ft a { text-decoration: none; }
body.aztek-ui .az-ft .elementor-icon-list-item a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
body.aztek-ui .az-lw { display: block; white-space: nowrap; color: var(--az-amber); }
body.aztek-ui .az-lw img { display: inline-block; width: auto; height: .76em; max-width: none; margin: 0; border: 0; box-shadow: none; vertical-align: baseline; }

/* Only this file's own effects. Never a blanket "* { transition: none }": Phlox's grids wait for transition events and break without them. */
@media (prefers-reduced-motion: reduce) { body.aztek-ui .aux-button, body.aztek-ui .aux-read-more, body.aztek-ui .elementor-button, body.aztek-ui .wpforms-submit { transition: none; } }