/* ============================================================
   MEDIALOGIC SKETCHUP GCC — MAIN STYLESHEET
   Design tokens extracted from sketchup.com source
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap');

/* ============================================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================ */
:root {
  /* Brand Colors */
  --gold:               #fbad26;
  --gold-hover:         #e09a1f;
  --dark-grey:          #252a2e;
  --dark-grey-2:        #353a40;

  /* Trimble Web Component Colors */
  --primary:            #0063a3;
  --primary-light:      #217cbb;
  --primary-dark:       #004f83;
  --primary-dark-2:     #0e416c;
  --secondary:          #cbcdd6;
  --secondary-light:    #e0e1e9;
  --white:              #ffffff;
  --dark:               #252a2e;

  /* UI Colors */
  --border-color:       #e0e1e9;
  --bg-light:           #f4f6f8;
  --bg-white:           #ffffff;
  --text-primary:       #252a2e;
  --text-secondary:     #666666;
  --text-light:         #ffffff;
  --selection-bg:       #89c6ed;

  /* Typography */
  --font-family:        'Open Sans', Arial, sans-serif;
  --font-size-base:     20px;
  --line-height-base:   1.4;

  /* Heading Scale */
  --hero-h1-size:       4.75rem;   /* 95px */
  --hero-h1-weight:     300;
  --hero-h1-lh:         5rem;
  --hero-h1-ls:         0.76px;

  --section-h2-size:    2.5rem;    /* 50px */
  --section-h2-weight:  300;
  --section-h2-lh:      3rem;
  --section-h2-ls:      0.8px;
  --section-h2-mb:      50px;

  --eyebrow-size:       0.7rem;    /* ~14px */
  --eyebrow-weight:     700;
  --eyebrow-ls:         1.5px;

  /* Buttons */
  --btn-primary-bg:     #fbad26;
  --btn-primary-color:  #252a2e;
  --btn-primary-hover:  #e09a1f;
  --btn-secondary-border: #252a2e;
  --btn-secondary-color:  #252a2e;
  --btn-secondary-dark-border: #ffffff;
  --btn-secondary-dark-color:  #ffffff;
  --btn-radius:         4px;
  --btn-pad-sm:         8px 20px;
  --btn-pad-md:         12px 28px;
  --btn-gap:            30px;
  --btn-mt-hero:        60px;

  /* Spacing */
  --section-padding:    100px 0;
  --wrapper-max:        1280px;
  --wrapper-px:         40px;

  /* Nav */
  --nav-height:         70px;
  --nav-bg:             #ffffff;
  --nav-border:         #e0e1e9;
  --nav-z:              1000;

  /* Transitions */
  --transition:         0.2s ease;
  --transition-slow:    0.4s ease;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body, html {
  background: var(--bg-white);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  min-height: 100%;
  line-height: var(--line-height-base);
  margin: 0;
  padding: 0;
}

::selection {
  background: var(--selection-bg);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  display: block;
  font-family: var(--font-family);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 0.67em;
  padding: 0;
}

p {
  margin: 0 0 1em;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.t2-wrapper {
  max-width: var(--wrapper-max);
  margin: 0 auto;
  padding: 0 var(--wrapper-px);
  width: 100%;
  padding: 15px;
}

.t2-container {
  max-width: var(--wrapper-max);
  margin: 0 auto;
  padding: 0 var(--wrapper-px);
}

/* ============================================================
   TYPOGRAPHY SYSTEM
   ============================================================ */

/* Eyebrow label */
.t2-layout__eyebrow {
  color: #fbad26;
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
  margin: 0 0 12px;
  display: block;
}

.t2-color-setting--dark .t2-layout__eyebrow {
  color: var(--white);
}
/* Light bg — eyebrow stays gold */
.t2-preset-theme-six .t2-layout__eyebrow,
.t2-preset-theme-two .t2-layout__eyebrow {
  color: #fbad26;
}

/* Section heading */
.t2-layout__header {
  color: var(--dark-grey-2);
  font-size: var(--section-h2-size);
  font-weight: var(--section-h2-weight);
  letter-spacing: var(--section-h2-ls);
  line-height: var(--section-h2-lh);
  margin: 0 0 var(--section-h2-mb);
}

/* Hero heading */
.t2-hero-lead__header {
  color: var(--dark-grey-2);
  font-size: var(--hero-h1-size);
  font-style: normal;
  font-weight: var(--hero-h1-weight);
  letter-spacing: var(--hero-h1-ls);
  line-height: var(--hero-h1-lh);
}

/* Dark bg heading override */
.t2-color-setting--dark .t2-layout__header,
.t2-color-setting--dark .t2-hero-lead__header {
  color: var(--white);
}

.t2-layout__description,
.t2-layout__description .richtext-container p,
.t2-layout__description p {
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.18px;
  line-height: 2rem;
  margin: 0 0 12px;
  color: #353a40;
}
.t2-color-setting--dark .t2-layout__description,
.t2-color-setting--dark .t2-layout__description p {
  color: #fff;
}

/* ============================================================
   BUTTON SYSTEM
   ============================================================ */
.t2-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 0.8rem;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--btn-radius);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
  line-height: 1;
}

/* ============================================================
   BUTTON SYSTEM — pill shape, all contexts
   ============================================================ */
.t2-button {
  cursor: pointer !important;
  display: inline-block !important;
  text-align: center !important;
  text-decoration: none !important;
  font-family: var(--font-family) !important;
  border-radius: 100px !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  line-height: 1 !important;
  padding: 10px 16px !important;
  text-transform: uppercase !important;
  border: 2px solid transparent !important;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
  white-space: nowrap;
}

/* Primary — gold */
.t2-button--primary {
  background-color: #fbad26 !important;
  border-color: #fbad26 !important;
  color: #353a40 !important;
}
.t2-button--primary:hover {
  background-color: #e09a1f !important;
  border-color: #e09a1f !important;
  color: #353a40 !important;
}

/* Secondary — outline, adapts to bg */
.t2-button--secondary {
  background: transparent !important;
  color: #353a40 !important;
  border-color: #353a40 !important;
}
.t2-button--secondary:hover {
  background: #353a40 !important;
  color: #fff !important;
}

/* Secondary on dark/hero bg — white outline */
.t2-preset-theme-three .t2-button--secondary,
.t2-color-setting--dark .t2-button--secondary,
.t2-hero-lead .t2-button--secondary {
  color: #fff !important;
  border-color: #fff !important;
}
.t2-preset-theme-three .t2-button--secondary:hover,
.t2-color-setting--dark .t2-button--secondary:hover,
.t2-hero-lead .t2-button--secondary:hover {
  background: #fff !important;
  color: #353a40 !important;
}

/* Small */
.t2-button--small {
  font-size: 0.8rem !important;
  padding: 10px 22px !important;
  letter-spacing: 0.8px !important;
}

/* CTA container */
.t2-layout__cta {
  display: flex;
  align-items: center;
  column-gap: var(--btn-gap);
  flex-wrap: wrap;
  gap: 16px;
}

.t2-hero-lead__cta {
  margin: var(--btn-mt-hero) 0 0;
}

/* ============================================================
   THEME PRESETS
   ============================================================ */
.t2-preset-theme-three {
  background: var(--dark-grey);
  color: var(--white);
}

.t2-preset-theme-six {
  background: transparent;
  color: var(--text-primary);
}

/* ============================================================
   RICHTEXT CONTAINERS
   ============================================================ */
.richtext-container p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 1em;
}

.richtext-container p:last-child {
  margin-bottom: 0;
}

.transparent-dark-text {
  color: var(--text-primary) !important;
}

.transparent-light-text {
  color: var(--white) !important;
}

/* ============================================================
   FOCUSED IMAGE (picture element)
   ============================================================ */
.ter-focused-image-container {
  display: block;
  overflow: hidden;
}

.ter-focused-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* ============================================================
   PAGE OFFSET (for fixed nav)
   ============================================================ */
.page-content {
  padding-top: 0; /* nav is position:sticky, so it takes up its own space */
}

/* ============================================================
   PROMO BANNER
   ============================================================ */
.t2-promo-banner {
  background: var(--gold);
  color: var(--dark-grey);
  padding: 12px 20px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.t2-promo-banner__text {
  flex: 1;
  text-align: center;
}

.t2-promo-banner__cta {
  background: var(--dark-grey);
  color: var(--white);
  padding: 6px 16px;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  transition: background var(--transition);
}

.t2-promo-banner__cta:hover {
  background: #1a1f23;
}

.t2-promo-banner__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--dark-grey);
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.t2-promo-banner.hidden {
  display: none;
}

/* ============================================================
   RESPONSIVE BASE
   ============================================================ */
@media (max-width: 1200px) {
  :root {
    --hero-h1-size: 3.5rem;
    --hero-h1-lh: 4rem;
    --section-h2-size: 2rem;
    --section-h2-lh: 2.5rem;
    --wrapper-px: 24px;
  }
}

@media (max-width: 768px) {
  :root {
    --hero-h1-size: 2.5rem;
    --hero-h1-lh: 3rem;
    --section-h2-size: 1.75rem;
    --section-h2-lh: 2.25rem;
    --section-padding: 60px 0;
    --wrapper-px: 16px;
    --btn-mt-hero: 40px;
  }

  .t2-layout__cta {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* Long button labels may wrap on very small phones instead of overflowing */
@media (max-width: 400px) {
  .t2-button { white-space: normal; text-align: center; max-width: 100%; }
}