/*
Theme Name: Forest Hills Medical Clinic Child Theme
Theme URI: https://example.com/forest-hills-medical-clinic
Description: Accessible editorial Elementor child theme for Forest Hills Medical Clinic in Calgary, Alberta.
Author: Buildit
Template: hello-elementor
Version: 2.3.0
Requires at least: 6.8
Requires PHP: 7.4
Text Domain: forest-hills-medical
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

:root {
  --fh-primary: #087f78;
  --fh-secondary: #173f37;
  --fh-accent: #d9f86f;
  --fh-background: #f3f5ef;
  --fh-surface: #ffffff;
  --fh-text: #17231f;
  --fh-muted: #53635d;
  --fh-border: #cbd7d0;
  --fh-danger: #a52f38;
  --fh-heading-font: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --fh-body-font: "Segoe UI", Arial, sans-serif;
  --fh-radius: 8px;
  --fh-shadow: 0 22px 60px rgba(18, 54, 47, 0.13);
  --primary: var(--fh-primary);
  --deep: var(--fh-secondary);
  --accent: var(--fh-accent);
  --paper: var(--fh-background);
}

html { scroll-behavior: auto; }
body {
  background: var(--fh-background);
  color: var(--fh-text);
  font-family: var(--fh-body-font);
  font-size: 17px;
  line-height: 1.65;
  margin: 0;
}

body.elementor-page .site-main,
body.elementor-page #content { max-width: none; padding: 0; width: 100%; }

h1, h2, h3, h4, h5, h6 {
  color: var(--fh-secondary);
  font-family: var(--fh-heading-font);
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.04;
}

a { color: var(--fh-primary); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--fh-accent);
  outline-offset: 4px;
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px;
}

.fh-site-header {
  background: var(--fh-surface);
  border-bottom: 1px solid var(--fh-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.admin-bar .fh-site-header { top: 32px; }

.fh-utility {
  background: var(--fh-secondary);
  color: #fff;
  font-size: 14px;
}

.fh-utility-inner {
  align-items: center;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1380px;
  padding: 8px 28px;
}

.fh-utility a { color: #fff; font-weight: 700; text-decoration: none; }
.fh-header-inner, .fh-footer-inner {
  align-items: center;
  display: flex;
  gap: 30px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1380px;
  padding: 18px 28px;
}

.fh-brand {
  align-items: center;
  color: var(--fh-secondary);
  display: flex;
  flex: 0 1 320px;
  font-family: var(--fh-heading-font);
  font-size: 22px;
  font-weight: 750;
  gap: 12px;
}
.fh-brand a { color: var(--fh-secondary); text-decoration: none; }
.fh-brand img { height: auto; max-height: 58px; width: auto; }
.fh-menu { align-items: center; display: flex; flex-wrap: wrap; gap: 26px; list-style: none; margin: 0; padding: 0; }
.fh-menu a { color: var(--fh-text); font-size: 15px; font-weight: 650; text-decoration: none; }
.fh-menu a:hover { color: var(--fh-primary); }
.fh-header-call {
  background: var(--fh-accent);
  border: 1px solid var(--fh-accent);
  border-radius: 6px;
  color: var(--fh-secondary);
  font-weight: 750;
  padding: 12px 20px;
  text-decoration: none;
  white-space: nowrap;
}
.fh-header-call:hover { background: #c8eb56; color: var(--fh-secondary); }
.fh-menu-toggle { background: transparent; border: 1px solid var(--fh-border); border-radius: 6px; color: var(--fh-secondary); display: none; font: inherit; font-weight: 700; padding: 9px 15px; }

.fh-site-footer { background: #102f2a; color: #fff; }
.fh-site-footer a, .fh-site-footer h2 { color: #fff; }
.fh-site-footer .fh-footer-inner { align-items: flex-start; padding-bottom: 60px; padding-top: 60px; }
.fh-site-footer h2 { font-size: 30px; margin: 0 0 14px; }
.fh-footer-copy { border-top: 1px solid rgba(255,255,255,.18); font-size: 14px; margin: 0; padding: 20px 28px; text-align: center; }

@media (max-width: 980px) {
  .fh-menu-toggle { display: block; margin-left: auto; }
  .fh-header-inner { flex-wrap: wrap; gap: 14px; }
  .fh-header-inner nav { display: none; flex-basis: 100%; order: 4; }
  .fh-header-inner nav.is-open { display: block; }
  .fh-menu { align-items: flex-start; border-top: 1px solid var(--fh-border); flex-direction: column; gap: 0; padding-top: 10px; }
  .fh-menu li { border-bottom: 1px solid var(--fh-border); width: 100%; }
  .fh-menu a { display: block; padding: 13px 2px; }
  .fh-site-footer .fh-footer-inner { flex-direction: column; }
}

@media (max-width: 620px) {
  .fh-utility-inner { align-items: flex-start; flex-direction: column; gap: 2px; padding: 8px 18px; }
  .fh-header-inner { padding: 14px 18px; }
  .fh-brand { flex: 1 1 190px; font-size: 18px; }
  .fh-header-call { display: none; }
}

@media (max-width: 782px) {
  .admin-bar .fh-site-header { top: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}