/* WordPress-specific adaptations; original visual language is in site.css. */
body.admin-bar nav { top: 32px; }
@media (max-width:782px) { body.admin-bar nav { top: 46px; } }
@media (max-width:600px) { body.admin-bar nav { top: 0; } }

/* SVG image has fixed colors; keep it at the original dimensions. */
.nav-logo img { height: 100%; width: auto; max-width: 100%; display: block; }
.foot-logo a { height:100%; display:inline-flex; align-items:center; }
.foot-logo img { display:block; height:100%; width:auto; filter:grayscale(1); opacity:.8; }

/* Watermarks became decorative CSS elements rather than non-editable inline SVG. */
.hero::after, .about::after {
  content:""; position:absolute; pointer-events:none; z-index:0;
  background: url('../images/ok-logo.svg') no-repeat center / contain;
}
.hero::after {
  bottom:-2rem; right:-4rem; width:55vw; max-width:700px; height:130px;
  transform:rotate(-4deg); opacity:.05; filter:grayscale(1);
}
.about::after {
  top:-3rem; left:-6rem; width:40vw; max-width:600px; height:120px;
  opacity:.04; filter:brightness(0);
}

/* Core/image uses a figure element; retain the original full-bleed tile photo. */
.eq-tile figure.bg-img { position:absolute; inset:0; height:100%; width:100%; z-index:0; margin:0; opacity:.35; overflow:hidden; }
.eq-tile figure.bg-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(.4) contrast(1.1); }
.eq-tile:hover figure.bg-img { opacity:.55; transform:scale(1.05); }
.eq-tile > .wp-block-group { position:relative; z-index:2; }

/* Gutenberg Button block's link receives the source design, without raw HTML widgets. */
.ok-button .wp-block-button__link {
  border-radius:0; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1rem 1.75rem; font-family:'Archivo',sans-serif; font-weight:700;
  font-size:.88rem; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; border:0; cursor:pointer; transition:all .25s;
}
.ok-button.btn-primary .wp-block-button__link { background:var(--magenta); color:var(--cream); }
.ok-button.btn-primary .wp-block-button__link:hover { background:var(--magenta-hot); transform:translateY(-2px); box-shadow:0 10px 30px rgba(110,26,46,.35); }
.ok-button.btn-ghost .wp-block-button__link { background:transparent; color:var(--cream); border:1px solid var(--line-strong); }
.ok-button.btn-ghost .wp-block-button__link:hover { border-color:var(--cream); background:rgba(243,238,228,.05); }
.ok-button.btn-light .wp-block-button__link { background:var(--cream); color:var(--ink); }
.ok-button.btn-light .wp-block-button__link:hover { background:var(--bg-deep); color:var(--cream); transform:translateY(-2px); }
.ok-button.job-apply-wrap .wp-block-button__link {
  padding:.7rem 1.2rem; font-size:.78rem; background:var(--magenta); color:var(--cream); border-radius:2px;
}
.ok-button.job-apply-wrap .wp-block-button__link:hover { background:var(--magenta-hot); transform:translateY(-1px); }
.ok-button .wp-block-button__link:hover .arrow { transform:translateX(4px); }
.hero-actions .wp-block-button { display:inline-flex; }

/* Native block styles are not allowed to change the original full-width grid. */
.ok-site .wp-block-image img { max-width:100%; }
.ok-site .wp-block-group { box-sizing:border-box; }
.ok-generic-title { padding-top:10rem; padding-bottom:7rem; }
.ok-generic-title h1 { font:700 clamp(2rem,5vw,4rem)/1.12 'Archivo Black',sans-serif; margin-bottom:2rem; }
.ok-generic-title p { margin-bottom:1.3rem; }
.ok-generic-title a { color:var(--cream); }

/* Keep short text wrappers' typographic inheritance. */
.hero-stat p, .about-stat p, .ci-block p, .eq-tile p { font-family:inherit; }
:focus-visible { outline:2px solid var(--magenta-hot); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { .scroll-reveal { opacity:1; } .reveal, .scroll-reveal.is-visible { animation:none; } }


/*
 * v1.1.0 – Gutenberg layout compatibility:
 * theme.json prevents the legacy wp-block-group__inner-container wrapper
 * that makes source HTML grid/flex wrappers operate on just one child.
 * WordPress constrained layout additionally applies auto !important margins
 * and a global content width to nested Group children. This is a full-width
 * source-designed theme, so our custom layout wrappers own their geometry.
 */
.ok-site { --wp--style--block-gap: 0px; }

/* Cancel inherited "constrained" block geometry inside this theme's pages. */
body .ok-site .wp-block-group.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Preserve original centered 1440px container; do not confine inner groups. */
body .ok-site .wp-block-group.container,
body .ok-site .wp-block-group.is-layout-constrained > .wp-block-group.container {
  width: 100%;
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Ensure imported source flex/grid geometries win over WP-generated layout. */
body .ok-site .wp-block-group.hero-grid,
body .ok-site .wp-block-group.hero-stats,
body .ok-site .wp-block-group.section-head,
body .ok-site .wp-block-group.services-grid,
body .ok-site .wp-block-group.about-grid,
body .ok-site .wp-block-group.about-stats,
body .ok-site .wp-block-group.eq-grid,
body .ok-site .wp-block-group.partners-logos,
body .ok-site .wp-block-group.contact-top,
body .ok-site .wp-block-group.contact-info,
body .ok-site .wp-block-group.jobs,
body .ok-site .wp-block-group.perks {
  display: grid;
}
body .ok-site .wp-block-group.service-card,
body .ok-site .wp-block-group.eq-tile,
body .ok-site .wp-block-group.hero-eyebrow,
body .ok-site .wp-block-group.marquee-track,
body .ok-site .wp-block-group.hero-actions,
body .ok-site .wp-block-group.careers-cta,
body .ok-site .wp-block-group.nav-menu {
  display: flex;
}
/* Each grid/flex child uses the source cell width, not a Gutenberg max-width. */
body .ok-site .wp-block-group.services-grid > *,
body .ok-site .wp-block-group.eq-grid > *,
body .ok-site .wp-block-group.hero-stats > *,
body .ok-site .wp-block-group.about-grid > *,
body .ok-site .wp-block-group.partners-logos > *,
body .ok-site .wp-block-group.contact-info > * {
  min-width: 0;
  max-width: none;
}


/* ===== v1.2.0: visual alignment with the original HTML =====
 * Gutenberg injects a block gap between direct Group children. The source
 * designs manage spacing themselves (padding, margin-bottom, grid gaps),
 * and the extra margin creates too-tall cards and misaligned grid rows.
 * Reset only in known source-designed components; do NOT indiscriminately
 * remove margins from generic editable page content.
 */
body .ok-site .wp-block-group.is-layout-constrained:is(
    .hero-grid, .hero-stats, .hero-stat,
    .section-head, .services-grid, .service-card,
    .about-grid, .about-body, .about-stats, .about-stat,
    .eq-grid, .eq-tile, .partners-logos, .partners-intro,
    .contact-top, .contact-cta, .contact-info, .ci-block,
    .careers-cta, .jobs, .job, .perks, .perk
) > * + *,
body .ok-site .wp-block-group.is-layout-flow:is(
    .hero-grid, .hero-stats, .hero-stat,
    .section-head, .services-grid, .service-card,
    .about-grid, .about-body, .about-stats, .about-stat,
    .eq-grid, .eq-tile, .partners-logos, .partners-intro,
    .contact-top, .contact-cta, .contact-info, .ci-block,
    .careers-cta, .jobs, .job, .perks, .perk
) > * + * {
  margin-block-start: 0 !important;
}
/* Retain margins which are intentional in the source HTML. */
body .ok-site .about-stat > .desc { margin-block-start: .75rem !important; }
body .ok-site .about-lede { margin-block-start: 1rem !important; }
body .ok-site .partners-intro h2 { margin-block-start: .75rem !important; }
body .ok-site .job > .job-foot { margin-block-start: auto !important; }

/* Buttons: the source had <a class="btn-primary">, Gutenberg has a wrapper
 * <div class="wp-block-button btn-primary"> around the <a>. Prevent the
 * original background from coloring the entire full-width wrapper.
 */
body .ok-site .wp-block-button.ok-button {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  padding: 0;
  vertical-align: middle;
}
body .ok-site .wp-block-button.ok-button.btn-primary,
body .ok-site .wp-block-button.ok-button.btn-ghost,
body .ok-site .wp-block-button.ok-button.btn-light { background: transparent; }
body .ok-site .contact-cta .wp-block-button { margin-left: auto; }
body .ok-site .careers-cta .cta-text { flex: 1 1 60%; min-width: 0; }
body .ok-site .careers-cta .wp-block-button { flex-shrink: 0; }

/* Desktop: give the 4th line of the oversize hero title its original width,
 * rather than letting the adjacent EST. 2003 panel force an extra line.
 * The original line is just a few pixels shy of filling the allocated column
 * and the WordPress loaded fonts make it wrap.
 */
@media (min-width: 1101px) {
  body .ok-site .hero-grid {
    display: block;
    position: relative;
  }
  body .ok-site .hero-grid > .hero-title { max-width: 100%; }
  body .ok-site .hero-grid > .hero-meta {
    position: absolute;
    right: -1rem;
    bottom: 1rem;
    margin: 0 !important;
  }
}
/* Keep a clean stack at intermediary widths without heading / meta overlap. */
@media (min-width: 769px) and (max-width: 1100px) {
  body .ok-site .hero-grid { grid-template-columns: 1fr; }
  body .ok-site .hero-meta { text-align: left; }
}
/* Prevent WordPress typography/fontrendering from splitting 'POJĎME HO'
 * across two lines on desktop; revert gracefully for narrow screens.
 */
@media (min-width: 901px) {
  body .ok-site .contact h2 .accent {
    white-space: nowrap;
    display: inline-block;
    letter-spacing: -.045em;
  }
}
@media (max-width: 900px) {
  body .ok-site .contact h2 .accent { white-space: normal; }
  body .ok-site .contact-cta .wp-block-button { margin-left: 0; }
}

/* WordPress-generated constrained-layout rules must not replace the source
 * intentional widths of text columns.  Maintain readable line lengths. */
body .ok-site .hero-lede { max-width: 560px !important; }
body .ok-site .careers-intro, body .ok-site .page-hero-lede {
  max-width: 620px !important;
}
body .ok-site .contact-cta p {
  max-width: 360px !important;
  margin-left: auto !important;
}
@media (max-width: 900px) {
  body .ok-site .contact-cta p { margin-left: 0 !important; }
}

/* Equipment photography was over-muted by stacked background and grayscale;
 * lift it slightly while preserving the dark overall treatment.
 */
body .ok-site .eq-tile figure.bg-img { opacity: .42; }
body .ok-site .eq-tile:hover figure.bg-img { opacity: .59; }