/**
 * @file
 * global.css
 * 
 * Global colour and font style and home made tailwind style snippets
 * 
 * -------------------------------------------------
 * Attached thru `.info.yml`
 *
 ============================================================================ */
 
 
@import url('https://fonts.googleapis.com/css2?family=Laila:wght@300;400;500;600;700&family=Hind:wght@300;400;500;600;700&display=swap');

/* ─────────────────────────────────────────
   Primitive Colour Tokens
───────────────────────────────────────── */

:root {
  /* Brand */
  --color-inlet:          #1E2E2B;
  --color-inlet-deep:     #131F1D;
  --color-forest:         #415554;
  --color-mist:           #94B0B4;
  --color-driftwood:      #FAECE1;
  --color-driftwood-dark: #F0E8DC;
  --color-cedar:          #DD906A;
  --color-ember:          #9F4F38;
  --color-ember-light:    #E09B7A;

  /* Neutral */
  --color-black:            #162927;
  --color-white:            #FFFEFC;
  --color-border-lightest:  #EDE4D8;
  --color-border-light:     #D8CFC4;
  --color-body-text-dark:   #B8C8C4;
  --color-disabled:         #717C7B;
  --color-dark-mist:        #415554;

  /* System */
  --color-success-green:       #46A792;
  --color-success-green-light: #CEECE5;
  --color-error-red:           #CB5D4B;
  --color-error-red-light:     #F7E7E3;
  
  --color-family: #23575E;
  --color-support: #59335F;
  --color-rebuild: #89332B;
}

/* ─────────────────────────────────────────
   Bootstrap Variable Overrides
───────────────────────────────────────── */

:root {
  /* Map Bootstrap's color vars to your tokens */
  --bs-primary-rgb:         250,236,225;       /* --color-dritwood */
  --bs-secondary-rgb:       148, 176, 180;    /* --color-body-text-dark */
  --bs-secondary-color:     var(--color-body-text-dark);
  --bs-body-color:          var(--color-driftwood);
  --bs-body-bg:             var(--color-inlet);
  --bs-link-color:          var(--color-cedar);
  --bs-link-hover-color:    var(--color-ember-light);
  --bs-border-color:        var(--color-border-light);

  /* Modal specific */
  --bs-modal-bg:            var(--color-forest);
  --bs-modal-color:         var(--color-driftwood);
  --bs-modal-border-color:  var(--color-border-light);
  --bs-modal-header-border-color: var(--color-border-light);
}



/* ─────────────────────────────────────────
   Global Styles
───────────────────────────────────────── */

html {
    overflow-x: hidden;
}

body {
  font-family: 'Roboto', Arial, sans-serif;
  line-height: 1.5;
  font-size: 16px;
}
body.node--type-front-page,
body.node--type-about-page,
body.node--type-page {
    background: #1E2E2B;
}

body.program-family-program {
    background: #23575E !important;
}
body.program-supportive-recovery {
    background: #59335F !important;   
}
body.program-rebuilding-the-circle {
    background: #89332B !important;
}


.flex-col {
    display: flex;
    flex-direction: column;
}
.flex {
    display: flex;
}
.flex-pc-row {
    flex-direction: row;
}
.justify-center {
    justify-content: center;
}
.items-center {
    align-items: center;
}
.grid-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.grid-four {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.space-around {
    justify-content: space-around;
}
.space-between {
    justify-content: space-between;
}
.absolute {
    position: absolute;
}
.relative {
    position: relative;
}

.has-bg {
    overflow: clip;
    justify-content: center;
    position: relative;
}
.bg {
    position: absolute;
    align-self: center;
    z-index: -1;
    max-width: fit-content;
    object-fit: cover
}
.text-secondary {
    color: #B8C8C4;
}
.home-story-block .bg,
.coming-soon .bg {
    width: 1600px;
}


/* ─────────────────────────────────────────
   Headings — Laila (Desktop default)
───────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Laila', serif;
  font-weight: 700;
}

h1 {
  font-size: 56px;
  line-height: 120%;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 48px;
  line-height: 120%;
  letter-spacing: -0.02em;
}

h3 {
  font-size: 40px;
  line-height: 120%;
  letter-spacing: -0.02em;
}

h4 {
  font-size: 32px;
  line-height: 130%;
  letter-spacing: -0.01em;
}

h5 {
  font-size: 24px;
  line-height: 140%;
}

h6 {
  font-size: 20px;
  line-height: 140%;
}

footer { color: var(--color-driftwood); }
footer h2 {
    font-size: 18px;
    font-weight: 600;
    font-family: "Hind", sans-serif;
    color: var(--color-mist);
}
footer h4,
#block-letsgo-crisissupport-title {
    font-size: 17.35px;
    font-weight: 600;
    font-family: "Hind", sans-serif;
    color: var(--color-driftwood);
    margin-bottom: 0;
    padding: 4px 0 2px 0;
}
#block-letsgo-ourprograms {
    margin-bottom: 20px;
}
.subfooter .field-name-field-fax-number, 
.subfooter .field-name-field-toll-free-phone-number {
    display: flex;
    gap: 9.6px;
    margin-top: -12px;
}
footer .field-name-field-fax-number h4,
footer .field-name-field-toll-free-phone-number h4 {
    font-size: 16px;
    white-space:nowrap;
}

body a {
    text-decoration: none;
}

/* ─────────────────────────────────────────
   Headings — Mobile
───────────────────────────────────────── */

@media (max-width: 700px) {
  h1 {
    font-size: 40px;
    line-height: 120%;
    letter-spacing: -0.02em;
  }

  h2 {
    font-size: 36px;
    line-height: 120%;
    letter-spacing: -0.02em;
  }

  h3 {
    font-size: 32px;
    line-height: 120%;
    letter-spacing: -0.02em;
  }

  h4 {
    font-size: 24px;
    line-height: 140%;
    letter-spacing: -0.01em;
  }

  h5 {
    font-size: 20px;
    line-height: 140%;
  }

  h6 {
    font-size: 18px;
    line-height: 140%;
  }
}

/* ─────────────────────────────────────────
   Tagline
───────────────────────────────────────── */

.tagline {
  font-family: 'Laila', serif;
  font-size: 16px;
  line-height: 150%;
  font-weight: 600;
}

/* ─────────────────────────────────────────
   Body Text — Hind
───────────────────────────────────────── */

.text-large,
.text-medium,
.text-regular,
.text-small,
.text-tiny {
  font-family: 'Hind', sans-serif;
}

.text-large,
.sidebar .menu {
  font-size: 20px;
  line-height: 150%;
}

.text-medium {
  font-size: 18px;
  line-height: 150%;
}

.text-regular,
.sidebar {
  font-size: 16px;
  line-height: 150%;
}

.text-small {
  font-size: 14px;
  line-height: 150%;
}

.text-tiny {
  font-size: 12px;
  line-height: 150%;
}


/* ─────────────────────────────────────────
   Background Colour
───────────────────────────────────────── */

.bg-primary {
  background: var(--color-inlet) !important;
}

.bg-secondary {
  background: var(--color-mist);
}

.bg-tertiary {
  background: var(--color-forest);
}

.bg-alternate {
  background: var(--color-driftwood);
}

.bg-success {
  background: var(--color-success-green-light);
}

.bg-error {
  background: var(--color-error-red-light);
}

.bg-cedar {
    background: var(--color-cedar);
}

/* ─────────────────────────────────────────
   Border Colour
───────────────────────────────────────── */

.border-primary {
  border-color: var(--color-driftwood);
}

.border-secondary {
  border-color: var(--color-mist);
  border-bottom-color: var(--color-mist);
}

.border-tertiary {
  border-color: var(--color-cedar);
}

.border-alternate {
  border-color: var(--color-inlet);
}

.border-success {
  border-color: var(--color-success-green);
}

.border-error {
  border-color: var(--color-error-red);
}

/* ─────────────────────────────────────────
   Text Colour
───────────────────────────────────────── */

body .text-primary {
  color: var(--color-driftwood) !important;
}
body .text-primary a {
  color: var(--color-driftwood)
}

body .text-secondary {
  color: var(--color-body-text-dark) !important;
}

body .text-alternate,
body .text-alternate a {
  color: var(--color-black) !important;
} 

body .text-success {
  color: var(--color-success-green) !important;
}

body .text-error {
  color: var(--color-error-red) !important;
}

/* ─────────────────────────────────────────
   Link Colour
───────────────────────────────────────── */

body .link-primary,
body .link-primary a {
  color: var(--color-cedar);
}

body .link-primary:hover,
body .link-primary a:hover {
  color: var(--color-ember-light);
}

body .link-secondary,
body .link-secondary a {
  color: var(--color-body-text-dark);
}

body .link-secondary:hover,
body .link-secondary a:hover {
  color: var(--color-ember-light);
}

body .link-alternate,
body .link-alternate a {
  color: var(--color-black);
}

body .link-alternate:hover,
body .link-alternate a:hover {
  color: var(--color-ember-light);
}

/* ─────────────────────────────────────────
   Action Colour
───────────────────────────────────────── */

body .action-primary {
  background: var(--color-cedar);
  color: var(--color-ember-light);
}

body .action-primary:hover {
  background: var(--color-black);
  color: var(--color-border-lightest);
}

body .action-secondary {
  color: var(--color-body-text-dark);
  background: var(--color-mist);
}

body .action-secondary:hover {
  color: var(--color-black);
  background: var(--color-black);
}


/*program brand color*/

.bg-family {
    background: var(--color-family);
    white-space: nowrap;
}
body .text-family,
body .text-family a {
    color: var(--color-family);
}
.border-family {
    border-color: var(--color-family);
}
.bg-support {
    background: var(--color-support);
}
body .text-support,
body .text-support a {
    color: var(--color-support);
}
.border-support {
    border-color: var(--color-support);
}
.bg-rebuild {
    background: var(--color-rebuild);
}
body .text-rebuild,
body .text-rebuild a {
    color: var(--color-rebuild);
}
.border-rebuild {
    border-color: var(--color-rebuild);
}