/* utility.css */

/* --- Global Reset & Smoothing --- */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

/* Ensure elements inherit parent styles consistently */
a {
  color: inherit;
  text-decoration: inherit;
  font-size: inherit;
}

/* --- Client-First Layout Core --- */
.page-wrapper {
  position: relative;
  min-height: 100vh;
}

.padding-global {
  padding-left: 5%;
  padding-right: 5%;
}

/* --- Utilities --- */
.text-style-2lines {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.hide { display: none ; }

/* =========================================
   1. Base Tags
   ========================================= */
body {
  background-color: var(--color-background);
  font-family: var(--font-body);
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 500;
}

h1 { font-size: 3.5rem; line-height: 1.2; }
h2 { font-size: 3rem; line-height: 1.2; }
h3 { font-size: 2.5rem; line-height: 1.2; }
h4 { font-size: 2rem; line-height: 1.3; }
h5 { font-size: 1.5rem; line-height: 1.4; }
h6 { font-size: 1.25rem; line-height: 1.4; }

p { margin-bottom: 0; }
a { color: var(--color-text); text-decoration: underline; }
img { max-width: 100%; display: inline-block; }
label { margin-bottom: .25rem; font-weight: 500; }

ul { margin-top: 1rem; margin-bottom: 1rem; padding-left: 1.25rem; }
ol { margin-top: 1rem; margin-bottom: 1rem; padding-left: 1.5rem; }
li { margin-top: .25rem; margin-bottom: .25rem; padding-left: .5rem; }

blockquote {
  border-left: .1875rem solid var(--color-text);
  margin-bottom: 0;
  padding: .75rem 1.25rem;
  font-size: 1.25rem;
  line-height: 1.5;
}

figure { margin-top: 3rem; margin-bottom: 3rem; }
figcaption { text-align: center; margin-top: .25rem; }


/* =========================================
   2. Layout
   ========================================= */
.hide { display: none; }
.overflow-hidden { overflow: hidden; }
.z-index-1 { z-index: 1; position: relative; }
.z-index-2 { z-index: 2; position: relative; }


/* =========================================
   3. Containers & Max-Widths
   ========================================= */
.container-large { width: 100%; max-width: 80rem; margin-left: auto; margin-right: auto; }
.container-medium { width: 100%; max-width: 64rem; margin-left: auto; margin-right: auto; }
.container-small { width: 100%; max-width: 48rem; margin-left: auto; margin-right: auto; }

.max-width-full { width: 100%; max-width: none; }
.max-width-large { width: 100%; max-width: 48rem; }
.max-width-medium { width: 100%; max-width: 35rem; }
.max-width-small { width: 100%; max-width: 30rem; }


/* =========================================
   4. Typography
   ========================================= */
.heading-style-h1 { font-size: 10rem; font-weight: 400; line-height: 1; opacity: 0.9; transform: skew(-12deg, 0deg); letter-spacing: -0.0525rem; text-transform: uppercase; }
.heading-style-h2 { font-size: 3.75rem; font-weight: 400; line-height: 1.2; }
.heading-style-h3 { font-size: 3rem; font-weight: 400; line-height: 1.2; }
.heading-style-h4 { font-size: 2.5rem; font-weight: 400; line-height: 1.3; }
.heading-style-h5 { font-size: 2rem; font-weight: 400; line-height: 1.4; }
.heading-style-h6 { font-size: 1.625rem; font-weight: 400; line-height: 1.4; }

.text-size-large { font-size: 1.25rem; }
.text-size-medium { font-size: 1.125rem; }
.text-size-regular { font-size: 1rem; }
.text-size-small { font-size: .875rem; }
.text-size-tiny { font-size: .75rem; }

.text-weight-xbold { font-weight: 800; }
.text-weight-bold { font-weight: 700; }
.text-weight-semibold { font-weight: 600; }
.text-weight-medium { font-weight: 500; }
.text-weight-normal { font-weight: 400; }
.text-weight-light { font-weight: 300; }

.text-style-italic { font-style: italic; }
.text-style-link { text-decoration: underline; }
.text-style-muted { opacity: .6; }
.text-style-nowrap { white-space: nowrap; }
.text-style-strikethrough { text-decoration: line-through; }
.text-style-allcaps { text-transform: uppercase; }

.text-align-left { text-align: left; }
.text-align-center { text-align: center; }
.text-align-right { text-align: right; }

.text-color-white { color: var(--white); }
.text-color-black { color: var(--black); }

.text-style-quote {
  border-left: .1875rem solid var(--color-text);
  margin-bottom: 0;
  padding: .75rem 1.25rem;
  font-size: 1.25rem;
  line-height: 1.5;
}

/* Rich Text (for CMS output) */
.text-rich-text h1 { margin-top: 2rem; margin-bottom: 1rem; }
.text-rich-text h2, .text-rich-text h3, .text-rich-text h4 { margin-top: 1.5rem; margin-bottom: 1rem; }
.text-rich-text h5, .text-rich-text h6 { margin-top: 1.25rem; margin-bottom: 1rem; }
.text-rich-text p { margin-bottom: 1rem; }
.text-rich-text blockquote { margin-top: 1.5rem; margin-bottom: 1.5rem; font-style: italic; }
.text-rich-text figcaption { border-left: 2px solid var(--color-text); text-align: left; margin-top: .5rem; padding-left: .5rem; font-size: .875rem; }


/* =========================================
   5. Spacing
   ========================================= */
.margin-0 { margin: 0; }
.margin-tiny { margin: .25rem; }
.margin-xxsmall { margin: .5rem; }
.margin-xsmall { margin: 1rem; }
.margin-small { margin: 1.5rem; }
.margin-medium { margin: 2rem; }
.margin-large { margin: 3rem; }
.margin-xlarge { margin: 4rem; }
.margin-xxlarge { margin: 5rem; }
.margin-huge { margin: 6rem; }
.margin-xhuge { margin: 7rem; }
.margin-xxhuge { margin: 10rem; }

.margin-top { margin-bottom: 0; margin-left: 0; margin-right: 0; }
.margin-bottom { margin-top: 0; margin-left: 0; margin-right: 0; }
.margin-left { margin-top: 0; margin-bottom: 0; margin-right: 0; }
.margin-right { margin-top: 0; margin-bottom: 0; margin-left: 0; }
.margin-vertical { margin-left: 0; margin-right: 0; }
.margin-horizontal { margin-top: 0; margin-bottom: 0; }
.margin-top-auto { margin-top: auto; }
.margin-top-xsmall { margin-top: 1rem; }
.margin-top-small  { margin-top: 1.5rem; }

.padding-global { padding-left: 5%; padding-right: 5%; }
.padding-section-small { padding-top: 3rem; padding-bottom: 3rem; }
.padding-section-medium { padding-top: 5rem; padding-bottom: 5rem; }
.padding-section-large { padding-top: 7rem; padding-bottom: 7rem; }


/* =========================================
   6. Shadows
   ========================================= */
.shadow-small { box-shadow: 0 4px 8px -2px #0000001a, 0 2px 4px -2px #0000000f; }
.shadow-medium { box-shadow: 0 12px 16px -4px #00000014, 0 4px 6px -2px #00000008; }
.shadow-large { box-shadow: 0 20px 24px -4px #00000014, 0 8px 8px -4px #00000008; }


/* =========================================
   7. Responsive
   ========================================= */
@media screen and (max-width: 991px) {
  h1, .heading-style-h1 { font-size: 3.25rem; }
  h2, .heading-style-h2 { font-size: 2.75rem; }
  h3, .heading-style-h3 { font-size: 2.25rem; }
  h4, .heading-style-h4 { font-size: 1.75rem; }

  .padding-section-medium { padding-top: 4rem; padding-bottom: 4rem; }
  .padding-section-large { padding-top: 6rem; padding-bottom: 6rem; }

  .margin-large { margin: 2.5rem; }
  .margin-xlarge { margin: 3.5rem; }
  .margin-xxlarge { margin: 4.5rem; }
  .margin-huge { margin: 5rem; }
  .margin-xhuge { margin: 6rem; }
  .margin-xxhuge { margin: 7.5rem; }

  .hide-tablet { display: none; }
}

@media screen and (max-width: 767px) {
  h1, .heading-style-h1 { font-size: 2.5rem; }
  h2, .heading-style-h2 { font-size: 2.25rem; }
  h3, .heading-style-h3 { font-size: 2rem; }
  h4, .heading-style-h4 { font-size: 1.5rem; line-height: 1.4; }
  h5, .heading-style-h5 { font-size: 1.25rem; }
  h6, .heading-style-h6 { font-size: 1.125rem; }

  .text-size-large { font-size: 1.125rem; }
  .text-size-medium { font-size: 1rem; }
  .text-style-quote { font-size: 1.125rem; }
  .text-style-nowrap { white-space: normal; }

  .margin-xsmall { margin: .75rem; }
  .margin-small { margin: 1.25rem; }
  .margin-medium { margin: 1.5rem; }
  .margin-large { margin: 2rem; }
  .margin-xlarge { margin: 2.5rem; }
  .margin-xxlarge { margin: 3rem; }
  .margin-huge { margin: 3.5rem; }
  .margin-xhuge { margin: 4rem; }
  .margin-xxhuge { margin: 5rem; }

  .padding-section-small { padding-top: 2rem; padding-bottom: 2rem; }
  .padding-section-medium { padding-top: 3rem; padding-bottom: 3rem; }
  .padding-section-large { padding-top: 4rem; padding-bottom: 4rem; }

  .hide-mobile-landscape { display: none; }
}

@media screen and (max-width: 479px) {
  .hide-mobile-portrait { display: none; }
}