/* ── Layout widths ────────────────────────────────────────────────────────── */
/* Single source of truth for content and wide widths. The theme's
   .content-wrapper rules cap at 780 px; we override them here.
   No media queries needed: at narrow viewports the container is already
   smaller than these values, so the max-width has no effect.               */

:root {
    --content-width: 950px;
    --wide-width: 1340px;
    --parallelogram-angle: -5deg;
    --parallelogram-radius: 0px;
    --parallelogram-width: 2px;
}

.content-wrapper > :not(.alignfull) {
    max-width: var(--content-width) !important;
}

.content-wrapper .alignwide {
    max-width: var(--wide-width) !important;
}

.content-wrapper [class*="__inner-container"] > *:not(.alignwide):not(.alignfull),
.content-wrapper .wp-block-column > *:not(.alignwide):not(.alignfull) {
    max-width: var(--content-width) !important;
}

/* Typography */

h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    line-height: 1.2;
}

h2 {
    font-size: clamp(1.75rem, 4vw, 3rem);
    line-height: 1.3;
}

h3 {
    font-size: clamp(1.25rem, 3vw, 2.25rem);
    line-height: 1.4;
}

p {
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    line-height: 1.6;
}

/* Page Layout */
.main__header {
    margin-top: 0 !important;
    min-height: 70vh;
}

main header .featured_image {
    width: 100%;
    max-width: 100% !important;
    height: auto;

    & img {
        width: 100% !important;
        height: auto;
        margin: 0 !important;
        object-fit: cover;
    }
}

/* ── Off-canvas menu: fix iOS Safari horizontal scroll ────────────────────── */
/* Below the 992px breakpoint the closed off-canvas menu (.header-menu) and
   its full-screen dim layer (.nav-bg-overlay) are moved off-screen with
   `transform: translateX()`. iOS Safari's scrollable-width calculation still
   accounts for a transformed element's pre-transform box, so despite
   `overflow-x: hidden` on html/body these two layers keep widening the page
   and make it horizontally scrollable there — the closed menu is visible at
   the edge and the site becomes swipe-scrollable. Positioning them off-screen
   with real `right`/`left` offsets instead of `transform` avoids the bug in
   every browser, matching the theme's own transition choreography.          */
.header-menu {
    right: -100vw;
    transform: none;
    transition: right .25s ease-out, opacity .25s ease-out;
}

.nav-toggle-input:checked ~ .header-menu,
.header-menu:focus-within {
    right: 0;
    transform: none;
}

.nav-bg-overlay {
    left: -100vw;
    transform: none;
    transition: background-color .25s linear, left 0s linear .25s;
}

.nav-toggle-input:checked ~ .nav-bg-overlay {
    left: 0;
    transform: none;
    transition: background-color .25s linear;
}

/* .nav-style-responsive switches .header-menu to an inline, in-flow menu at
   this breakpoint (see theme main.css) — cancel the off-canvas `right`
   offset above so it isn't shifted out of view there. */
@media (min-width: 992px) {
    .nav-style-responsive .header-menu {
        right: 0;
    }
}

.nav-style-responsive .header-menu li > a::before,
.nav-style-responsive .header-menu li.menu-item-has-children > .submenu-toggle__label--full > .submenu-toggle__label__title::before {    
    transform: skewX(var(--parallelogram-angle)) scale(0.9);
}

.nav-style-responsive .header-menu li:hover > a::before,
.nav-style-responsive .header-menu li:hover.menu-item-has-children > .submenu-toggle__label--full > .submenu-toggle__label__title::before {
    transform: skewX(var(--parallelogram-angle)) scale(1);
}

/* Lists */
.site__main ul {
  list-style: none;
}

.site__main li {
  position: relative;
}

.site__main li::before {
  content: "—";
  color: #66a1e3;
  margin-right: 0.75em;
  position: absolute;
  right: 100%;
  top: 0;
}

@keyframes li-reveal {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.site__main li.li-animate {
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.site__main li.li-animate.is-visible {
  animation: li-reveal 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) calc(var(--li-index, 0) * 0.07s) both;
}

@media (prefers-reduced-motion: reduce) {
  .site__main li.li-animate {
    transform: none;
  }
  .site__main li.li-animate.is-visible {
    animation: none;
  }
}

/* less space in cover blocks*/
.wp-block-cover-image > .wp-block-cover__inner-container, .wp-block-cover > .wp-block-cover__inner-container {
  padding: 0 1rem;
}

/* gutenberg grid spacing */
.wp-block-group-is-layout-grid {
  gap: 2rem;
}

/* ── Social/contact links rendered outside the header ────────────────────── */
/* Reuses the same icon sizing/hover treatment the theme applies inside
   .header_links, so the widget and gradon/social-links block match the
   icons in the header. */
.wp-block-gradon-social-links .social a,
.widget .social a {
    vertical-align: middle;
    text-align: center;
    border-radius: 5rem;
}

.wp-block-gradon-social-links .social a i,
.widget .social a i {
    position: relative;
    z-index: 1;
    width: 1.25rem;
    height: 1.25rem;
}

.wp-block-gradon-social-links .social a i::before,
.widget .social a i::before {
    line-height: 1;
    font-size: 1.125rem;
}

.wp-block-gradon-social-links .social a i::after,
.widget .social a i::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: -.3rem;
    left: -.25rem;
    bottom: -.2rem;
    right: -.25rem;
    background-color: currentColor;
    border-radius: 5rem;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity .1s ease, transform .1s ease;
}

.wp-block-gradon-social-links .social a:hover i::after,
.wp-block-gradon-social-links .social a:focus i::after,
.widget .social a:hover i::after,
.widget .social a:focus i::after {
    opacity: .2;
    transform: scale(1);
}

/* ── WPForms submit button ────────────────────────────────────────────────── */
/* Matches the parallelogram button style used elsewhere on the site (see
   .gradon-hero-button in gradon-hero-block.css): a skewed ::before outline
   behind an unskewed button, so the label stays upright.                     */
.wpforms-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background: none;
    border: none;
    font-weight: 800;
    cursor: pointer;
}

.wpforms-submit::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: var(--parallelogram-radius);
    border: var(--parallelogram-width) solid var(--color, currentColor);
    transform: skewX(var(--parallelogram-angle));
    transition: all .25s ease-out;
    z-index: -1;
}

.wpforms-submit:hover::before {
    background: hsl(from var(--color, currentColor) h s l / 25%);
}