/* =====================================================================
   Oneweb "Modern" skin (v3.1.0)
   Loaded after template.css and scoped to body.modern, so switching the
   option off restores the original look exactly. Pure CSS, no external
   fonts or scripts.
   ===================================================================== */

body.modern {
  --brand: #00778a;        /* teal, 5.2:1 on white (AA) */
  --brand-dark: #005565;
  --brand-tint: #e6f4f7;
  --accent: #f5a623;       /* orange from the banner artwork */
  --ink: #17303a;
  --muted: #55707a;
  --line: #d9e6ea;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(8, 50, 62, .10), 0 2px 6px rgba(8, 50, 62, .06);
}

/* ---------- base ---------- */
html:has(body.modern) { background: #edf5f7; }
body.modern {
  max-width: 1120px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.7;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
body.modern h1, body.modern h2, body.modern h3, body.modern h4,
body.modern h5, body.modern h6,
body.modern label, body.modern #phoneRow, body.modern .btn, body.modern button {
  font-family: inherit;
}
body.modern h1, body.modern h2, body.modern h3, body.modern h4 {
  color: #0d2a33;
  font-weight: 650;
  letter-spacing: -.01em;
  text-wrap: balance;
}
body.modern h1 { font-size: clamp(2.6rem, 2.2rem + 1.6vw, 3.8rem); line-height: 1.15; }
body.modern h2 { font-size: clamp(2.2rem, 2rem + .8vw, 2.8rem); }
body.modern h3 { font-size: 2rem; }
body.modern p, body.modern li { text-wrap: pretty; }
body.modern li ul, body.modern li ol { font-size: inherit; }
body.modern ul, body.modern ol { padding-left: 1.4em; }
body.modern li { margin-bottom: .25em; }

/* ---------- links ---------- */
body.modern a, body.modern a:visited { color: var(--brand); text-underline-offset: .2em; }
body.modern a:hover { color: var(--brand-dark); text-decoration: underline; }
body.modern a:focus-visible,
body.modern button:focus-visible,
body.modern input:focus-visible,
body.modern textarea:focus-visible,
body.modern select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- header ---------- */
body.modern #logoRow.row { padding: 2.8rem 0 2.8rem; min-height: 11rem; }
body.modern #logo img { height: auto; max-width: min(100%, 320px); transition: transform .25s ease; }
body.modern #logoRow a:hover #logo img { transform: translateY(-1px); }

/* ---------- main card ---------- */
body.modern #container {
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
}
body.modern #container .row { padding: 3.2rem 3.6rem 0; }
body.modern #mainRow { border-top: 0; padding-bottom: 3rem; }
body.modern #bannerRow.row { padding: 0; }
body.modern #bannerRow img { display: block; width: 100%; height: auto; }
body.modern #main { border-bottom: 0; }

/* ---------- navigation ---------- */
body.modern nav li a {
  color: var(--ink);
  font-weight: 550;
  font-size: 1.5rem;
  border-radius: 999px;
  transition: background-color .2s ease, color .2s ease;
}
body.modern nav li a:hover { background: var(--brand-tint); color: var(--brand-dark); text-decoration: none; }
body.modern nav li.current > a,
body.modern nav li.active > a { background: var(--brand); color: #fff; }

@media only screen and (min-width: 48em) {
  body.modern #menu { top: 2.8rem; width: calc(100% - 350px); left: auto; right: 0; }
  body.modern #menu ul.menu { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .2em .1em; float: none; }
  body.modern nav li { margin: 0; }
  body.modern nav li a { padding: .5em .7em; font-size: 1.4rem; white-space: nowrap; }
  /* "ONLINE PORTAL" becomes the call-to-action button */
  body.modern nav li.item-116 > a {
    background: var(--accent);
    color: #1c1500;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: 0 2px 8px rgba(245, 166, 35, .45);
  }
  body.modern nav li.item-116 > a:hover { background: #ffb938; color: #1c1500; transform: translateY(-1px); }
}

@media only screen and (min-width: 48em) and (max-width: 70em) {
  body.modern #logoRow.row { min-height: 14rem; }
}

/* ---------- mobile ---------- */
@media only screen and (max-width: 47.99em) {
  body.modern #mobileMenu, body.modern #mobileSearch {
    background: var(--brand); color: #fff; border: 0; border-radius: 999px;
    padding: .55em 1.2em; font-weight: 600; box-shadow: var(--shadow);
  }
  body.modern #phoneRow { display: block; margin-top: 1.2rem; }
  body.modern #phoneRow article { margin-bottom: 0; }
  body.modern #phoneRow a {
    display: inline-block; background: var(--brand); color: #fff; font-weight: 700;
    font-size: 1.9rem; padding: .5em 1.4em; border-radius: 999px; box-shadow: var(--shadow);
  }
  body.modern #phoneRow a:hover { background: var(--brand-dark); text-decoration: none; }
  body.modern #container .row { padding: 2.2rem 1.8rem 0; }
  body.modern #menu.row { background: #f4fafb; padding: 1rem; border-top: 1px solid var(--line); }
  body.modern nav li { width: 50%; padding: 4px; margin: 0; }
  body.modern nav li a {
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    padding: .9em .6em; text-align: center;
  }
  body.modern nav li.item-116 > a { background: var(--accent); border-color: var(--accent); color: #1c1500; font-weight: 700; }
  body.modern nav li.current > a, body.modern nav li.active > a { background: var(--brand); border-color: var(--brand); color: #fff; }
}

/* ---------- content ---------- */
body.modern #main img { border-radius: 12px; }
body.modern #main img.pull-right, body.modern #main img.pull-left { box-shadow: 0 6px 18px rgba(8, 50, 62, .15); }
body.modern #main a > img[alt="We don't declaw"] { box-shadow: none; border-radius: 0; }
body.modern #main img[src*="logo-cc"], body.modern #main img[src*="credit_card"] { box-shadow: none; border-radius: 6px; }

/* the notice boxes on the home page (they use inline black borders) */
body.modern .com-content-article__body div[style*="border:3px"],
body.modern .com-content-article__body p[style*="border:1px"] {
  border: 1px solid #bfe0e7 !important;
  border-left: 6px solid var(--brand) !important;
  background: var(--brand-tint);
  border-radius: var(--radius);
  padding: 1.4rem 1.8rem !important;
  margin-bottom: 1.8rem;
}
body.modern .com-content-article__body div[style*="border:3px"] p { margin-bottom: .4em; }
body.modern .com-content-article__body div[style*="border:3px"] p:first-child { font-size: 1.8rem; }

/* tables: opening hours, team menu, etc. */
body.modern table { border-collapse: collapse; width: auto; max-width: 100%; }
body.modern .hours {
  width: 100%; max-width: 520px; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; border-collapse: separate; border-spacing: 0;
}
body.modern .hours td, body.modern .hours th { padding: .7em 1em; border-bottom: 1px solid var(--line); }
body.modern .hours tr:last-child td { border-bottom: 0; }
body.modern .hours tr:nth-child(odd) td { background: #f7fbfc; }
body.modern .hours td:first-child { font-weight: 650; color: var(--brand-dark); }

/* generic bordered tables */
body.modern #main td, body.modern #main th { padding: .4em .8em; }

/* team page: the jump-link row */
body.modern #main table[style*="background"] { border-radius: 999px; overflow: hidden; }

/* embedded maps and videos */
body.modern #main iframe { max-width: 100%; border: 0; border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------- buttons ---------- */
body.modern button, body.modern .btn, body.modern .button, body.modern a.button,
body.modern input.button, body.modern input[type="button"], body.modern input[type="submit"],
body.modern ul.pagenav li a {
  background: var(--brand);
  background-image: none;
  color: #fff;
  text-shadow: none;
  border: 0;
  border-radius: 999px;
  padding: .75em 1.6em;
  font-weight: 650;
  font-size: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 119, 138, .35);
  transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
body.modern button:hover, body.modern .btn:hover, body.modern .button:hover, body.modern a.button:hover,
body.modern input.button:hover, body.modern input[type="button"]:hover, body.modern input[type="submit"]:hover,
body.modern ul.pagenav li a:hover {
  background: var(--brand-dark);
  background-image: none;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 119, 138, .35);
}
body.modern button:active, body.modern .btn:active, body.modern input[type="submit"]:active { transform: none; box-shadow: none; }

/* ---------- forms ---------- */
body.modern label { color: var(--muted); font-size: 1.4rem; font-style: normal; font-weight: 550; margin-bottom: .3em; }
body.modern input[type="text"], body.modern input[type="password"], body.modern input[type="email"],
body.modern input[type="tel"], body.modern textarea, body.modern select {
  border: 1px solid #c3d4d9;
  border-radius: 10px;
  padding: .6em .9em;
  font: inherit;
  color: var(--ink);
  background: #fff;
  max-width: 460px;
}
body.modern input[type="text"]:focus, body.modern input[type="password"]:focus,
body.modern input[type="email"]:focus, body.modern textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(0, 119, 138, .15);
}
body.modern .com-contact fieldset { margin-bottom: 1.6rem; }
body.modern .com-contact legend { color: var(--brand-dark); font-weight: 650; }

/* ---------- messages ---------- */
body.modern #system-message, body.modern .error {
  border-radius: var(--radius); border: 1px solid var(--line); background: #fff;
}

/* ---------- footer ---------- */
body.modern footer[role="contentinfo"] {
  background: #0d3a46;
  border-top: 0;
  color: #cfe6ec;
  padding-bottom: 2.4rem;
  margin-top: 3rem;
}
body.modern footer[role="contentinfo"].row { padding-top: 2.8rem; }
body.modern footer[role="contentinfo"] a, body.modern footer[role="contentinfo"] a:visited { color: #fff; }
body.modern footer[role="contentinfo"] a:hover { color: var(--accent); }
body.modern footer[role="contentinfo"] img { border-radius: 8px; vertical-align: middle; margin-left: .3em; transition: transform .2s ease; }
body.modern footer[role="contentinfo"] a:hover img { transform: translateY(-2px); }
body.modern #creditRow.row { border-top: 0; color: var(--muted); font-size: 1.3rem; }

/* ---------- motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
  body.modern *, body.modern *::before, body.modern *::after { transition: none !important; animation: none !important; transform: none !important; }
}
@media print {
  body.modern #container { box-shadow: none; border-radius: 0; }
  body.modern footer[role="contentinfo"] { background: none; color: #000; }
}