/*
Theme Name: OptimizedIT
Theme URI:
Author: Provisions Group
Author URI:
Description: A Block theme for OptimizedIT
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 5.7
Version:
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: optimizedit
Tags:
*/

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,500&family=Inter:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;700&display=swap");

/* Brand fonts:
   - Space Grotesk -- nav, buttons, link-style text (used via .oit-font-grotesk).
   - DM Sans       -- default body / paragraph text. Set globally so anything
                       inheriting font-family (eg. <button>, <input>, Proto-Blocks
                       preflighted elements) picks up the brand body font instead
                       of the browser's serif fallback. */
html,
body {
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
}

/* ------------------------------------------------------------------------
   Global heading scale.

   Source of truth: Figma "Desktop Typography" 551:623 + "Mobile
   Typography" 551:651 in the OIT design file. These rules ship in BOTH
   the front end (via enqueue_block_assets) and the block-editor canvas
   iframe (via add_editor_style + enqueue_block_assets) so what you see
   while editing matches what renders.

   Tailwind utilities applied directly on a heading (eg.
   `text-[28px] lg:text-h4` inside a proto-block) override these because
   single-class utility selectors out-specify the bare element selector.
   So existing styled blocks keep their look; bare <h1>..<h6> elements
   (WP core Heading block, ad-hoc markup, prose blocks) pick up these
   defaults.

   Color is inherited from context -- a dark hero card paints headings
   white, a light section paints them black. Margin is zeroed because
   proto-blocks own their internal spacing.

                Mobile (<1024px)        Desktop (>=1024px)
     H1   36px / 700 / 1.3              56px / 700 / 1.2
     H2   28px / 700 / 1.3              40px / 700 / 1.2
     H3   24px / 500 / 1.3              30px / 700 / 1.4
     H4   20px / 500 / 1.3              24px / 500 / 1.4
     H5   18px / 500 / 1.3              20px / 700 / 1.4
     H6   14px / 500 / 1.3              16px / 500 / 1.4
   ------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-style: normal;
  margin: 0;
}

h1 { font-size: 36px; font-weight: 700; line-height: 1.3; }
h2 { font-size: 28px; font-weight: 700; line-height: 1.3; }
h3 { font-size: 24px; font-weight: 500; line-height: 1.3; }
h4 { font-size: 20px; font-weight: 500; line-height: 1.3; }
h5 { font-size: 18px; font-weight: 500; line-height: 1.3; }
h6 { font-size: 14px; font-weight: 500; line-height: 1.3; }

@media (min-width: 1024px) {
  h1 { font-size: 56px; font-weight: 700; line-height: 1.2; }
  h2 { font-size: 40px; font-weight: 700; line-height: 1.2; }
  h3 { font-size: 30px; font-weight: 700; line-height: 1.4; }
  h4 { font-size: 24px; font-weight: 500; line-height: 1.4; }
  h5 { font-size: 20px; font-weight: 700; line-height: 1.4; }
  h6 { font-size: 16px; font-weight: 500; line-height: 1.4; }
}

/* Newsletter Plugin (Stefano Lissa) form layout overrides. */
div.tnp-subscription,
form.tnp-subscription,
form.tnp-profile {
  display: flex;
  flex-direction: column;
  width: fit-content !important;
  max-width: 100% !important;
  gap: 1rem;
}

div.tnp-field {
  @media (max-width: 769px) {
    width: 100%;
  }
}

/* Shared header partials -------------------------------------------------
   The breadcrumb and giant background wordmark used by oit-page-header
   and oit-two-col-header are rendered by inc/oit-header-partials.php.
   Proto-Blocks' Tailwind compiler only scans files under proto-blocks/<block>/,
   so any utility classes baked into the partial markup would be dropped
   from the compiled CSS. To avoid that, the partial emits BEM hook
   class names only and all visual rules for those hooks live here in
   plain CSS. This file ships via enqueue_block_assets, so it loads on
   the front end AND inside the FSE canvas iframe regardless of which
   block is on the page. */

/* Breadcrumb -- non-current crumbs inherit text color from the parent
   surface via the cascade (a dark card paints them white, a light
   section paints them black). The current crumb and link-hover always
   resolve to brand red. */
.oit-page-header__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  color: inherit;
}

.oit-page-header__crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.oit-page-header__crumb-link {
  color: inherit;
  text-decoration: none;
  transition: color 200ms ease-out;
}

.oit-page-header__crumb-link:hover,
.oit-page-header__crumb-link:focus-visible {
  color: #D1001D; /* brand-red */
}

.oit-page-header__crumb.is-current .oit-page-header__crumb-label {
  color: #D1001D; /* brand-red */
}

.oit-page-header__crumb-sep {
  color: inherit;
  display: inline-flex;
  align-items: center;
}

.oit-page-header__crumb-chevron {
  width: 13px;
  height: 12px;
  flex-shrink: 0;
  display: block;
}

/* Wordmark -- giant uppercase watermark behind the header content.
   font-size scales fluidly with viewport; the negative top margin
   pulls the wordmark up so it overlaps the card / grid above it,
   matching the Figma layout. Color is the brand light-red tint at
   40% opacity. */
.oit-page-header__wordmark {
  position: relative;
  z-index: 0;
  margin-top: calc(-1 * clamp(28px, 6vw, 96px));
  text-align: right;
  pointer-events: none;
  user-select: none;
}

.oit-page-header__wordmark-text {
  position: relative;
  display: inline-block;
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(56px, 13vw, 186px);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: #F5D6DA; /* brand light-red tint */
  opacity: 0.4;
  left: 27%;
}

/* Two-color wordmark variant (oit-about-hero).
   Two adjacent segments read as one continuous word. Both inherit the
   fluid size, weight and 40% opacity from the base; only the color
   differs. The wrapper itself keeps the same right-aligned + negative
   top-margin positioning as the single-color version. */
.oit-page-header__wordmark--split .oit-page-header__wordmark-text {
  /* Reset the base left: 27% nudge -- segments are positioned by the
     wrapper's text-align: right alone so they always hug the right edge
     as a single block. */
  left: 0;
}

.oit-page-header__wordmark-text--primary {
  color: #E6E6E8; /* light-grey token */
}

.oit-page-header__wordmark-text--accent {
  color: #F5D6DA; /* brand light-red tint */
}

/* Intro screen overlay (preloader, once per session) ----------------------
   Rendered by wp_body_open in functions.php. The matching JS lives in
   scripts/oit-intro.js. The early inline script in <head> sets the
   .oit-intro-skip class on <html> when sessionStorage('introShown') is
   already 'true', which lets us hide the overlay before its first paint
   on repeat navigations -- no flash. */

.oit-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000000;
  opacity: 1;
  transition: opacity 600ms ease-out;
  will-change: opacity;
}

.oit-intro.is-fading {
  opacity: 0;
  pointer-events: none;
}

.oit-intro__lottie {
  /* Sized to fit the 1180x360 OIT logo animation -- aspect-ratio keeps
     the SVG proportional regardless of viewport, the clamps keep it
     readable on phones and reasonable on big screens. */
  width: clamp(224px, 48vw, 576px);
  aspect-ratio: 1180 / 360;
}

html.oit-intro-active body {
  overflow: hidden;
}

html.oit-intro-skip .oit-intro {
  display: none !important;
}

/* While the intro is still pending its first play this session, keep the
   nav shell hidden so it doesn't paint a flicker before GSAP runs the
   reveal timeline. scripts/oit-nav-animation.js strips this class when
   it picks up the `oit:intro-complete` event. */
html.oit-intro-pending .oit-nav__shell {
  opacity: 0;
}

/* ------------------------------------------------------------------------
   .oit-btn -- brand pill button utility.

   Drop on any <a>, <button>, or <input type="submit"> to make it look
   like the OIT red pill CTA used across the site (oit-cta, oit-form
   submit, page-header buttons, etc). Lives in the global stylesheet
   so it's available on the front end AND inside the FSE canvas iframe,
   and outside the Tailwind compile scope so authors can hand-author it
   anywhere (HTML widget, classic editor, custom HTML block, etc).

   Usage:
     <a class="oit-btn" href="/contact">Schedule a consultation</a>
     <a class="oit-btn oit-btn--chevron" href="#">Explore blog</a>
     <a class="oit-btn oit-btn--white"   href="#">Download</a>
     <a class="oit-btn oit-btn--ghost"   href="#">Learn more</a>

   Modifiers stack: oit-btn--white + oit-btn--chevron is fine.
   ------------------------------------------------------------------- */

.oit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 24px;
  min-height: 0;
  background: #E00523;          /* cta-red */
  color: #FFFFFF;
  border: 1px solid #D1001D;    /* brand-red */
  border-radius: 90px;
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 200ms ease-out, color 200ms ease-out,
    border-color 200ms ease-out, transform 200ms ease-out;
}

.oit-btn:hover,
.oit-btn:focus-visible {
  background: #C40420;
  color: #FFFFFF;
  text-decoration: none;
  outline: none;
}

.oit-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(224, 5, 35, 0.25);
}

/* White pill, dark text. */
.oit-btn--white {
  background: #FFFFFF;
  color: #1A0303;
  border-color: #FFFFFF;
}

.oit-btn--white:hover,
.oit-btn--white:focus-visible {
  background: #F4F4F4;
  color: #1A0303;
}

/* Transparent / outlined. */
.oit-btn--ghost {
  background: transparent;
  color: #D1001D;
  border-color: #D1001D;
}

.oit-btn--ghost:hover,
.oit-btn--ghost:focus-visible {
  background: #D1001D;
  color: #FFFFFF;
}

/* Trailing double-chevron painted via a mask-image on ::after.
   Inherits currentColor so it adopts whichever text color the button
   variant is using (white on the default red pill, black on the white
   pill, etc). */
.oit-btn--chevron::after {
  content: "";
  width: 13px;
  height: 12px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 12' fill='currentColor'><path d='M0 1.41L1.36689 0L7.18345 6L1.36689 12L0 10.59L4.43997 6L0 1.41ZM5.81656 1.41L7.18345 0L13 6L7.18345 12L5.81656 10.59L10.2565 6L5.81656 1.41Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 12' fill='currentColor'><path d='M0 1.41L1.36689 0L7.18345 6L1.36689 12L0 10.59L4.43997 6L0 1.41ZM5.81656 1.41L7.18345 0L13 6L7.18345 12L5.81656 10.59L10.2565 6L5.81656 1.41Z'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Smaller variant for tight spaces. */
.oit-btn--sm {
  padding: 6px 18px;
  font-size: 14px;
}

.oit-btn--sm.oit-btn--chevron::after {
  width: 11px;
  height: 10px;
}

/* Text-color overrides (label + chevron, via currentColor). Doubled
   `.oit-btn` selector so they beat the per-variant color and the
   :hover/:focus color rules regardless of source order. Intended for
   the light button styles (--white / --ghost). */
.oit-btn.oit-btn--text-black,
.oit-btn.oit-btn--text-black:hover,
.oit-btn.oit-btn--text-black:focus-visible {
  color: #1A0303; /* brand-black */
}

.oit-btn.oit-btn--text-red,
.oit-btn.oit-btn--text-red:hover,
.oit-btn.oit-btn--text-red:focus-visible {
  color: #D1001D; /* brand-red */
}

header.wp-block-template-part {
  position: absolute;
  z-index: 999999999;
  width: 100vw;
  max-width: 100%;
}

/* ------------------------------------------------------------------------
   Proto-Blocks flow margin reset.

   WordPress 6.x ships a default block-spacing rule:

     :root :where(.is-layout-flow) > * {
       margin-block-start: 24px;
       margin-block-end:   0;
     }

   That 24px gutter is right for inline blocks (paragraphs, headings) but
   wrong for our OIT proto-blocks, which are full sections that own their
   own internal padding and shouldn't have a forced gap.

   WordPress emits its rule from theme.json as inline CSS in <head>, which
   loads AFTER this stylesheet. Both selectors use :where() so they tie on
   specificity (0,0,0) and source order decides -- WP wins. To beat that
   we drop the :where() wrapper here, giving the selectors real specificity.

   Two cases covered:
     1. Block-to-block flow: a proto-block sitting next to siblings under a
        flow-layout parent (eg. the page's <main>).
     2. Per-section flow: blocks inside a proto-block whose template happens
        to use a flow container itself. */
[class*="wp-block-proto-blocks-"]:not(.wp-block-proto-blocks-oit-container),
[class*="wp-block-proto-blocks-"]:not(.wp-block-proto-blocks-oit-container) .is-layout-flow > *,
.wp-block-template-part {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* If a flow / flex / grid container is sitting right above a row of
   proto-blocks and is supplying gap via the `gap` property (instead of
   child margins), kill that too. Scoped via :has() to layouts whose
   direct children include at least one proto-block, so we don't strip
   gap from unrelated containers. */
:where(.wp-block-group, .wp-block-post-content, main):has(> [class*="wp-block-proto-blocks-"]) {
  gap: 0 !important;
  row-gap: 0 !important;
}

/* Spacer blocks are an exact, author-set height, so they must NOT also
   inherit WordPress's flow block-gap margin (`:root :where(.is-layout-flow)
   > * { margin-block-start: 24px }`). When they do, the gap is added on top
   of the spacer's own height and double-spaces the layout -- and because
   that 24px default isn't previewed in the editor, the front end ends up
   taller than the canvas. The `.is-layout-flow >` prefix gives this real
   specificity (0,2,0) so it beats WP's (0,1,0) rule without !important.
   Regular blocks keep the gutter. */
.is-layout-flow > .wp-block-spacer {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* ------------------------------------------------------------------------
   Blog post body emphasis.

   In a single blog post's content, bold text (<strong> / <b>) is rendered
   in the brand red instead of just heavier weight -- a lightweight way for
   authors to add emphasis pops without a custom block. Scoped to
   `.single-post` so it only affects standard blog posts (not pages or the
   oit_resource CPT), and to the post content so it never recolors bold
   text that lives inside a proto-block section's own UI.
   ------------------------------------------------------------------- */
.single-post .wp-block-post-content strong,
.single-post .wp-block-post-content b {
  color: #D1001D; /* brand-red */
}

/* ------------------------------------------------------------------------
   Core List block inside a proto-block container.

   The scoped Tailwind preflight resets every ol/ul within a
   `.proto-blocks-scope` wrapper to `list-style:none; margin:0; padding:0`
   via a zero-specificity `:where()` selector. That strips the markers off
   the editor's List block when it's nested inside an OIT Container (or any
   proto-block). Restore standard list styling -- the `.wp-block-list`
   class targets only the core List block, so proto-block UIs that opt out
   with `list-none` are untouched.
   ------------------------------------------------------------------- */
.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; }
.proto-blocks-scope ul.wp-block-list li { margin: 0; }

/* ------------------------------------------------------------------------
   Ordered list (core List block) -- global treatment: bold numbers and a
   little breathing room between items. Applies everywhere (in and out of
   .proto-blocks-scope). `> li` keeps it to each list's own items.
   ------------------------------------------------------------------- */
ol.wp-block-list > li::marker {
  font-weight: 700;
}
ol.wp-block-list > li {
  margin-bottom: 0.75em;
}
ol.wp-block-list > li:last-child {
  margin-bottom: 0;
}