/*
 * GMPF global styles
 * ------------------
 * Site-wide patterns: container widths, layout primitives, scroll
 * behaviour. Specific component styling lives next to the component
 * (CSS Modules).
 *
 * Foundational stylesheets (tokens, reset, typography, a11y) are
 * loaded explicitly via `require_css` in `templates/layouts/base.hubl.html`.
 * They are NOT @imported here because Chromium's CSS @import resolver
 * mis-resolves the relative URL when the stylesheet path contains an
 * `@` segment (HubSpot's `@projects` raw-asset path), which causes
 * the imports to 404 against the site root in production.
 */

 *{
    scroll-margin-top: 80px;
 }

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background-color: var(--color-surface-page);
  color: var(--color-text-default);
}

/*
 * Centred page container. Modules opt into this by wrapping their
 * outer markup in `<div class="gmpf-container">` (or applying the
 * class directly to a section).
 */
.gmpf-container {
  width: 100%;
  max-width: var(--container-default);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

@media (min-width: 768px) {
  .gmpf-container {
    padding-inline: var(--space-lg);
  }
}

@media (min-width: 1024px) {
  .gmpf-container {
    padding-inline: var(--space-xl);
    /*
     * Figma Home 85:1094 calls for a **1140px content box** with a
     * 150px side gutter at a 1440 canvas. The global container uses
     * `box-sizing: border-box` (browser default reset), so the 32px
     * inline padding normally *eats into* the 1140 max-width,
     * leaving only 1076px of content and pushing the first pixel of
     * text to x=182 at 1440 (review finding P1.13).
     *
     * Expanding max-width by 2× the inline padding keeps the
     * rendered content width at exactly --container-default (1140),
     * so at a 1440 viewport the auto-margins are (1440 − 1204) / 2
     * = 118px, plus 32px inline padding = 150px visual gutter —
     * which matches the Figma 150px side padding exactly.
     *
     * Cascades to every module that uses `.gmpf-container`: Hero,
     * TabsCards, AboutIconGrid, FeaturedNewsGrid, Footer, etc. —
     * intentional, since the whole page was shifted 32px inwards.
     */
    max-width: calc(var(--container-default) + var(--space-xl) * 2);
  }
}

.gmpf-container--narrow {
  max-width: var(--container-narrow);
}

.gmpf-container--wide {
  max-width: var(--container-wide);
}

.gmpf-container--full {
  max-width: var(--container-full);
}

/*
 * HubSpot DnD grid compatibility
 * ------------------------------
 * The page editor emits classic HubSpot 12-column markup for sections:
 * `.row-fluid` rows containing `.span1` … `.span12` columns. CMS React
 * projects do not automatically ship the legacy layout stylesheet, so
 * without this block editor-created multi-column sections collapse into
 * ordinary block-level divs and stack on desktop.
 *
 * Keep this global and intentionally class-based: the markup is generated
 * by HubSpot outside our React modules, and pages need the same behaviour
 * in the editor preview and published output.
 */
.row-fluid {
  width: 100%;
}

.row-fluid::before,
.row-fluid::after {
  display: table;
  content: '';
}

.row-fluid::after {
  clear: both;
}

.row-fluid [class*='span'] {
  display: block;
  float: left;
  min-height: 1px;
  width: 100%;
  margin-left: 2.127659574%;
}

.row-fluid [class*='span']:first-child {
  margin-left: 0;
}

.row-fluid .span12 {
  width: 100%;
}

.row-fluid .span11 {
  width: 91.489361702%;
}

.row-fluid .span10 {
  width: 82.978723404%;
}

.row-fluid .span9 {
  width: 74.468085106%;
}

.row-fluid .span8 {
  width: 65.957446809%;
}

.row-fluid .span7 {
  width: 57.446808511%;
}

.row-fluid .span6 {
  width: 48.936170213%;
}

.row-fluid .span5 {
  width: 40.425531915%;
}

.row-fluid .span4 {
  width: 31.914893617%;
}

.row-fluid .span3 {
  width: 23.404255319%;
}

.row-fluid .span2 {
  width: 14.893617021%;
}

.row-fluid .span1 {
  width: 6.382978723%;
}

@media (max-width: 767px) {
  .row-fluid [class*='span'] {
    float: none;
    width: 100%;
    margin-left: 0;
  }
}

/*
 * Selection styling - keep it boring and high-contrast so it doesn't
 * conflict with semantic colour use.
 */
::selection {
  background-color: var(--color-brand-primary);
  color: var(--color-text-inverse);
}

.hsfc-Step__Content{
padding:0px !important;
}
.hsfc-TextField{
      display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hsfc-DropdownInput__Caret span{
  border: none !important;
     width: 19px !important;
    height: 11px !important; 
    display: inline-block;
    border: none;
    color: var(--color-page-primary);
 background-color: var(--color-page-primary);

    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 11'%3E%3Cpath d='M1 1L9.5 9.5L18 1' stroke='black' stroke-width='2' stroke-linecap='round' fill='none'/%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 19 11'%3E%3Cpath d='M1 1L9.5 9.5L18 1' stroke='black' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;

}