/* ==========================================================================
   ALTMEZ — GLOBAL BASE
   Typography · layout container · buttons · forms · cards · a11y
   Sits on top of Kadence. Uses tokens.css only — no raw hex.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Kadence global variable bridge
   Re-point Kadence's own custom properties at the ALTMEZ system so parent
   components inherit the redesign instead of being overridden case by case.
   -------------------------------------------------------------------------- */
:root {
  --global-content-width:       var(--altmez-container);
  --global-content-narrow-width: var(--altmez-container-tight);
  --global-body-font-family:    var(--altmez-font);
  --global-heading-font-family: var(--altmez-font);
  --global-primary-nav-font-family: var(--altmez-font);
  --global-content-edge-padding: var(--altmez-gutter);
  --global-xxl-spacing: var(--altmez-section);
}

/* --------------------------------------------------------------------------
   2. Typography
   -------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }

body,
button, input, select, optgroup, textarea,
.entry-content,
.wp-block-button__link,
.kb-button,
.header-navigation,
.mobile-navigation,
#colophon {
  font-family: var(--altmez-font);
  font-optical-sizing: auto;
}

body {
  font-size: var(--altmez-fs-body);
  font-weight: var(--altmez-fw-body);
  line-height: var(--altmez-lh-body);
  color: var(--altmez-text);
  background: var(--altmez-bg);
  overflow-x: hidden;               /* hard stop against horizontal scroll */
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.kt-adv-heading-wrapper,
.wp-block-kadence-advancedheading {
  font-family: var(--altmez-font);
  color: var(--altmez-text-strong);
  text-wrap: balance;
}

h1, .entry-title      { font-size: var(--altmez-fs-h1); font-weight: var(--altmez-fw-black); line-height: var(--altmez-lh-tight); letter-spacing: -.01em; }
h2                    { font-size: var(--altmez-fs-h2); font-weight: var(--altmez-fw-bold);  line-height: var(--altmez-lh-head); }
h3                    { font-size: var(--altmez-fs-h3); font-weight: var(--altmez-fw-bold);  line-height: var(--altmez-lh-head); }
h4                    { font-size: var(--altmez-fs-h4); font-weight: var(--altmez-fw-medium); line-height: var(--altmez-lh-head); }
h5, h6                { font-size: 1rem;                font-weight: var(--altmez-fw-medium); line-height: var(--altmez-lh-head); }

p { margin: 0 0 1.15em; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }

strong, b { font-weight: var(--altmez-fw-bold); }

::selection { background: var(--altmez-accent); color: var(--altmez-dark); }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
/* WordPress wraps the children of a core/group in an extra
   `.wp-block-group__inner-container`, which would sit between an ALTMEZ layout
   class and the elements it needs to lay out. Making that wrapper transparent
   lets grid/flex reach the real children — scoped to ALTMEZ groups only, so
   no other page's block layout is affected. */
.wp-block-group[class*="altmez-"] > .wp-block-group__inner-container { display: contents; }

.altmez-container {
  width: 100%;
  max-width: var(--altmez-container);
  margin-inline: auto;
  padding-inline: var(--altmez-gutter);
}

.altmez-container--tight { max-width: var(--altmez-container-tight); }

.altmez-section        { padding-block: var(--altmez-section); }
.altmez-section--soft  { background: var(--altmez-bg-soft); }
.altmez-section--dark  { background: var(--altmez-dark); color: var(--altmez-on-dark); }
.altmez-section--dark h1,
.altmez-section--dark h2,
.altmez-section--dark h3 { color: var(--altmez-on-dark); }

/* Section heading block — used across home, blog, archives */
.altmez-sechead { margin-bottom: var(--altmez-space-7); max-width: 62ch; }
.altmez-sechead__eyebrow {
  display: inline-flex; align-items: center; gap: var(--altmez-space-2);
  font-size: var(--altmez-fs-xs); font-weight: var(--altmez-fw-bold);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--altmez-muted);
  margin-bottom: var(--altmez-space-3);
}
.altmez-sechead__eyebrow::before {
  content: ""; inline-size: 26px; block-size: 3px; border-radius: var(--altmez-radius-pill);
  background: var(--altmez-accent);
}
.altmez-sechead__title { margin: 0 0 var(--altmez-space-3); }
.altmez-sechead__sub   { margin: 0; color: var(--altmez-muted); font-size: var(--altmez-fs-body); }
.altmez-sechead--center { margin-inline: auto; text-align: center; }
.altmez-sechead--center .altmez-sechead__eyebrow { justify-content: center; }

/* Responsive auto-grid — never leaves awkward orphans at 10/11/12/13+ items */
.altmez-grid {
  display: grid;
  gap: var(--altmez-grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.altmez-grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.altmez-grid--narrow { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* --------------------------------------------------------------------------
   4. Button system
   -------------------------------------------------------------------------- */
.altmez-btn {
  --_bg: var(--altmez-dark);
  --_fg: var(--altmez-on-dark);
  --_bd: var(--altmez-dark);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--altmez-space-2);
  min-block-size: 48px;
  padding: 12px 24px;
  border: 1.5px solid var(--_bd);
  border-radius: var(--altmez-radius-pill);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--altmez-font);
  font-size: var(--altmez-fs-sm);
  font-weight: var(--altmez-fw-medium);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--altmez-dur) var(--altmez-ease),
              color var(--altmez-dur) var(--altmez-ease),
              border-color var(--altmez-dur) var(--altmez-ease),
              transform var(--altmez-dur) var(--altmez-ease);
}
.altmez-btn:hover  { --_bg: var(--altmez-dark-2); --_bd: var(--altmez-dark-2); color: var(--_fg); }
.altmez-btn:active { transform: translateY(1px); }

.altmez-btn--accent    { --_bg: var(--altmez-accent); --_fg: var(--altmez-dark); --_bd: var(--altmez-accent); font-weight: var(--altmez-fw-bold); }
.altmez-btn--accent:hover { --_bg: var(--altmez-accent-600); --_bd: var(--altmez-accent-600); --_fg: var(--altmez-dark); }

.altmez-btn--outline   { --_bg: transparent; --_fg: var(--altmez-text); --_bd: var(--altmez-border-strong); }
.altmez-btn--outline:hover { --_bg: var(--altmez-dark); --_fg: var(--altmez-on-dark); --_bd: var(--altmez-dark); }

.altmez-btn--outline-light { --_bg: transparent; --_fg: var(--altmez-on-dark); --_bd: rgba(255,255,255,.35); }
.altmez-btn--outline-light:hover { --_bg: rgba(255,255,255,.12); --_bd: rgba(255,255,255,.6); --_fg: var(--altmez-on-dark); }

.altmez-btn--whatsapp  { --_bg: var(--altmez-whatsapp); --_fg: #fff; --_bd: var(--altmez-whatsapp); }
.altmez-btn--whatsapp:hover { --_bg: var(--altmez-whatsapp-700); --_bd: var(--altmez-whatsapp-700); --_fg: #fff; }

.altmez-btn--phone     { --_bg: transparent; --_fg: var(--altmez-text); --_bd: var(--altmez-border-strong); }
.altmez-btn--phone:hover { --_bg: var(--altmez-accent-soft); --_bd: var(--altmez-accent); --_fg: var(--altmez-text); }

.altmez-btn--sm { min-block-size: 40px; padding: 8px 18px; font-size: var(--altmez-fs-xs); }
.altmez-btn--lg { min-block-size: 56px; padding: 15px 32px; font-size: var(--altmez-fs-body); }
.altmez-btn--block { inline-size: 100%; }

.altmez-btn__icon { inline-size: 18px; block-size: 18px; flex: 0 0 auto; }

/* Align Kadence / core block buttons with the ALTMEZ system */
.wp-block-button__link,
.kb-button,
.button,
input[type="submit"],
button.wp-element-button {
  border-radius: var(--altmez-radius-pill);
  font-family: var(--altmez-font);
  font-weight: var(--altmez-fw-medium);
}

/* --------------------------------------------------------------------------
   5. Card system
   -------------------------------------------------------------------------- */
.altmez-card {
  display: flex; flex-direction: column;
  block-size: 100%;
  background: var(--altmez-card);
  border: 1px solid var(--altmez-border);
  border-radius: var(--altmez-radius);
  overflow: hidden;
  box-shadow: var(--altmez-shadow-xs);
  transition: box-shadow var(--altmez-dur) var(--altmez-ease),
              transform var(--altmez-dur) var(--altmez-ease),
              border-color var(--altmez-dur) var(--altmez-ease);
}
.altmez-card:hover { box-shadow: var(--altmez-shadow); border-color: var(--altmez-border-strong); transform: translateY(-3px); }

.altmez-card__media {
  position: relative; display: block;
  aspect-ratio: var(--altmez-ratio-card);
  overflow: hidden;
  background: var(--altmez-bg-soft-2);
}
.altmez-card__media img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  transition: transform .45s var(--altmez-ease);
}
.altmez-card:hover .altmez-card__media img { transform: scale(1.05); }

.altmez-card__body { display: flex; flex-direction: column; gap: var(--altmez-space-3); padding: var(--altmez-space-5); flex: 1 1 auto; }
.altmez-card__title { margin: 0; font-size: var(--altmez-fs-h4); font-weight: var(--altmez-fw-bold); line-height: 1.45; }
.altmez-card__title a { text-decoration: none; color: inherit; }
.altmez-card__title a:hover { color: var(--altmez-muted); }
.altmez-card__text { margin: 0; color: var(--altmez-muted); font-size: var(--altmez-fs-sm); line-height: 1.8; }
.altmez-card__foot { margin-block-start: auto; padding-block-start: var(--altmez-space-2); }

.altmez-card__link {
  display: inline-flex; align-items: center; gap: var(--altmez-space-2);
  font-size: var(--altmez-fs-sm); font-weight: var(--altmez-fw-medium);
  color: var(--altmez-text); text-decoration: none;
}
.altmez-card__link::after {
  content: "←";                     /* RTL forward direction */
  transition: transform var(--altmez-dur) var(--altmez-ease);
}
.altmez-card:hover .altmez-card__link::after { transform: translateX(-4px); }

/* Eyebrow / category chip */
.altmez-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--altmez-radius-pill);
  background: var(--altmez-accent-soft);
  border: 1px solid var(--altmez-accent-line);
  color: var(--altmez-text);
  font-size: var(--altmez-fs-xs);
  font-weight: var(--altmez-fw-medium);
  text-decoration: none;
  line-height: 1.6;
}
a.altmez-chip:hover { background: var(--altmez-accent); }

.altmez-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--altmez-space-2) var(--altmez-space-4);
  color: var(--altmez-muted); font-size: var(--altmez-fs-xs);
}

/* --------------------------------------------------------------------------
   6. Forms
   -------------------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="search"], input[type="number"], input[type="password"], textarea, select {
  inline-size: 100%;
  min-block-size: 48px;
  padding: 11px 16px;
  font-family: var(--altmez-font);
  font-size: var(--altmez-fs-sm);
  color: var(--altmez-text);
  background: var(--altmez-bg);
  border: 1.5px solid var(--altmez-border);
  border-radius: var(--altmez-radius-sm);
  transition: border-color var(--altmez-dur) var(--altmez-ease), box-shadow var(--altmez-dur) var(--altmez-ease);
}
textarea { min-block-size: 140px; line-height: 1.8; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--altmez-accent);
  box-shadow: var(--altmez-ring);
}
::placeholder { color: var(--altmez-muted-2); opacity: 1; }
label { font-size: var(--altmez-fs-sm); font-weight: var(--altmez-fw-medium); }

/* --------------------------------------------------------------------------
   7. Accessibility
   -------------------------------------------------------------------------- */
/* Kadence ships `:where(html:not(.no-js)) .hide-focus-outline :focus { outline:0 }`
   and puts `hide-focus-outline` on <body>. That selector scores (0,2,0), so a
   plain `:focus-visible` rule (0,1,0) loses and keyboard users get no focus
   ring at all. Matching the body class back explicitly scores (0,2,1) and wins
   without resorting to !important. Mouse users are unaffected: `:focus-visible`
   only matches keyboard/AT focus. */
body.hide-focus-outline :focus-visible,
body :focus-visible,
:focus-visible {
  outline: 3px solid var(--altmez-accent);
  outline-offset: 2px;
  border-radius: var(--altmez-radius-xs);
}

/* On dark surfaces the accent ring already has strong contrast; keep it, but
   add a dark halo so it reads against the yellow CTA band too. */
body.hide-focus-outline .altmez-cta :focus-visible,
body.hide-focus-outline .altmez-hero :focus-visible,
body.hide-focus-outline #colophon :focus-visible {
  outline-color: var(--altmez-accent);
  box-shadow: 0 0 0 5px rgba(16, 21, 28, .55);
}
body.hide-focus-outline .altmez-cta :focus-visible { outline-color: var(--altmez-dark); box-shadow: none; }

.altmez-skip-link {
  position: absolute; inset-block-start: -100px; inset-inline-start: var(--altmez-space-4);
  z-index: 9999;
  padding: 12px 20px;
  background: var(--altmez-dark); color: var(--altmez-on-dark);
  border-radius: var(--altmez-radius-sm);
  font-weight: var(--altmez-fw-medium); text-decoration: none;
  transition: inset-block-start var(--altmez-dur) var(--altmez-ease);
}
.altmez-skip-link:focus { inset-block-start: var(--altmez-space-3); color: var(--altmez-on-dark); }

.altmez-sr-only {
  position: absolute !important; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Guarantee 44px touch targets on interactive nav/footer/card links */
@media (pointer: coarse) {
  .altmez-touch a,
  .altmez-touch button { min-block-size: 44px; display: inline-flex; align-items: center; }
}

/* --------------------------------------------------------------------------
   8. Overflow guards (site-wide)
   -------------------------------------------------------------------------- */
img, video, iframe, svg, table { max-inline-size: 100%; }
img, video { block-size: auto; }
pre, code { overflow-x: auto; max-inline-size: 100%; }

/* --------------------------------------------------------------------------
   9. Breadcrumbs (Rank Math output — styling only, markup untouched)
   -------------------------------------------------------------------------- */
.rank-math-breadcrumb,
.altmez-breadcrumb {
  font-size: var(--altmez-fs-xs);
  color: var(--altmez-muted);
}
.rank-math-breadcrumb p { margin: 0; display: flex; flex-wrap: wrap; gap: var(--altmez-space-2); align-items: center; }
.rank-math-breadcrumb a { color: var(--altmez-muted); text-decoration: none; }
.rank-math-breadcrumb a:hover { color: var(--altmez-text); text-decoration: underline; }
.rank-math-breadcrumb .separator { color: var(--altmez-border-strong); }