/*
 * Base Reset & Theme Styles — cleaned and consolidated
 * - Modern reset
 * - Variables (light/dark)
 * - Base elements & accessibility
 * - Utilities & components (buttons, tables, embeds, slick)
 *
 * Notes:
 * - Avoids redundant vendor prefixes
 * - Uses :focus-visible; keeps focus outlines for accessibility
 * - Replaces .sr-only with .visually-hidden pattern
 * - Fixes typos (e.g. slick dots bottom offset)
 * - Replaces invalid negative scroll-padding-top
 */

/* =============================
  # Reset (modern-css-reset)
============================= */
*,
*::before,
*::after { box-sizing: border-box; }

html { height: 100%; -webkit-text-size-adjust: 100%; background-color: var(--white); }

body {
  margin: 0;
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--content);
  font-weight: var(--medium);
  background-color: var(--white);
}

img,
picture,
video,
canvas,
svg { display: block; max-width: 100%; }

input,
button,
textarea,
select { font: inherit; }

p,
h1,
h2,
h3,
h4,
h5,
h6 { overflow-wrap: break-word;margin-top: 0; margin-bottom: 0; }

#root,
#__next { isolation: isolate; }

section { max-width: 100vw; overflow-x: hidden; }

/* Smooth scrolling (respects reduced motion) */
:root { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* View transitions */
@view-transition { navigation: auto; }

/* Safari float clearfix quirk */
.row::before,
.row::after { content: ""; display: table; }

/* =============================
  # CSS Variables (Theme)
============================= */
:root {
  color-scheme: light;
  /* Stable Angel brand — pulled directly from stableangel.com's compiled
     Tailwind/shadcn theme (HSL variables decoded to hex below) */
  --black: #1A1A1A;
  --green: #00D2E6;
  --dgreen: #00A8B8;
  --darkgreen: #00A8B8;
  --white: #FFF;
  --offwhite: #F5F5F5;
  --orange: #00D2E6; /* single-accent brand: focus/selection reuse the primary teal */
  --orange-opp: rgba(0, 210, 230, 0.65);
  --grey: #808080;
  --mgrey: #E6E6E6; /* border */
  --lgrey: #FAFAFA; /* card surface */
  --white-pearl: #F7F7F7;
  --gray: #E6E6E6; /* duplicate naming kept for compatibility */
  --slate-gray: #808080;
  --blue: #00A8B8;
  --lightblue: #00D2E6;

  /* Semantic aliases matching the source site's CSS variable names 1:1 */
  --primary: #00D2E6;         /* hsl(185 100% 45%) */
  --primary-dark: #00A8B8;
  --foreground: #1A1A1A;      /* hsl(0 0% 10%) */
  --muted-foreground: #737373; /* hsl(0 0% 45%) — secondary body copy */
  --background: #FFFFFF;
  --card: #FAFAFA;            /* hsl(0 0% 98%) */
  --card-bg: #FAFAFA;
  --border-color: #E6E6E6;    /* hsl(0 0% 90%) */
  --accent: #EEECE8;          /* hsl(40 15% 92%) — hero badge pill bg */
  --accent-foreground: #1A1A1A;
  --gold: #F7F7F7;            /* hsl(0 0% 97%) — savings/footer surface */
  --gold-foreground: #1A1A1A;
  --steel: #808080;           /* hsl(0 0% 50%) */

  --content: "Inter", system-ui, sans-serif;
  --header:  "Inter", system-ui, sans-serif; /* site uses Inter for headings too — "font-display" resolves to Inter */

  --semi: 600;
  --bold: 700;
  --medium: 500;

  --radius: 8px;
  --pill-radius: 9999px;
  --ease-3: cubic-bezier(.2, .8, .2, 1);
  --transition: all .2s var(--ease-3);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--header);
  font-weight: 700;
  color: var(--foreground);
}

/* Dark mode overrides 
[data-bs-theme="dark"] {
  --black: #ffffff;
  --white: #000000;
}*/

/* =============================
  # Base / Global
============================= */
::selection { background-color: var(--orange); color: var(--black); }
::-moz-selection { background-color: var(--orange); color: var(--black); }

/* Links & interactive */
a { color: inherit; text-decoration: none; transition: var(--transition); }
a:hover { text-decoration: none; }

/* Do NOT remove focus outlines; improve them */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

button { cursor: pointer; transition: var(--transition); }
button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

b,
strong { font-weight: 700; }

/* Media */
.img-res { width: 100%; height: auto; }
video { width: 100%; height: auto; }

/* Scrollbar (WebKit only) */
body::-webkit-scrollbar { width: 1em; }
body::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0,0,0,.3); }
body::-webkit-scrollbar-thumb { background-color: var(--orange); outline: 1px solid var(--orange); }

/* =============================
  # Accessibility
============================= */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.sr-only-focusable:focus {
  position: relative;
  width: auto;
  height: auto;
  clip: initial;
  margin: inherit;
  padding: inherit;
  border: initial;
}

/* Headings offset for anchored targets (use on headings) */
:target { scroll-margin-top: 3rem; }

@media (max-width: 1280px) {
  :target { scroll-margin-top: 150px;}
}

/* =============================
  # Buttons (brand override — bootstrap-custom.min.css ships generic
  # Bootstrap blues; these rules load after it and win on cascade order.
  # Shapes/sizes match the source site's "hero" / "heroOutline" pill buttons)
============================= */
.btn-primary,
.btn-outline-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem;
  padding: 0 2.5rem;
  border-radius: var(--pill-radius);
  border-width: 2px;
  font-size: 1rem;
  font-weight: var(--semi);
  white-space: nowrap;
  transition: var(--transition);
}

.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  box-shadow: 0 10px 25px -10px rgba(0, 210, 230, .45);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: rgba(0, 210, 230, .85);
  border-color: rgba(0, 210, 230, .85);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-outline-secondary {
  background-color: transparent;
  border-color: var(--foreground);
  color: var(--foreground);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible {
  background-color: var(--foreground);
  border-color: var(--foreground);
  color: var(--white);
}

/* =============================
  # Content Blocks
============================= */

.content-block-linked a {border-bottom: 1px solid rgba(35,31,32,.15);
  transition: 0.2s ease-in-out all;}
.content-block-linked a:hover {border-bottom: 1px solid rgba(35,31,32,9);
  transition: 0.2s ease-in-out all;}

.content-block-linked-white a {border-bottom: 1px solid rgba(252,249,242,.15);
  transition: 0.2s ease-in-out all;}
.content-block-linked-white a:hover {border-bottom: 1px solid rgba(252,249,242,9);
  transition: 0.2s ease-in-out all;}


.image-block{}
.image-block img {width:100%;height:auto}
.image-block.image-full {height: 100%;width: 100%;}
.image-block.image-full img {object-fit: cover;width:100%;height: 100%;}

/* Hover effect for lists */
ul > li { transition: opacity .3s var(--ease-3); }
ul:hover > li:not(:hover) { opacity: .8; }


/* =============================
  # Slick Carousel
============================= */
.slick-prev,
.slick-next {
  font-size: 0; line-height: 0; position: absolute; top: calc(50% - 19%);
  display: block; width: 17px; height: 29px; padding: 0;
  transform: translate(0, -50%);
  cursor: pointer; color: transparent; border: none; outline: none; background: transparent;
  background-position: center; background-repeat: no-repeat; background-size: cover; z-index: 10;opacity:0.7
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus { color: transparent; outline: none; opacity:1}
.slick-prev.slick-disabled,
.slick-next.slick-disabled { opacity: .5; }
.slick-prev { left: -25px; background-image: url(../../../img/slick-left.svg); }
.slick-next { right: -25px; background-image: url(../../../img/slick-right.svg); }
.slick-slide { margin: 0 27px; }
.slick-list { margin: 0 -27px; }

/* Dots */
.slick-dotted.slick-slider { margin-bottom: 30px; }
.slick-dots { position: absolute; bottom: -45px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; }
.slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; }
.slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; border-radius: 50%; background-color: #4B8F8C; }
.slick-dots li.slick-active button { background-color: #fff; }
.slick-dots li button:hover { background-color: #D5D5D5; }

@media (max-width: 1366px) {
  .slick-prev {left: -15px;}
  .slick-next {right: -15px;}
}
@media (max-width: 992px) {
  .slick-prev {left: -10px;}
  .slick-next {right: -10px;}
}

/* =============================
  # Mode Switches
============================= */
.bd-mode-toggle { background-color: #712cf9; }
.switches { display: inline-block; padding: 0; margin: 10px 0 0; border-radius: 6px; }
.switches li { position: relative; }
.switches li:not(:last-child) { border-bottom: 1px solid var(--gray); }
.switches li [type="radio"] { position: absolute; left: -9999px; }
.switches label { display: grid; grid-template-columns: 40px auto; align-items: center; gap: 10px; padding: 20px; cursor: pointer; }

/* Icon visibility (Font Awesome classes assumed) */
.bd-mode-toggle .btn .fa-moon { display: none; color: #fff; }
.bd-mode-toggle .btn .fa-sun  { display: block; color: #fff; }
.bd-mode-auto .fa-moon { display: none; }
.bd-mode-auto .fa-sun  { display: block; }
[data-bs-theme="dark"] .bd-mode-toggle .btn .fa-sun { display: none; }
[data-bs-theme="dark"] .bd-mode-auto  .fa-sun { display: none; }
[data-bs-theme="dark"] .bd-mode-toggle .btn .fa-moon { display: block; }
[data-bs-theme="dark"] .bd-mode-auto  .fa-moon { display: block; }
.dropdown-toggle::after { border-top: .3em solid #fff; }

/* =============================
  # Forms & Misc Utilities
============================= */
.form-control {
  display: block; width: 100%;
  padding: .375rem .75rem;
  font-size: 18px; font-weight: 400; line-height: 26px;
  color: #000; background-color: #fff; background-clip: padding-box;
  border: 1px solid #ced4da; appearance: none; border-radius: 0;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  margin-bottom: 10px;
}
.wpcf7 form .wpcf7-response-output {background-color: #fff;padding: 10px 15px;}
.wpcf7-not-valid-tip {font-size: 14px; position: relative;top: -34px;left: 5px;}

.background { position: relative; }
.background img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.background-image { background-position: center; background-repeat: no-repeat; background-size: cover; }
.contain-background { background-position: center right; background-repeat: no-repeat; background-size: contain; }

.img-fill { object-fit: cover; width: 100%; height: auto; }

.box { display: flex; align-items: center; justify-content: center; }
.box div { width: 100%; height: 100%; }

.show-600 { display: none; }
.hide-600 { display: block; }
.show-700 { display: none; }
.hide-700 { display: block; }
.show-900,
.show-900-flex { display: none; }
.hide-900 { display: block; }


.row-eq-height { display: flex; }
.vcenter { display: flex; flex-direction: column; justify-content: center; }
.wpcf7-spinner { position: absolute; }
.full-height { height: 100svh; }

input:focus::placeholder { color: transparent; }

.noselect { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
[type=button],
[type=reset],
[type=submit],
button { -webkit-appearance: none !important; }

.center-this { display: flex; align-items: center; justify-content: center; height: 100%; }

.darken-me {
  background: linear-gradient(180deg, rgba(23,36,62,1) 0%, rgba(0,0,0,1) 100%);
  opacity: .55; position: absolute; inset: 0; width: 100%; height: 100%;
}


/* =============================
  # Tables & Embeds
============================= */
table { color: #333; background: #fff; border: 1px solid grey; font-size: 12pt; border-collapse: collapse; margin-bottom: 50px; }
table thead th,
table tfoot th { color: #777; background: rgba(0,0,0,.1); }
table caption { padding: .5em; }
table th,
table td { padding: .5em; border: 1px solid #d3d3d3; }

.videoWrapper { position: relative; padding-bottom: 56.25%; height: 0; }
.videoWrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* =============================
  # Colour Mode Override Hooks
============================= */
.dark-mode {}
.light-mode {}


/*
 * Responsive & Cookie Consent Styles — cleaned and consolidated
 * - Desktop-first responsive container paddings
 * - Show/Hide utilities at common breakpoints
 * - Motion-safe AOS overrides
 * - Cookiebot & CookieScript tweaks
 *
 * Notes:
 * - Reduces duplicate selectors; groups container classes
 * - Removes redundant vendor prefixes
 * - Uses appearance instead of -webkit-appearance where possible
 */

/* =============================
  # Responsive (desktop-first)
============================= */
.container-noside { max-width: 100% !important; padding-left: 0; padding-right: 0; }

/* Helper to target all bootstrap containers consistently.
   Source site uses a flat 24px gutter (Tailwind "container mx-auto px-6")
   at every breakpoint, capped at a comfortable reading width. */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  max-width: 1280px !important;
  padding-left: 24px;
  padding-right: 24px;
  margin: auto;
}
.container-header { max-width: 100% !important; padding-left: 24px; padding-right: 24px; }

@media (max-width: 992px) {
  .show-900 { display: block; }
  .show-900-flex { display: flex; }
  .hide-900 { display: none; }
  .left-900 {text-align:left!important}

  .mobile-overflow { position: relative; overflow: hidden; }

  .center-mobile {text-align: center!important;padding:10px 0px}



  .two-ctas .btn { margin: 0 20px;margin-bottom: 20px; }

}

@media (max-width: 768px) {
  .show-700 { display: block; }
  .hide-700 { display: none; }

  .nav-toggle { display: block; }

  /* Motion-safe AOS overrides: only disable animations if user prefers reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .aos-animate { transition-property: none !important; transform: none !important; animation: none !important; }
    [data-aos^="fade"][data-aos^="fade"] { opacity: 1 !important; transform: translateZ(0); }
  }

  .cta-btn {width: 100%; margin-left: 0px !important;padding: 15px 25px;}


  .content-block p, .content-block li {font-size: 16px; line-height: 22px;}
  .content-block p {padding-bottom:20px}

  .section-ctas.has-two .two-ctas a {margin-bottom:30px}
}

@media (max-width: 600px) {
  .show-600 { display: block; }
  .hide-600 { display: none; }
}

/* =============================
  # Cookiebot — dialog & details
============================= */
#CybotCookiebotDialogPoweredByText,
#CybotCookiebotDialogPoweredByText a { display: none !important; }

#CybotCookiebotDialogDetailBodyContentTextAbout a { color: #434f5b; font-weight: 600; text-decoration: underline; }

#CybotCookiebotDialog .CybotCookiebotScrollContainer {
  position: relative; height: 100%; min-height: 20vh; padding: .375em; border-bottom: 1px solid #e2d6c0;
}

#CybotCookiebotDialogHeader {
  display: flex; align-items: center; width: 100%; padding: 1em; border-bottom: 1px solid #e2d6c0;
}

#CybotCookiebotDialogHeaderLogosWrapper a { display: none !important; }

/* =============================
  # CookieScript — report table & controls
============================= */
.table-responsive._CookieScriptReportPageTableWrapper { width: 100%; }

table._CookieScriptReportPageTable,
._CookieScriptReportPageTable tbody,
._CookieScriptReportPageTable td,
._CookieScriptReportPageTable tfoot,
._CookieScriptReportPageTable th,
._CookieScriptReportPageTable thead,
._CookieScriptReportPageTable tr {
  font-size: 16px; line-height: 20px; font-family: var(--tk-poppins, system-ui, sans-serif);
  text-overflow: ellipsis; word-wrap: break-word;
}

table._CookieScriptReportPageTable { margin-bottom: 35px !important; border-collapse: collapse; width: 100%; }

button._CookieScriptReportPageSaveSettingButton {
  color: #203364; font-size: 19px; line-height: 29px;
  transition: all .3s ease; border: 2px solid #203364;
  background-color: transparent; outline: none; padding: 5px 10px 2px;
}
button._CookieScriptReportPageSaveSettingButton:hover { color: #fff; background-color: #203364; }

input._CookieScriptReportPageCheckboxInput { width: 14px; height: 14px; border: 1px solid #000; appearance: auto; margin: 0 5px 5px 0; }

@media (max-width: 1440px) {
  ._CookieScriptReportPageCheckboxes { display: block !important; margin-bottom: 50px !important; }
  ._CookieScriptReportPageCheckbox { margin: 0 20px 25px 0 !important; }
}

@media (max-width: 768px) {
  ._CookieScriptReportPageTable tbody,
  ._CookieScriptReportPageTable td,
  ._CookieScriptReportPageTable tfoot,
  ._CookieScriptReportPageTable th,
  ._CookieScriptReportPageTable thead,
  ._CookieScriptReportPageTable tr { font-size: 11px; line-height: 13px; }

  ._CookieScriptReportPageTableTd,
  ._CookieScriptReportPageTableTh { padding: 4px; }
}