/* =========================================================
   Dent Awesome — template.css
   No Bootstrap, no framework. Every value comes from the
   custom properties emitted by theme.php, so the template
   is reskinned from Template Options alone.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; }

body {
  margin: 0;
  overflow-x: clip;
  max-width: 100%;
  background: var(--da-ground);
  color: var(--da-ink);
  font-family: var(--da-body);
  font-size: var(--da-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }

/* Flex and grid children default to min-width:auto and refuse to shrink below
   their content, which is the most common cause of sideways scroll. */
.da-wrap > *, .da-grid > *, .da-main__inner > *, .da-header__bar > *,
.da-hero__inner > *, .da-topbar__inner > *, .da-footer__offices > * { min-width: 0; }

.da-wrap {
  width: 100%;
  max-width: var(--da-max);
  margin-inline: auto;
  padding-inline: var(--da-pad);
}

.da-skip { position: absolute; left: -9999px; background: var(--da-primary);
  color: var(--da-on-primary); padding: .7rem 1.2rem; z-index: 100; }
.da-skip:focus { left: .5rem; top: .5rem; }

/* ---------- type ---------- */
h1, h2, h3, h4 {
  font-family: var(--da-display);
  font-weight: var(--da-head-weight);
  letter-spacing: var(--da-head-track);
  line-height: 1.15;
  color: var(--da-primary-dark);
  margin: 0 0 .6em;
}
h1 { font-size: var(--da-h1); line-height: 1.08; }
h2 { font-size: var(--da-h2); margin-top: 2.2rem; }
h3 { font-size: var(--da-h3); margin-top: 1.7rem; }

p, li { max-width: var(--da-measure); }

a { color: var(--da-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover, a:focus { color: var(--da-primary-dark); }
strong { font-weight: 600; color: var(--da-primary-dark); }

a[href^="tel:"] { font-family: var(--da-mono); letter-spacing: -.02em; white-space: nowrap; }

/* ---------- top bar + office switcher ---------- */
.da-topbar {
  background: var(--da-primary-dark);
  color: rgba(255, 255, 255, .88);
  font-size: .82rem;
}
.da-topbar__inner {
  display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap;
  padding-block: .5rem;
}

.da-switch { display: inline-flex; align-items: center; gap: .3rem; }
.da-switch__label {
  font-family: var(--da-mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; opacity: .65; margin-right: .35rem;
}
.da-switch__btn {
  appearance: none; border: 1px solid transparent; background: transparent;
  color: rgba(255, 255, 255, .75); font: inherit; font-size: .8rem; font-weight: 600;
  padding: .3rem .85rem; border-radius: 999px; cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.da-switch__btn:hover { color: #fff; }
.da-switch__btn.is-active {
  background: var(--da-accent); color: var(--da-on-accent); border-color: var(--da-accent);
}

/* only the selected office's details are shown */
.da-office { display: none; align-items: center; gap: .5rem 1.25rem; flex-wrap: wrap; }
.da-office.is-active { display: flex; }
.da-office__hours { font-family: var(--da-mono); font-size: .74rem; letter-spacing: .02em; opacity: .8; }
.da-office__addr { color: rgba(255, 255, 255, .8); text-decoration: none; font-size: .8rem; }
.da-office__addr:hover { color: #fff; text-decoration: underline; }
.da-office__phone { color: #fff; font-weight: 600; text-decoration: none; }
.da-office__phone:hover { color: var(--da-accent); }
.da-topbar__extra { margin-inline-start: auto; }

@media (max-width: 767px) {
  .da-topbar__inner { justify-content: center; text-align: center; }
  .da-office__addr { display: none; }
}

/* ---------- header ---------- */
.da-header {
  background: var(--da-surface);
  border-bottom: 1px solid var(--da-line);
}
.da-header.is-sticky { position: sticky; top: 0; z-index: 40; }
.da-header__bar {
  display: flex; align-items: center; gap: 1.25rem;
  padding-block: var(--da-header-pad);
  min-height: 0;
}

.da-brand { display: inline-flex; text-decoration: none; line-height: 1; gap: .3rem; flex: 0 0 auto; }
.da-brand--tag-below { flex-direction: column; align-items: flex-start; }
.da-brand--tag-inline { flex-direction: row; align-items: center; gap: .85rem; flex-wrap: wrap; }

/* The global img{height:auto} would otherwise cancel the height attribute,
   so the logo is sized from the parameter instead. */
.da-brand__logo,
.da-brand img,
.da-header__bar > img,
.da-header__bar .mod-custom img,
.da-header__bar .custom img {
  height: var(--da-logo-h, 52px);
  width: auto;
  max-height: var(--da-logo-h, 52px);
  display: block;
}
.da-wordmark {
  font-family: var(--da-display); font-size: 1.55rem; font-weight: var(--da-head-weight);
  color: var(--da-primary-dark); letter-spacing: -.02em; line-height: 1; display: block;
}
.da-wordmark em { font-style: normal; color: var(--da-primary); }
.da-tagline {
  font-family: var(--da-mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: var(--da-tagline-case); color: var(--da-muted); line-height: 1.2;
}

.da-header__actions { display: flex; align-items: center; gap: .6rem; margin-inline-start: auto; flex: 0 0 auto; }

/* ---------- nav ----------
   The nav has to take the free space between the logo and the actions,
   otherwise it sits at its own content width right beside the logo and the
   alignment setting has nothing to act on. */
.da-header--inline .da-nav { flex: 1 1 auto; min-width: 0; }

.da-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: .1rem; margin: 0; padding: 0; }
.da-nav--start ul { justify-content: flex-start; }
.da-nav--center ul { justify-content: center; }
.da-nav--end ul { justify-content: flex-end; }

/* With the menu on its own row there is no logo beside it, so the row itself
   carries the alignment. */
.da-header--own-row .da-nav ul { width: 100%; }
.da-nav li { position: relative; max-width: none; }

/* Joomla renders a top-level item as <a>, <span> or <button> depending on
   its type. Match the first child of each top-level <li> whatever it is,
   rather than assuming one of the three. */
.da-nav a,
.da-nav ul > li > span,
.da-nav ul > li > button:not(.da-sub),
.da-nav ul > li > .mod-menu__toggle,
.da-nav ul > li > .mod-menu__toggle-sub {
  display: block; padding: .7rem .8rem; text-decoration: none; white-space: nowrap;
  font-size: .82rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--da-ink); border-bottom: 2px solid transparent; background: none; border-left: 0;
  border-right: 0; border-top: 0; font-family: inherit; cursor: pointer; text-align: left;
  transition: color .18s ease, border-color .18s ease;
}
.da-nav ul ul > li > span,
.da-nav ul ul > li > button { text-transform: none; letter-spacing: 0; font-size: .9rem; padding: .5rem 1rem; }
.da-nav a:hover, .da-nav li.active > a, .da-nav li.current > a {
  color: var(--da-primary); border-bottom-color: var(--da-accent);
}

/* Caret on parent items. An inline SVG injected by script, not a rotated
   border: the border trick collapses to a single vertical line whenever the
   pseudo-element's height is not honored, which is exactly what it did. */
.da-has-sub > a, .da-has-sub > span { display: inline-flex; align-items: center; gap: .3rem; }
/* Parents lay out as a flex row so the caret cannot sit on top of the text.
   The broad `display:block` rule above would otherwise win and leave the
   glyph butted against the last letter. */
/* `:not(.da-sub)` matters: .da-sub is the mobile accordion button, and a
   blanket `> button` rule with !important forced it visible on desktop. */
.da-has-sub > a,
.da-has-sub > span,
.da-has-sub > button:not(.da-sub),
.da-nav .mod-menu__toggle,
.da-nav .mod-menu__toggle-sub {
  display: inline-flex !important;
  align-items: center;
  gap: .4rem;
}

/* The accordion button is mobile-only, whatever else matches it. */
.da-nav .da-sub { display: none; }

svg.da-caret {
  width: 10px; height: 10px; flex: 0 0 auto; opacity: .55;
  margin-left: .1rem;
  transition: transform .18s ease, opacity .18s ease;
}

/* Whatever glyph Joomla supplies gets the same size and spacing, so a menu
   using the core caret looks identical to one using ours. */
.da-nav .mod-menu__toggle > svg:not(.da-caret),
.da-nav .mod-menu__toggle-sub > svg:not(.da-caret),
.da-nav .mod-menu__toggle [class*="icon-"],
.da-nav .mod-menu__toggle-sub [class*="icon-"] {
  width: 10px; height: 10px; flex: 0 0 auto; opacity: .55; margin-left: .1rem;
}
/* The caret now sits inside whatever element Joomla used for the label, so
   match it at any depth rather than assuming an <a>. */
.da-has-sub:hover svg.da-caret,
.da-has-sub:focus-within svg.da-caret { opacity: 1; transform: rotate(180deg); }
.da-has-sub.is-expanded svg.da-caret { transform: rotate(180deg); }

.da-nav li ul {
  display: none; position: absolute; left: 0; top: 100%; min-width: 16rem;
  background: var(--da-surface); border: 1px solid var(--da-line); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(12, 39, 35, .12); padding: .35rem 0; z-index: 50;
  flex-direction: column;
}
/* Hover dropdowns only on devices that actually hover. On a touchscreen a
   tap registers as hover, which fired the desktop dropdown on top of the
   mobile accordion — two menus at once. */
@media (hover: hover) and (pointer: fine) {
  .da-nav li:hover > ul, .da-nav li:focus-within > ul { display: flex; }
}
.da-nav li ul a { text-transform: none; letter-spacing: 0; font-size: .9rem; padding: .5rem 1rem; border-bottom: 0; white-space: normal; }
.da-nav li ul a:hover { background: var(--da-primary-soft); }

.da-menurow { background: var(--da-surface); border-top: 1px solid var(--da-line); }

/* submenu expand button (mobile) */
.da-sub {
  display: none; position: absolute; top: 0; right: 0; width: 48px; height: 48px;
  padding: 0; background: none; border: 0; border-left: 1px solid var(--da-line);
  color: inherit; cursor: pointer; z-index: 2;
}
svg.da-sub-icon { display: block; width: 22px; height: 22px; margin: 0 auto; opacity: .7;
  transition: transform .22s ease, opacity .22s ease; }
.da-sub:hover svg.da-sub-icon { opacity: 1; }
.da-has-sub.is-expanded > .da-sub--chevron svg.da-sub-icon { transform: rotate(180deg); }
.da-sub--plus svg.da-sub-icon path:first-child { transform-origin: 50% 50%; transition: transform .22s ease, opacity .22s ease; }
.da-has-sub.is-expanded > .da-sub--plus svg.da-sub-icon path:first-child { transform: rotate(90deg); opacity: 0; }

.da-burger {
  display: none; flex-direction: column; gap: 4px; justify-content: center;
  width: 44px; height: 40px; background: none; border: 1px solid var(--da-line);
  border-radius: 6px; cursor: pointer;
}
.da-burger span { display: block; height: 2px; width: 20px; margin-inline: auto; background: var(--da-primary); }

/* ---------------------------------------------------------------
   One toggle only.
   A nav module placed in the `menu` position may ship its own
   hamburger — mod_cleannav does, and so do several third-party
   menu modules. The template already supplies a toggle that opens
   the whole container, so any nested one is suppressed. Without
   this you get two hamburgers on mobile, the second unstyled.
   --------------------------------------------------------------- */
.da-nav .cn-toggle,
.da-nav .sc-nav__toggle,
.da-nav .navbar-toggler,
.da-nav .mod-menu__toggle,
.da-nav .menu-toggle,
.da-header .cn-toggle,
.da-header .navbar-toggler,
.da-menurow .cn-toggle { display: none !important; }

/* A nested nav module must not impose its own row layout either. */
.da-nav .cn { display: block; width: 100%; gap: 0; }
.da-nav .cn-nav { display: block !important; }
.da-nav .cn-actions { width: 100%; margin: .6rem 0 0; }

/* ---------- buttons ---------- */
.da-btn, .da-content .btn, .da-content .btn-primary, .readmore .btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--da-body); font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  text-decoration: none; line-height: 1; white-space: nowrap; cursor: pointer;
  padding: var(--da-cta-pad-y) var(--da-cta-pad-x);
  border-radius: var(--da-cta-radius);
  border: 2px solid var(--da-primary);
  background: var(--da-primary); color: var(--da-on-primary);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.da-btn:hover, .da-content .btn:hover, .da-content .btn-primary:hover {
  background: var(--da-primary-dark); border-color: var(--da-primary-dark); color: #fff;
}
.da-btn--outline { background: transparent; color: var(--da-primary); }
.da-btn--outline:hover { background: var(--da-primary); color: var(--da-on-primary); }
.da-btn--outline:focus-visible { background: var(--da-accent-soft); }

/* ---------- hero ---------- */
.da-hero { background: var(--da-primary-dark); color: #fff; }
.da-hero__inner { padding-block: clamp(2.5rem, 6vw, 5rem); display: grid; gap: 2rem; }
@media (min-width: 900px) { .da-hero--split .da-hero__inner { grid-template-columns: 1.15fr .85fr; align-items: center; } }
.da-hero h1, .da-hero h2, .da-hero h3 { color: #fff; }
.da-hero p { color: rgba(255, 255, 255, .92); font-size: 1.08rem; }

/* ---------- module rows ---------- */
.da-row { padding-block: clamp(2rem, 5vw, 3.5rem); }
.da-row:nth-of-type(even) { background: var(--da-primary-soft); }
.da-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .da-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .da-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .da-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) { .da-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.da-card {
  background: var(--da-surface); border: 1px solid var(--da-line);
  border-radius: var(--da-card-radius); padding: 1.5rem;
}
.da-card > :first-child { margin-top: 0; }
.da-card:hover { border-color: var(--da-accent); background: var(--da-accent-soft); }

/* ---------- main + article ---------- */
.da-main { padding-block: 2.5rem; }
.da-main__inner { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 950px) {
  body.has-sidebar .da-main__inner { grid-template-columns: minmax(0, 1fr) 20rem; }
  body.has-sidebar .da-side--left { grid-row: 1; grid-column: 1; }
}

.da-content { width: 100%; max-width: var(--da-content-max); margin-inline: auto; min-width: 0; }

.da-content .item-page,
.da-content .com-content-article,
.da-content .blog-item { margin-bottom: 2rem; }

.art-boxed .da-content .item-page,
.art-boxed .da-content .com-content-article {
  background: var(--da-surface); border: 1px solid var(--da-line);
  border-radius: var(--da-card-radius); padding: clamp(1.2rem, 4vw, 2.75rem);
}
.art-shadow .da-content .item-page,
.art-shadow .da-content .com-content-article {
  background: var(--da-surface); border: 0; border-radius: var(--da-card-radius);
  padding: clamp(1.2rem, 4vw, 2.75rem);
  box-shadow: 0 2px 4px rgba(12, 39, 35, .05), 0 20px 44px -20px rgba(12, 39, 35, .22);
}

.da-content ul { list-style: none; padding-left: 1.4rem; }
.da-content ul li::before {
  content: ''; display: inline-block; width: 7px; height: 1px; background: var(--da-accent);
  vertical-align: middle; margin-left: -1.4rem; margin-right: .75rem;
}
.da-content ol li::marker { font-family: var(--da-mono); color: var(--da-primary); font-size: .85em; }
.da-content p, .da-content li, .da-content h1, .da-content h2, .da-content h3 { overflow-wrap: break-word; }

blockquote {
  margin: 2rem 0; padding: .25rem 0 .25rem 1.5rem;
  border-inline-start: 3px solid var(--da-accent);
  font-size: 1.15rem; line-height: 1.5; color: var(--da-primary-dark);
}

/* ---------- tables ---------- */
table { width: 100%; max-width: 100%; border-collapse: collapse; font-size: .94rem; margin-block: 1.5rem; }
th {
  font-family: var(--da-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  text-align: left; color: var(--da-primary); border-bottom: 2px solid var(--da-primary); padding: .6rem .8rem;
}
td { border-bottom: 1px solid var(--da-line); padding: .7rem .8rem; vertical-align: top; }
tr:hover td { background: var(--da-primary-soft); }

/* ---------- breadcrumbs ---------- */
.da-crumbs { padding-top: 1.25rem; font-family: var(--da-mono); font-size: .7rem;
  letter-spacing: .08em; text-transform: uppercase; }
.da-crumbs ol, .da-crumbs ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; }
.da-crumbs a { text-decoration: none; }

/* ---------- footer ---------- */
.da-footer { background: var(--da-primary-dark); color: rgba(255, 255, 255, .82); margin-top: 3rem; }
.da-footer a { color: #fff; }
.da-footer a:hover { color: var(--da-accent); }
.da-footer h3 { color: #fff; font-size: 1.05rem; margin-bottom: .5rem; }
.da-footer p { margin: .2rem 0; font-size: .9rem; max-width: none; }
.da-footer__hours { font-family: var(--da-mono); font-size: .78rem; opacity: .78; }
.da-footer__offices { display: grid; gap: 2rem; padding-block: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.da-footer__cols { display: grid; gap: 2rem; padding-block: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-top: 1px solid rgba(255, 255, 255, .12); }
.da-footer ul { list-style: none; padding: 0; }
.da-footer__bottom { padding-block: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .85rem; }
.da-copy { margin: 0; opacity: .7; }

/* ---------- sticky call bar ---------- */
.da-callbar { display: none; }

@media (max-width: 767px) {
  body.has-sticky-call .da-callbar {
    display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
    background: var(--da-primary-dark); box-shadow: 0 -2px 14px rgba(12, 39, 35, .3);
  }
  body.has-sticky-call { padding-bottom: 3.4rem; }
  .da-callbar__link { display: none; }
  .da-callbar__link.is-active { display: flex; }
  .da-callbar__link, .da-callbar__cta {
    flex: 1 1 0; align-items: center; justify-content: center; text-align: center;
    padding: .85rem .6rem; text-decoration: none; font-size: .8rem; font-weight: 600;
    color: #fff; white-space: nowrap;
  }
  .da-callbar__cta { background: var(--da-accent); color: var(--da-on-accent); display: flex; }
}

/* ---------- mobile ---------- */
@media (max-width: 1080px) {
  .da-nav { width: 100%; order: 3; flex: 1 1 100%; }
  .da-nav--center ul, .da-nav--end ul { justify-content: flex-start; }
  .da-nav ul { flex-direction: column; align-items: stretch; }
  .da-nav li { border-bottom: 1px solid var(--da-line); }
  .da-nav li > a, .da-nav li > span:not(.da-sub-icon) { display: block; width: 100%; }
  .da-has-sub > a, .da-has-sub > span { padding-right: 58px; }
  svg.da-caret { display: none; }
  .da-nav .da-sub, .da-sub { display: block; }
  /* Below the breakpoint the accordion is the only mechanism. These beat the
     hover rule on specificity as well as being later in the file. */
  .da-nav li ul,
  .da-nav li .mod-menu__sub,
  .da-nav li:hover > ul,
  .da-nav li:hover > .mod-menu__sub,
  .da-nav li:focus-within > ul {
    display: none; position: static; box-shadow: none; border: 0;
    padding-left: 1rem; width: 100%; min-width: 0; border-radius: 0;
  }
  .da-nav li.is-expanded > ul,
  .da-nav li.is-expanded > .mod-menu__sub,
  .da-nav li.is-expanded:hover > ul,
  .da-nav li.is-expanded:hover > .mod-menu__sub { display: block; }

  /* Third-level items indent rather than fly out sideways. */
  .da-nav li ul ul { padding-left: .9rem; }
  .da-header__bar { flex-wrap: wrap; }
}

@media (max-width: 700px) {
  .da-wrap { padding-inline: var(--da-pad-mobile); }
  h1 { font-size: calc(var(--da-h1) * var(--da-mobile-scale)); }
  h2 { font-size: calc(var(--da-h2) * var(--da-mobile-scale)); }
  h3 { font-size: calc(var(--da-h3) * var(--da-mobile-scale)); }
  .da-brand__logo { height: var(--da-logo-h-mobile); max-height: var(--da-logo-h-mobile); }
}

/* ---------- Bootstrap utility shim ----------
   This template ships no Bootstrap, but Joomla core output and existing
   content packs use a handful of its utility classes. Without these, a
   `row-cols-md-4` grid silently collapses into one column. */
.row { display: flex; flex-wrap: wrap; margin-inline: -.75rem; }
.row > * { padding-inline: .75rem; }
.row-cols-2 > * { flex: 0 0 50%; max-width: 50%; }
.row-cols-3 > * { flex: 0 0 33.3333%; max-width: 33.3333%; }
@media (min-width: 768px) {
  .row-cols-md-2 > * { flex: 0 0 50%; max-width: 50%; }
  .row-cols-md-3 > * { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .row-cols-md-4 > * { flex: 0 0 25%; max-width: 25%; }
}
.g-3 > *, .g-4 > * { padding-block: 1rem; }
/* Joomla's menu module prints screen-reader text such as "More about: X"
   for a parent item that is also a link, and relies on this class to hide
   it. Without the rule it renders as visible text in the nav. */
.visually-hidden, .sr-only, .element-invisible {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.text-center { text-align: center; }
.float-end { float: right; }
.mt-2 { margin-top: .5rem; } .mb-0 { margin-bottom: 0; } .ms-3 { margin-left: 1rem; }
.my-4 { margin-block: 1.5rem; }
.alert { border: 1px solid var(--da-line); border-left-width: 3px; padding: 1rem 1.2rem;
  margin-block: 1rem; background: var(--da-surface); border-radius: var(--da-card-radius); }
.alert-success { border-left-color: #2F7D32; }
.alert-danger, .alert-error { border-left-color: #B3261E; }
.alert-warning { border-left-color: var(--da-accent); }
.pagination { display: flex; gap: .3rem; list-style: none; padding: 0; }
.pagination a, .pagination span { display: block; padding: .45rem .8rem;
  border: 1px solid var(--da-line); text-decoration: none; border-radius: 6px; }
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="password"], select, textarea, .form-control, .inputbox {
  font: inherit; padding: .6rem .7rem; border: 1px solid var(--da-line);
  border-radius: 8px; background: #fff; color: var(--da-ink); max-width: 100%;
}

/* ---------- quality floor ---------- */
:focus-visible { outline: 3px solid var(--da-accent); outline-offset: 2px; }
::selection { background: var(--da-accent); color: var(--da-on-accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .da-topbar, .da-header, .da-footer, .da-callbar, .da-crumbs { display: none !important; }
  body { padding-bottom: 0; }
  a[href^="tel:"]::after { content: ' (' attr(href) ')'; font-size: .8em; }
}


/* =========================================================
   JOOMLA MENU MODULE ARTIFACTS
   Core mod_menu renders its own submenu toggle containing
   screen-reader text ("More about: Patients"). We supply a
   caret and an accordion button, so the core control is
   redundant — and if its text is not hidden it renders in
   the middle of the navigation.
   ========================================================= */
/* CORRECTION: `mod-menu__toggle` is how Joomla renders a PARENT ITEM, and
   `mod-menu__sub` is the submenu <ul>. Hiding either removes real navigation.
   The button is styled to match a nav link instead; only the screen-reader
   text inside it is hidden. */
.da-nav .mod-menu__toggle,
.da-nav .mod-menu__toggle-sub,
.da-nav button.mod-menu__toggle,
.da-nav button.mod-menu__toggle-sub {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--da-ink);
  padding: .7rem .8rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color .18s ease, border-color .18s ease;
}
.da-nav .mod-menu__toggle:hover,
.da-nav .mod-menu__toggle-sub:hover { color: var(--da-primary); border-bottom-color: var(--da-accent); }

/* Joomla's own caret glyph inside that button duplicates ours. */
/* Core glyphs are kept and restyled above rather than hidden — hiding them
   left parents with no indicator when our caret was not injected. */

/* Belt and braces: any screen-reader span inside the nav stays hidden even
   if a utility class is missing or renamed upstream. */
.da-nav .visually-hidden,
.da-nav .sr-only,
.da-nav .element-invisible {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap; clip: rect(0 0 0 0); clip-path: inset(50%);
}


/* Any image in the header row is a logo, however it got there — brand block,
   custom module, or an override. Without this a module-rendered logo keeps
   its natural size and sets the header height. */
.da-header__bar img,
.da-header img {
  height: var(--da-logo-h, 52px);
  max-height: var(--da-logo-h, 52px);
  width: auto;
}


/* Joomla names the submenu list `mod-menu__sub`. Give it the same dropdown
   treatment as a plain nested <ul>. */
.da-nav .mod-menu__sub {
  display: none; position: absolute; left: 0; top: 100%; min-width: 16rem;
  background: var(--da-surface, #fff); border: 1px solid var(--da-line, #DDE3DC);
  border-radius: 8px; box-shadow: 0 10px 28px rgba(12, 39, 35, .12);
  padding: .35rem 0; z-index: 50; list-style: none; margin: 0;
}
@media (hover: hover) and (pointer: fine) {
  .da-nav li:hover > .mod-menu__sub,
  .da-nav li:focus-within > .mod-menu__sub { display: block; }
}
.da-nav .mod-menu__sub a { text-transform: none; letter-spacing: 0; font-size: .9rem;
  padding: .5rem 1rem; border-bottom: 0; white-space: normal; }
.da-nav .mod-menu__sub a:hover { background: var(--da-primary-soft, #E9EFEB); }


/* Joomla's own caret inside a parent button is hidden so it does not double
   up with ours. Scoped to svg and icon-classed elements only — the label
   text lives in this button too, and hiding a bare <span> would erase it. */
.da-nav .mod-menu__toggle-sub > svg:not(.da-caret),
.da-nav .mod-menu__toggle > svg:not(.da-caret),
.da-nav .mod-menu__toggle-sub > span[class*="icon"],
.da-nav .mod-menu__toggle > span[class*="icon"],
.da-nav .mod-menu__toggle-sub > i,
.da-nav .mod-menu__toggle > i { display: none !important; }

/* =========================================================
   FEATURE TILES
   Styled here rather than inline, because inline styles
   cannot express :hover. The content pack ships base inline
   styles as a fallback, so the tiles still look correct on
   any template — these rules add the interaction on top.
   ========================================================= */

.bd-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .9rem;
  max-width: 760px;
  margin: 1.6rem auto 2rem;
}

.bd-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  text-align: center;
  text-decoration: none;
  color: var(--da-ink, #1C2321);
  padding: 1.25rem .7rem;
  min-height: 118px;
  background: var(--da-surface, #fff);
  border: 1px solid var(--da-line, #DDE3DC);
  border-radius: var(--da-card-radius, 14px);
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease,
              box-shadow .2s ease, background .2s ease;
}

/* A wash of the accent sweeps up from the bottom on hover. Kept subtle:
   this is a directory of services, not a set of buttons competing for a
   click, and eight tiles all shouting at once reads as noise. */
.bd-tile::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 0;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--da-accent, #79D6BC) 26%, transparent), transparent);
  transition: height .25s ease;
  pointer-events: none;
}

.bd-tile:hover,
.bd-tile:focus-visible {
  transform: translateY(-4px);
  border-color: var(--da-accent, #79D6BC);
  box-shadow:
    0 0 0 1px var(--da-accent, #79D6BC),
    0 10px 26px -8px color-mix(in srgb, var(--da-primary, #1F6B5C) 40%, transparent),
    0 0 22px -6px color-mix(in srgb, var(--da-accent, #79D6BC) 65%, transparent);
  color: var(--da-primary-dark, #10312C);
}

.bd-tile:hover::before,
.bd-tile:focus-visible::before { height: 100%; }

.bd-tile img,
.bd-tile svg {
  position: relative;
  z-index: 1;
  transition: transform .25s ease;
}
.bd-tile:hover img,
.bd-tile:hover svg { transform: scale(1.12) rotate(-3deg); }

.bd-tile span {
  position: relative;
  z-index: 1;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .01em;
}

/* A tile is a link, so it needs a visible keyboard focus ring of its own. */
.bd-tile:focus-visible { outline: 3px solid var(--da-primary, #1F6B5C); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .bd-tile, .bd-tile::before, .bd-tile img, .bd-tile svg { transition: none; }
  .bd-tile:hover { transform: none; }
  .bd-tile:hover img, .bd-tile:hover svg { transform: none; }
}