/* ibramushr theme - custom.css
 * Hand-written layer on top of the generated main.css:
 * replacements for the Webflow runtime styles we do not ship (nav, dropdown,
 * slider, form chrome) plus our own additions (WhatsApp button, map, CV form).
 */

/* -- resets for native elements used where Webflow had divs ---------------- */
:where(button.nav_dropdown_toggle, button.nav_hamburger) {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}
:where(button.form_main_btn) { font-family: inherit; }
.accordion_title { cursor: pointer; }
/* zero-specificity so any component display rule (inline-flex buttons) wins */
:where(.u-inline-block) { max-width: 100%; display: inline-block; }

/* -- accessibility --------------------------------------------------------- */
.u-skip-link {
  position: absolute;
  left: -9999px;
  z-index: 1000;
  background: var(--swatch--dark);
  color: var(--swatch--light);
  padding: 0.5rem 1rem;
  border-radius: var(--_size---radius--small);
}
.u-skip-link:focus { left: 1rem; top: 1rem; }

/* -- accent words in headings ---------------------------------------------- */
em.u-text-accent {
  color: var(--_theme---accent);
  font-style: normal;
}

.u-text-faded { color: var(--_theme---text-faded); }

/* -- nav: brand, dropdown + hamburger behavior ------------------------------ */
.nav_brand { display: flex; align-items: center; }
.nav_logo_image { height: 1.45rem; }
.footer_logo { width: 100%; max-width: 14rem; height: auto; }
.footer_address { margin-top: var(--_size---space--main); color: var(--_theme---text-faded); }

.nav_dropdown_wrap { position: relative; }
.nav_dropdown_menu {
  display: none;
  position: absolute;
  z-index: 20;
}
.nav_dropdown_wrap.is-open .nav_dropdown_menu { display: block; }
.nav_dropdown_wrap.is-open .nav_dropdown_icon { transform: rotate(180deg); }
.nav_dropdown_icon { transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); }

.nav_hamburger { display: none; }

@media screen and (max-width: 991px) {
  .nav_hamburger { display: flex; }
  /* Services toggle behaves like every other menu row: full width, full-width
     separator, chevron visible on the right */
  .nav_dropdown_toggle { width: 100%; }
  .nav_dropdown_icon { display: block; }
  /* balanced space between the last row and the CTA button
     (base .nav_menu carries a huge desktop flex gap; menu_left adds margin) */
  .nav_menu { row-gap: var(--_size---space--main); }
  .nav_menu_left { margin-bottom: 0; }
  /* overlay panel anchored under the bar (nav_layout is position:relative) */
  .nav_menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    flex-direction: column;
    align-items: stretch;
  }
  .nav_wrap.is-open .nav_menu { display: flex; }
  /* dropdown expands inline inside the mobile menu */
  .nav_dropdown_wrap { width: 100%; }
  .nav_dropdown_menu { position: static; min-width: 0; }
}

/* -- testimonial slider (stacked cross-fade) -------------------------------- */
.testimonials_slider_slider { position: relative; }
.testimonials_slider_mask { display: grid; overflow: hidden; }
.testimonials_slider_slide { grid-area: 1 / 1; }
.testimonials_slider_svg { width: 1.25rem; height: 1.25rem; }
.testimonials_slider_arrow { cursor: pointer; }

/* -- forms: layout rhythm, honeypot, file input, select, meta blocks --------- */
.form_main_layout {
  display: flex;
  flex-direction: column;
  gap: var(--_size---space--main);
}
.form_main_field {
  display: flex;
  flex-direction: column;
  gap: var(--_size---space--extra-small);
}
.form_main_label {
  font-size: var(--_size---font-size--text-extra-small);
  font-weight: var(--_typography---font--primary-medium);
  text-transform: uppercase;
}
.form_main_input { width: 100%; }

.form_main_hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form_main_input.is-select { appearance: none; }
.form_main_input.is-file { padding: 0.55rem 0.75rem; }
.form_main_input.is-file::file-selector-button {
  font: inherit;
  margin-right: 0.75rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--_theme---border);
  border-radius: var(--_size---radius--small);
  background: var(--_theme---button-secondary--background);
  color: inherit;
  cursor: pointer;
}
.form_main_btn.is-loading { opacity: 0.6; pointer-events: none; }

.contact_meta_wrap {
  display: flex;
  flex-direction: column;
  gap: var(--_size---space--large);
  margin-top: var(--_size---space--extra-large);
}
.contact_meta_block p { margin-top: var(--_size---space--extra-small); }
.contact_meta_block a { color: inherit; }
.contact_whatsapp_cta { margin-top: var(--_size---space--medium); }

/* -- WhatsApp button ---------------------------------------------------------- */
.btn_whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: var(--_size---radius--main);
  background: #25d366;
  color: #0b3d1f;
  font-size: var(--_size---font-size--text-small);
  font-weight: var(--_typography---font--primary-medium);
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.btn_whatsapp:hover { transform: scale(0.98); }
.btn_whatsapp_icon { width: 1.25rem; height: 1.25rem; }

/* -- embedded map --------------------------------------------------------------- */
.image_full_wrap.is-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* contact map: edge-to-edge band, no container, no rounding, no padding */
.image_full_wrap.is-map.is-full-bleed {
  aspect-ratio: auto;
  height: min(60vh, 34rem);
  border-radius: 0;
}

/* -- buttons: keep label + icon on one line ---------------------------------------- */
.btn_main_wrap { white-space: nowrap; }
.nav_btn_wrap { white-space: nowrap; }

/* -- split heading row CTA ---------------------------------------------------- */
/* The template's split row never carried a button, so heading_cta has no track in
   main.css and auto-places into column 7, squeezing the button against the heading.
   Give it the same right-hand slot the template uses for heading_description. */
@media screen and (min-width: 992px) {
  .heading_cta {
    grid-column: 9 / span 4;
    justify-self: end;
    align-self: end;
  }
  .heading_wrap.is-center .heading_cta {
    align-self: center;
  }
}

/* -- footer stacking (bg photo behind, card above, notch top-right) ---------- */
.footer_wrap { position: relative; }
.footer_mask { position: absolute; top: 0; right: 0; }

/* -- no orphan words on any serif heading ------------------------------------- */
.g_heading { text-wrap: balance; }

/* -- inner-page heroes: unified centered layout (text + image variants) ------- */
/* One shared heading block on every inner hero: eyebrow, display heading and
   optional lead all centered; heading balances onto max two lines, no orphans. */
.section_hero .heading_wrap.is-hero.is-center { max-width: none; }
.section_hero .heading_title.is-center { text-align: center; }
.section_hero .g_heading.is-display {
  text-wrap: balance;
  max-width: 26ch; /* two lines max for the longest heading; balance evens them */
  margin-inline: auto;
}
.hero_center_description {
  max-width: 52ch;
  margin-inline: auto;
  text-align: center;
}
/* identical vertical rhythm on both hero variants */
.hero_text_wrap,
.hero_image_wrap {
  padding-top: var(--_size---padding--huge);
  padding-bottom: var(--_size---padding--small);
  grid-row-gap: var(--_size---padding--small);
  grid-column-gap: var(--_size---padding--small);
}
/* same accent gradient depth whether or not the hero carries an image */
.section_hero.is-image .hero_text_gradient { max-height: 44rem; }

/* -- baseline margin reset ----------------------------------------------------
   The generated main.css ships normalize rules (p, h1-h6: margin-bottom 10px,
   UA heading margin-top survives) AFTER the Webflow-decoded component rules.
   Components space themselves with flex/grid gaps, so stray element margins
   break vertical centering (badges, checklists, step numbers) and rhythm.
   Element margins are reintroduced only inside .g_richtext (article bodies). */
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0; }
p { margin-top: 0; margin-bottom: 0; }
.g_description p:last-child { margin-bottom: 0; }

/* editorial rhythm for article/richtext bodies */
.g_richtext p { margin-bottom: var(--_size---space--medium); }
.g_richtext h2 { margin-top: var(--_size---space--large); margin-bottom: var(--_size---space--small); }
.g_richtext h3,
.g_richtext h4 { margin-top: var(--_size---space--main); margin-bottom: var(--_size---space--extra-small); }
.g_richtext ul,
.g_richtext ol { margin-top: 0; margin-bottom: var(--_size---space--medium); }
.g_richtext li { margin-bottom: var(--_size---space--extra-small); }
.g_richtext > :first-child { margin-top: 0; }
.g_richtext > :last-child { margin-bottom: 0; }

/* -- insight card meta: pill text metric --------------------------------------- */
.tag_main_text { line-height: var(--_typography---line-height--1-2); }

/* -- numbered step list: number circle centers on the title line --------------- */
.item_feature_wrap { align-items: flex-start; }
.item_feature_text {
  display: flex;
  flex-flow: column;
  gap: var(--_size---space--extra-small);
  width: 100%;
}

/* -- home hero: capped height so the fold breathes on tall screens ------------- */
.hero_visual_wrap {
  padding-top: var(--_size---padding--extra-large);
  padding-bottom: var(--_size---padding--small);
  min-height: min(95vh, 45rem);
  display: flex;
}
.hero_visual_layout {
  grid-column-gap: var(--_size---padding--extra-large);
  grid-row-gap: var(--_size---padding--main);
  flex-flow: column;
  justify-content: center;
  width: 100%;
  max-width: 60ch;
  display: flex;
}

/* -- nav dropdown: wide enough that no item ever wraps ------------------------- */
.nav_dropdown_menu { min-width: max-content; }
.nav_dropdown_menu a { white-space: nowrap; }

/* -- contact intro: heading, lead, checklist share one rhythm ------------------ */
.form_contact_text {
  display: flex;
  flex-flow: column;
  gap: var(--_size---space--small);
}

/* -- footer CTA lead: two balanced lines, never an orphan ---------------------- */
.footer_cta_description {
  max-width: 46ch;
  text-wrap: balance;
}

/* -- form focus: brand ring instead of the browser default blue --------------- */
.form_main_input:focus,
.form_main_input:focus-visible {
  outline: 2px solid var(--_theme---accent);
  outline-offset: -1px;
  border-color: var(--_theme---accent);
}