/* ==========================================================================
   Tind-All — GLOBAL POLISH (automatic, no classes needed)
   Safe to remove: delete assets/css/global.css and its entry in inc/enqueue.php.
   No fonts, sizes or brand colours are changed.
   ========================================================================== */

:root {
  /* Approved brand palette (mirrors Divi --gcid-* globals) */
  --tm-teal:        var(--gcid-primary-color, #064f56);
  --tm-teal-deep:   var(--gcid-eqqroitnra, #143f43);
  --tm-teal-accent: #69c9c1;                         /* hero highlight text */
  --tm-plum:        var(--gcid-secondary-color, #a33c73);
  --tm-cream:       var(--gcid-9azvugp92v, #e7e4b5);
  --tm-ink:         var(--gcid-heading-color, #263437);
  --tm-body:        var(--gcid-body-color, #181818);
  --tm-link:        var(--gcid-link-color, #2e86ab);
  --tm-mist:        var(--gcid-m6tu6d6rnx, #f4f7f6);

  /* Motion system */
  --tm-ease:        cubic-bezier(.22, .61, .36, 1);
  --tm-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --tm-fast:  .2s;
  --tm-med:   .45s;
  --tm-slow:  .8s;

  /* Depth system (teal-tinted shadows read warmer than grey) */
  --tm-shadow-sm: 0 2px 6px rgba(6, 79, 86, .06), 0 1px 2px rgba(6, 79, 86, .08);
  --tm-shadow-md: 0 10px 24px -6px rgba(6, 79, 86, .14), 0 4px 8px -4px rgba(6, 79, 86, .10);
  --tm-shadow-lg: 0 24px 48px -12px rgba(6, 79, 86, .22);
  --tm-radius:    14px;
}

/* --------------------------------------------------------------------------
   1. GLOBAL POLISH (automatic — no classes needed)
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
::selection { background: var(--tm-cream); color: var(--tm-teal-deep); }

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Keyboard focus ring in brand colours (site currently has none) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--tm-plum);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Buttons: left exactly as designed in Divi — no hover overrides. */

/* Text links with arrows (“Build a Better Website ↗”, “View Articles ↗”) */
.et_pb_text a, .et_pb_blurb a, .tm-link {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--tm-med) var(--tm-ease), color var(--tm-fast);
}
.et_pb_text a:hover, .et_pb_blurb a:hover, .tm-link:hover { background-size: 100% 1px; }

/* Header: left exactly as designed in Divi (sticky transparent pill) — no overrides. */

/* Main menu: animated underline + clear active state */
.et-menu > li > a { position: relative; transition: color var(--tm-fast); }
.et-menu > li > a::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 22px; height: 2px; /* menu links fill the pill height (31px bottom padding) */
  background: var(--tm-plum); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--tm-med) var(--tm-ease);
}
.et-menu > li > a:hover { color: var(--tm-teal) !important; opacity: 1 !important; }
.et-menu > li > a:hover::before,
.et-menu > li.current-menu-item > a::before,
.et-menu > li.current-menu-ancestor > a::before { transform: scaleX(1); }

/* Dropdown: fade + slide instead of a hard pop */
.et-menu li ul.sub-menu {
  border-radius: var(--tm-radius) !important;
  box-shadow: var(--tm-shadow-lg) !important;
  border-top: 3px solid var(--tm-cream) !important;
}
.et-menu li:hover > ul.sub-menu { animation: tm-drop var(--tm-med) var(--tm-ease) both; }
@keyframes tm-drop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Accordions / FAQ: smoother open, rotating icon, hover tint */
.et_pb_toggle { transition: background-color var(--tm-med) var(--tm-ease), box-shadow var(--tm-med); }
.et_pb_toggle:hover { background-color: rgba(231, 228, 181, .18); }
.et_pb_toggle_open { box-shadow: inset 3px 0 0 var(--tm-plum); }
.et_pb_toggle_title::before { transition: transform var(--tm-med) var(--tm-ease-spring), color var(--tm-fast) !important; }
.et_pb_toggle_open .et_pb_toggle_title::before { transform: rotate(45deg); color: var(--tm-plum) !important; }
.et_pb_toggle_content { animation: tm-fade-up var(--tm-med) var(--tm-ease) both; }

/* Forms: readable labels on teal + cream focus ring */
.et_pb_contact_form label,
.et_pb_contact_form .et_pb_contact_form_label {
  font-weight: 500;
  letter-spacing: .02em;
}
/* Every contact form on the site sits on teal, and its labels inherit #181818 (unreadable).
   Labels are made light automatically. Opt out on a form placed on a LIGHT background
   by adding .tm-form-light to that Contact Form module. */
.et_pb_contact_form:not(.tm-form-light) .et_pb_contact_form_label,
.et_pb_contact_form:not(.tm-form-light) label,
.tm-form-dark label,
.tm-form-dark .et_pb_contact_form_label { color: rgba(255,255,255,.88) !important; }
.tm-form-dark input:not([type=checkbox]):not([type=radio]),
.tm-form-dark textarea { background: rgba(255,255,255,.96) !important; }
.et_pb_contact_form input:not([type=checkbox]):not([type=radio]),
.et_pb_contact_form textarea,
.et_pb_contact_form select {
  /* corner radius is left to the Divi form setting (approved design) */
  transition: border-color var(--tm-fast), box-shadow var(--tm-fast), transform var(--tm-fast) !important;
}
.et_pb_contact_form input:focus,
.et_pb_contact_form textarea:focus,
.et_pb_contact_form select:focus {
  border-color: var(--tm-cream) !important;
  box-shadow: 0 0 0 4px rgba(231, 228, 181, .45) !important;
  outline: none;
}

/* Images: soften corners. Lazy-loaded images are never hidden with opacity, so they stay visible even before the browser has loaded them. */
.et_pb_image img, .et_pb_blurb_image img { border-radius: inherit; }

/* Footer: social icons + links come alive */
.et-l--footer .et_pb_social_media_follow li a { transition: transform var(--tm-fast) var(--tm-ease-spring); }
.et-l--footer .et_pb_social_media_follow li a:hover { transform: translateY(-3px) scale(1.08); }
.et-l--footer a { transition: color var(--tm-fast), padding-left var(--tm-fast) var(--tm-ease); }
.et-l--footer .et_pb_text li a:hover,
.et-l--footer ul a:hover { color: var(--tm-cream) !important; }

/* Scroll-progress bar (added by JS). The gradient always spans the full width;
   scrolling reveals more of it with clip-path, so the colours never stretch. */
.tm-progress {
  position: fixed; left: 0; top: 0; height: 6px; width: 100%;
  background: linear-gradient(90deg, var(--tm-plum), var(--tm-cream));
  clip-path: inset(0 100% 0 0);
  z-index: 100000; pointer-events: none;
}
.admin-bar .tm-progress { top: 32px; }


/* Back-to-top button (Divi's built-in): round, brand teal, cream on hover */
body .et_pb_scroll_top.et-pb-icon {
  width: 48px; height: 48px; right: 24px; bottom: 24px;
  padding: 0; border-radius: 50%;
  background: var(--tm-teal); color: #fff;
  box-shadow: 0 4px 14px rgba(6, 79, 86, .25);
  display: flex; align-items: center; justify-content: center;
  transition: background-color var(--tm-fast), color var(--tm-fast), transform var(--tm-fast) var(--tm-ease);
}
body .et_pb_scroll_top.et-pb-icon::before { font-size: 22px; line-height: 1; color: inherit; }
body .et_pb_scroll_top.et-pb-icon:hover {
  background: var(--tm-cream); color: var(--tm-teal-deep); transform: translateY(-2px);
}
body .et_pb_scroll_top.et-pb-icon:focus-visible { outline: 3px solid var(--tm-cream); outline-offset: 2px; }
@media (max-width: 767px) {
  body .et_pb_scroll_top.et-pb-icon { width: 44px; height: 44px; right: 16px; bottom: 16px; }
}

@keyframes tm-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Respect "reduce motion" */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .et-menu > li > a::before, .et_pb_toggle,
  .et_pb_toggle_content, .tm-progress {
    animation: none !important; transition-duration: .001ms !important;
  }
}