/*
Theme Name: O-Flex Group
Theme URI:
Author:
Author URI:
Description: O-Flex Group website theme — built with Proto-Blocks (forked from proto-blocks-theme@1.4.0).
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: o-flex
Proto Fork: proto-blocks-theme@1.4.0
Tags: block-theme, full-site-editing, proto-blocks
*/

/* ------------------------------------------------------------------------
   Base typography — sans-serif everywhere by default (headings inherit).
   ------------------------------------------------------------------- */
/* Core prints this only with global styles on; Proto-Blocks' "Disable WP Global
   Styles" drops it, which left an 8px body margin and narrowed full-width bands. */
:where(body) {
  margin: 0;
}

/* The design (Figma Make bundle) is authored at a 14px root: every rem-based
   utility in the blocks assumes it, so the site uses the same root size. */
html { font-size: 14px; }

/* >>> protoblocks: body font (managed by tokens.mjs apply; change the tokens instead) */
body {
  font-family: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
}
/* <<< protoblocks: body font */

/* ------------------------------------------------------------------------
   Page shell — full-height column so content fills the viewport (footer
   sits at the bottom instead of everything bunching at the top), and the
   header / main / footer are capped at 1440px and centered.
   ------------------------------------------------------------------- */
.wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* The shell spaces its parts itself; drop core's blockGap margin between
   header / [data-taxi] / footer (:root :where(.wp-site-blocks) > *). */
body .wp-site-blocks > * {
  margin-block: 0;
}

/* The Taxi wrapper sits between .wp-site-blocks and <main>. It stretches like
   <main> used to, and stacks its children in one grid cell so the outgoing and
   incoming views overlap during a transition instead of stacking vertically. */
.wp-site-blocks > [data-taxi] {
  display: grid;
  grid-template-areas: "proto-taxi-view";
  flex: 1 0 auto;
  min-width: 0;
}
.wp-site-blocks > [data-taxi] > [data-taxi-view] {
  grid-area: proto-taxi-view;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Header / footer shells are full width and unpadded so full-bleed blocks in
   template parts match the content area. Only <main> keeps the cap + gutters;
   the default parts apply the same cap + gutters to their inner wrapper. */
.proto-shell-inner {
  box-sizing: border-box;        /* keep padding inside the 1440 / 100% width */
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem); /* default side gutters */
}
/* Sections are full-bleed bands that carry their own inner container, so
   <main> is never capped or padded: it spans the viewport at every width. */
.wp-site-blocks main {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  flex: 1 0 auto; /* take the leftover height */
}

/* Logged-in view: the WordPress admin bar is fixed at the top, so a fixed or
   sticky header (the header part's first child) starts below it instead of
   underneath it. Core sets --wp-admin--admin-bar--height (32px, 46px under
   783px); the fallbacks cover older cores. Logged-out visitors are unaffected. */
body.admin-bar .wp-site-blocks > header > :first-child {
  top: var(--wp-admin--admin-bar--height, 32px);
}
@media screen and (max-width: 782px) {
  body.admin-bar .wp-site-blocks > header > :first-child {
    top: var(--wp-admin--admin-bar--height, 46px);
  }
}

/* Header: keep site branding and navigation on a single, vertically
   centered row instead of letting the nav wrap below the branding. */
.wp-site-blocks > header .wp-block-group.is-layout-flex {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

/* ------------------------------------------------------------------------
   Intro overlay (once-per-session preloader). Markup is injected at
   wp_body_open by functions.php; play/fade logic in scripts/proto-intro.js.
   ------------------------------------------------------------------- */
.proto-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483647; /* above the Cookiebot dialog (2147483640) so the intro is never covered */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  transition: opacity 600ms ease;
}
.proto-intro.is-hidden { opacity: 0; pointer-events: none; }
/* Wide wordmark: the stage keeps the logo's 1920x471 aspect and scales with the viewport. */
.proto-intro__lottie { width: min(64vw, 560px); aspect-ratio: 1920 / 471; height: auto; }
.proto-intro-skip .proto-intro { display: none !important; }
html.proto-intro-active { overflow: hidden; }

/* ------------------------------------------------------------------------
   Proto-Blocks: the scoped Tailwind preflight resets ol/ul markers inside
   .proto-blocks-scope. Restore them for the core List block, and stop
   Spacer blocks inheriting the flow block-gap margin (exact heights).
   ------------------------------------------------------------------- */
.proto-blocks-scope ol.wp-block-list,
.proto-blocks-scope ul.wp-block-list { margin: 0 0 1em; padding-left: 1.5em; }
.proto-blocks-scope ol.wp-block-list { list-style: decimal; }
.proto-blocks-scope ul.wp-block-list { list-style: disc; }
.is-layout-flow > .wp-block-spacer { margin-block-start: 0; margin-block-end: 0; }

/* Visually hidden live region announcing Taxi navigations. */
.proto-taxi-announcer {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
[data-taxi-view]:focus { outline: none; }

/* ------------------------------------------------------------------------
   O-Flex shared components (buttons, eyebrow, container). Used by every
   proto-block; values mirror the design tokens in tailwind-theme.css.
   ------------------------------------------------------------------- */
.ofx-container { box-sizing: border-box; width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 768px) { .ofx-container { padding-inline: 2rem; } }

.pb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  font-family: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.pb-btn--sm { padding: 0.5rem 1.5rem; }
.pb-btn--primary { background: #193798; color: #ffffff; }
.pb-btn--primary:hover { background: #1A306A; color: #ffffff; }
.pb-btn--light { background: #ffffff; color: #000000; }
.pb-btn--light:hover { background: rgba(255,255,255,0.7); color: #000000; }
.pb-btn--white { background: #ffffff; color: #193798; }
.pb-btn--white:hover { background: rgba(255,255,255,0.9); color: #193798; }
.pb-btn--ghost { background: rgba(0,0,0,0.3); color: #ffffff; }
.pb-btn--ghost:hover { border-color: #ffffff; color: #ffffff; }
.pb-btn--outline { background: transparent; border-color: #ffffff; color: #ffffff; }
.pb-btn--outline:hover { background: rgba(255,255,255,0.1); color: #ffffff; }
.pb-btn.pb-ico-download::after { width: 1.25rem; height: 1.25rem; }
.pb-btn__arrow { display: block; width: 19px; height: 11px; flex: none; transform: scaleY(-1); }
/* Arrow glyph after the label, drawn in CSS so link text stays inline-editable. */
.pb-btn--arrow::after {
  content: "";
  display: block;
  flex: none;
  width: 19px;
  height: 11px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 13' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M19 12V1M19 1H8.1831M19 1L8.1831 12H0' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 13' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M19 12V1M19 1H8.1831M19 1L8.1831 12H0' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform: scaleY(-1);
}

.pb-eyebrow {
  color: #193798;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Download glyph after a label (buttons and text links), drawn in CSS so the label stays inline-editable. */
.pb-ico-download::after {
  content: "";
  display: block;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3v10M6 9l4 4 4-4M4 17h12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3v10M6 9l4 4 4-4M4 17h12'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Check-marked list: any wysiwyg <ul> inside .pb-checks (space-y-3 rows, blue check). */
.pb-checks ul { list-style: none; margin: 0; padding: 0; }
.pb-checks li { position: relative; margin: 0; padding-left: 2rem; line-height: 1.5; }
.pb-checks li + li { margin-top: 0.75rem; }
.pb-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  background: #193798;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4a1 1 0 1 1 1.414-1.414L8 12.586l7.293-7.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16.707 5.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4a1 1 0 1 1 1.414-1.414L8 12.586l7.293-7.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}