/* ============================================================
   Ageless Compass brand layer (loads after Intrio theme CSS)
   Values: Calm, Dignified, Trusted, Gentle
   Audience: older adults — Inter body, generous size/line-height
   ============================================================ */

/* --- Local brand fonts --- */
@font-face {
  font-family: "Rink";
  src: url("/fonts/brand/rink/Rink-Thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rink";
  src: url("/fonts/brand/rink/Rink-Extralight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rink";
  src: url("/fonts/brand/rink/Rink-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rink";
  src: url("/fonts/brand/rink/Rink-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rink";
  src: url("/fonts/brand/rink/Rink-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rink";
  src: url("/fonts/brand/rink/Rink-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rink";
  src: url("/fonts/brand/rink/Rink-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rink";
  src: url("/fonts/brand/rink/Rink-Extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rink";
  src: url("/fonts/brand/rink/Rink-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Maysaroh";
  src:
    url("/fonts/brand/maysaroh/Maysaroh.otf") format("opentype"),
    url("/fonts/brand/maysaroh/Maysaroh.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Brand tokens (override Intrio * vars) --- */
* {
  --ac-dark-teal: #104c5c;
  --ac-muted-teal: #94b1a1;
  --ac-cinnamon: #c66b4a;
  --ac-floral-white: #f0f1e7;
  --ac-rosy-taupe: #c98f8a;

  --primary-color: #104c5c;
  --primary-color-rgb: 16, 76, 92;
  --secondary-color: #94b1a1;
  --secondary-color-rgb: 148, 177, 161;

  /* Body: Inter only — max legibility for older audience */
  --body-font: var(--font-inter), "Inter", Helvetica, Arial, sans-serif;
  --body-font-size: 18px;
  --body-font-color: rgba(16, 76, 92, 0.88);
  --body-font-color-bg-dark: rgba(240, 241, 231, 0.92);
  --body-font-weight: 400;
  --body-font-letter-spacing: 0;
  --body-font-line-height: 1.7;

  /* Display / H1: Rink */
  --heading-font: "Rink", var(--font-inter), "Inter", sans-serif;
  --heading-font-weight: 500;
  --heading-font-color: #104c5c;
  --heading-font-color-bg-dark: #f0f1e7;
  --heading-text-transform: none;

  /* Specialty accents: Maysaroh (titles/subtitles only — never body) */
  --alt-font-1: "Maysaroh", cursive;
  --specialty-font: "Maysaroh", cursive;

  --h1-font-family: "Rink", var(--font-inter), sans-serif;
  --h1-font-weight: 500;
  --h1-letter-spacing: -0.01em;
  --h1-line-height: 1.05em;
  --h1-font-size: 72px;

  --h2-font-family: "Rink", var(--font-inter), sans-serif;
  --h2-font-weight: 500;
  --h2-letter-spacing: -0.01em;
  --h2-line-height: 1.2em;

  --h3-font-family: "Rink", var(--font-inter), sans-serif;
  --h4-font-family: "Rink", var(--font-inter), sans-serif;
  --h5-font-family: var(--body-font);
  --h6-font-family: var(--body-font);

  --mainmenu-font: var(--body-font);
  --mainmenu-font-size: 16px;
  --mainmenu-font-weight: 500;
  --mainmenu-text-transform: none;
  --mainmenu-letter-spacing: 0.01em;

  --btn-font-family: var(--body-font);
  --btn-font-size: 16px;
  --btn-font-weight: 600;
  --btn-text-transform: none;
  --btn-letter-spacing: 0.01em;
  --btn-padding: 10px 28px;
  --btn-color: #f0f1e7;
  --btn-hover-color: #f0f1e7;
  --btn-hover-bg: #104c5c;

  --subtitle-font: "Maysaroh", cursive;
  --subtitle-font-size: 22px;
  --subtitle-font-weight: 400;
  --subtitle-text-transform: none;
  --subtitle-color: #c98f8a;
  --subtitle-color-dark: #c98f8a;
  --subtitle-letter-spacing: 0.01em;

  --logo-width: 180px;
  --logo-footer-width: 200px;

  --bg-default: #f0f1e7;
  --bg-light: #f0f1e7;
  --bg-dark-1: #104c5c;
  --bg-dark-2: #0d3f4c;
  --bg-dark-3: #163e4a;
  --bg-dark-1-rgb: 16, 76, 92;
  --bg-grey: #e4e6dc;
  --bg-color-even: #e8ebe0;
  --bg-color-odd: #f0f1e7;
  --border-color: #c5d0c8;
  --footer-background-color: #104c5c;
  --swiper-theme-color: #94b1a1;
}

html,
body {
  background: #f0f1e7 !important;
  color: rgba(16, 76, 92, 0.88);
  font-family: var(--body-font) !important;
  font-size: var(--body-font-size);
  line-height: var(--body-font-line-height);
  -webkit-font-smoothing: antialiased;
}

p,
li,
label,
input,
textarea,
select,
button,
.form-control,
#mainmenu,
.crumb,
.widget,
.de_count {
  font-family: var(--body-font) !important;
}

h1,
.h1 {
  font-family: var(--h1-font-family) !important;
  text-transform: none !important;
  color: var(--heading-font-color);
}

h2,
.h2,
h3,
.h3,
h4,
.h4 {
  font-family: "Rink", var(--font-inter), sans-serif !important;
  text-transform: none !important;
}

/* Specialty: subtitles / soft title accents only */
.subtitle,
.ac-specialty,
.hs-5.ac-specialty {
  font-family: "Maysaroh", cursive !important;
  color: #c98f8a;
  text-transform: none !important;
  font-weight: 400;
}

.text-light h1,
.text-light h2,
.text-light h3,
.section-dark h1,
.section-dark h2,
.section-dark h3 {
  color: #f0f1e7;
}

.section-dark,
footer.section-dark,
.bg-dark,
.bg-dark-1 {
  background-color: #104c5c !important;
}

.bg-color-op-1 {
  background-color: rgba(148, 177, 161, 0.18) !important;
}

/* Warm cinnamon accent — sparingly */
.ac-accent-cinnamon,
.id-color.ac-cinnamon {
  color: #c66b4a !important;
}

.btn-main {
  background: #104c5c !important;
  color: #f0f1e7 !important;
  border-color: #104c5c !important;
}

.btn-main:hover,
.btn-main:focus {
  background: #0d3f4c !important;
  color: #f0f1e7 !important;
}

/* Soft rosy taupe for “Concierge Services” style labels */
.ac-rosy {
  color: #c98f8a !important;
}

/* --- Logos --- */
#logo img.logo-main,
#logo img.logo-scroll,
#logo img.logo-mobile {
  height: auto;
  max-height: 56px;
  width: auto;
  max-width: var(--logo-width);
  /* Never tint header logos peach/cinnamon — always the white asset */
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
}

/* Keep header chrome dark teal so the white logo stays readable */
header,
header.transparent,
header.smaller,
header.header-light,
header.scroll-light,
header.smaller.scroll-light {
  background: #104c5c !important;
}

header.transparent {
  background: transparent !important;
}

header.smaller,
header.smaller.scroll-light,
header:not(.transparent) {
  background: #104c5c !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

header #mainmenu > li > a,
header.smaller #mainmenu > li > a,
header.header-light #mainmenu > li > a,
header.scroll-light #mainmenu > li > a,
header:not(.transparent) #mainmenu > li > a {
  color: #f0f1e7 !important;
}

header #mainmenu > li.has-child:after,
header.smaller #mainmenu > li.has-child:after {
  color: rgba(240, 241, 231, 0.7) !important;
}

.ac-footer-logo {
  display: inline-block;
  max-width: var(--logo-footer-width);
  height: auto;
}

.ac-footer-logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Calm brand preloader (no brown, no flashy gold) --- */
#de-loader,
.de-preloader {
  background: #f0f1e7 !important;
}

#de-loader .ac-loader,
.de-preloader .ac-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

#de-loader .ac-loader-ring,
.ac-loader-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid #94b1a1;
  border-top-color: #104c5c;
  animation: ac-spin 1.1s linear infinite;
}

#de-loader .ac-loader-mark,
.ac-loader-mark {
  width: 120px;
  height: auto;
  opacity: 0.95;
}

.dot-loader-dot {
  background-color: #104c5c !important;
}

.line-preloader .p-line:nth-child(1),
.line-preloader .p-line:nth-child(2),
.line-preloader .p-line:nth-child(3) {
  border-right-color: #104c5c !important;
  border-bottom-color: #94b1a1 !important;
  border-left-color: #94b1a1 !important;
  border-top-color: #104c5c !important;
}

@keyframes ac-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Prefer reduced motion: still ring, no spin */
@media (prefers-reduced-motion: reduce) {
  #de-loader .ac-loader-ring,
  .ac-loader-ring {
    animation: none;
    border-color: #94b1a1;
    border-top-color: #104c5c;
  }
}

/* Header nav stays light on dark teal (see logo/header rules above) */

/* Slightly larger tap targets for older audience */
#mainmenu > li > a {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.form-control {
  font-size: 17px !important;
  line-height: 1.5 !important;
  min-height: 48px;
  background: #fff;
  border-color: #c5d0c8;
  color: #104c5c;
}

textarea.form-control {
  min-height: 140px;
}

/* Wider service dropdown for longer labels */
#mainmenu li ul {
  width: 240px;
}