/**
 * TEMPORARY brand preview — OmKneeHealth font and colour update, per the
 * "OmKneeHealth_Font_Colour_Handover_Newedge.pdf" handover (12 Oct 2026).
 * Supersedes the earlier Lovable-derived preview values (Inter, #003b49,
 * white text on gold, etc.).
 *
 * Loaded last (inc/lovable-preview.php, priority 40 — after main.css,
 * style.css, shop.css and the generated Theme Colours file), so :root
 * variables here win by source order. Almost every theme rule reads its
 * colours from these variables; the explicit rules further down use
 * !important only where something bypasses them (inline style attributes,
 * Bootstrap's !important utilities, hard-coded hex values, white card
 * backgrounds, or the Theme Colours file's own !important rules).
 *
 * Fonts (Cormorant SC, Newsreader, Rubik) are enqueued by
 * inc/lovable-preview.php. Delete this file and its loader to remove.
 */

/* ==========================================================================
   1. Palette and theme variables (PDF sections 2 and 6.1)
   ========================================================================== */

:root {
  /* Handover palette */
  --navy: #0C193E;
  --ribbon-color: #053A48;
  --teal: #035E58;
  --gold: #C9A45C;
  --gold-hover: #B8924A;
  --gold-deep: #9C7A3C;
  --ecru: #F4EFE4;
  --linen: #E9E2D0;
  --card: #FBF8F1;
  --line: #D6CDB8;
  --sand: #F7F4EE;
  --slate: #3D4650;
  --logo-fonts: "Cormorant SC", Georgia, serif;

  /* Theme variables (main.css :root / Theme Colours) */
  --primary-color: #035E58;
  --primary-rgb-05: rgba(3, 94, 88, 0.08);
  --white-color: #FFFFFF;
  --black-color: #0C193E;              /* theme "black" text + black hovers → navy */
  --title-color: #0C193E;
  --text-color: #3D4650;
  --body-color: #F4EFE4;
  --footer-color: #111821;
  --header-contact-text-color: #3D4650;
  --border-color-one: #D6CDB8;
  --border-color-two: #D6CDB8;
  --border-radius-one: 4px;
  --background-one: #E9E2D0;
  --background-two: #E9E2D0;
  --extra-color: #E9E2D0;
  --extra-color-one: #FBF8F1;
  --extra-color-two: #F4EFE4;
  --extra-color-three: #FBF8F1;
  --extra-color-four: #E9E2D0;
  --extra-color-five: #0C193E;
  --extra-color-six: #0e131a;

  /* Header (Theme Colours variables) */
  --header-background-color: #053A48;
  --header-navigation-text-color: #F7F4EE;
  --header-navigation-hover-color: #C9A45C;
  --header-button-background-color: transparent;
  --header-button-text-color: #F7F4EE;
  --header-button-hover-background-color: #F7F4EE;
  --header-button-hover-text-color: #053A48;

  /* Buttons (Theme Colours variables) — see section 5 for the full rules */
  --button-style-1-background-color: #C9A45C;
  --button-style-1-text-color: #0C193E;
  --button-style-1-hover-background-color: #B8924A;
  --button-style-1-hover-text-color: #0C193E;
  --button-style-2-background-color: transparent;
  --button-style-2-text-color: #0C193E;
  --button-style-2-hover-background-color: #0C193E;
  --button-style-2-hover-text-color: #FFFFFF;
  --button-style-3-background-color: #C9A45C;
  --button-style-3-text-color: #0C193E;
  --button-style-3-hover-background-color: #B8924A;
  --button-style-3-hover-text-color: #0C193E;
  --button-style-4-background-color: #FFFFFF;
  --button-style-4-text-color: #0C193E;
  --button-style-4-hover-background-color: #F7F4EE;
  --button-style-4-hover-text-color: #0C193E;
  --button-style-5-background-color: transparent;
  --button-style-5-text-color: #F7F4EE;
  --button-style-5-hover-background-color: #F7F4EE;
  --button-style-5-hover-text-color: #053A48;

  /* Typography */
  --title-fonts: "Newsreader", Georgia, serif;
  --body-fonts: "Rubik", sans-serif;
  --subtitle-fonts: "Rubik", sans-serif;   /* was Canela (trial licence) */
}

/* ==========================================================================
   2. Page width
   Header and page content share one 1600px container, centred above that
   and fluid below it, with the same side padding (--page-gutter) so the
   logo and the hero/section content line up at every width. Bootstrap's
   .container steps (540-1320px) are overridden here rather than editing
   the 90 shared templates that use it.
   ========================================================================== */

:root {
  --page-max: 1600px;
  --page-gutter: 40px;          /* handover header side padding */
}

@media (max-width: 1439px) {
  :root {
    --page-gutter: 24px;        /* keeps the header on one line down to 1200px */
  }
}

@media (max-width: 767px) {
  :root {
    --page-gutter: 20px;        /* handover page side margins on phones */
  }
}

/* Rows inside add a 12px gutter on each side that cancels out (negative
   row margin + column padding), so content starts at --page-gutter. */
.container,
.header .container,
.header .header-lower > .container-fluid {
  width: 100%;
  max-width: var(--page-max) !important;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important;
}

/* ==========================================================================
   3. Base text (PDF sections 3 and 6.2)
   ========================================================================== */

body {
  background-color: var(--ecru) !important;
  font-family: var(--body-fonts) !important;
  font-weight: 400;
  font-size: 18px !important;
  line-height: 1.65 !important;
  color: var(--slate);
}

p {
  font-size: 18px;
  line-height: 1.65;
  max-width: 62ch;
}

.text-center p,
p.text-center {
  margin-left: auto;
  margin-right: auto;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--title-fonts) !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

h1 {
  font-size: 64px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.01em !important;
}

h2,
.section-title h2 {
  font-size: 42px !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

h3 {
  font-size: 26px !important;
  line-height: 1.2 !important;
}

@media (max-width: 767px) {
  body,
  p {
    font-size: 17px !important;
  }

  h1 {
    font-size: 40px !important;
  }

  h2,
  .section-title h2 {
    font-size: 30px !important;
  }

  h3 {
    font-size: 22px !important;
  }
}

/* Small label above headings: 13px capitals, teal, no pill or icon */
.section-title .sub-title,
.hero-section-1 .section-title .sub-title {
  display: inline-block;
  font-family: var(--body-fonts) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--teal) !important;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.section-title .sub-title::before {
  display: none !important;
}

/* Theme rules that force Title Case on text the editor typed */
.breadcrumb-section .breadcrumb-content .breadcrumb-title h1,
.breadcrumb-section .breadcrumb-content nav .breadcrumb .breadcrumb-item a,
.read-more-btn,
.main-menu ul li a,
.main-menu ul li .submenu li a,
.mean-container .mean-nav > ul li a,
.product-section .product-grid-item-1 .product-grid-content h2,
.shop-product-single-section .shop-product-single-info h2,
.widget.widget-categories-list .widget-content .category-list li a {
  text-transform: none !important;
}

/* 14px minimum text size — main.css has a handful of 11-13px spots */
.knee-journey-section-1 .knee-journey-item-step,
.knee-journey-section-1 .knee-journey-eyebrow,
.newsletter-section-1 .newsletter-disclaimer,
.footer .footer-bottom .footer-widget-wrap .widget-link .link li a i,
.form-group .field-inner .error,
.main-menu ul li .submenu li a .menu-item-description,
.offcanvas .menu-outer .navbar-collapse ul.navigation > li ul.submenu li > a .menu-item-description,
.widget.widget-cart-total-summary .note span {
  font-size: 14px !important;
}

/* No weights below 400 — only 400/500 are loaded */
.fw_1, .fw_2, .fw_3 {
  font-weight: 400 !important;
}

/* ==========================================================================
   4. Links and keyboard focus (PDF section 5)
   ========================================================================== */

/* Text links inside copy: teal, 500, underlined; navy on hover */
p a:not(.theme-button),
li > a.text-link,
.service-entry-content a:not(.theme-button),
.blog-entry-content a:not(.theme-button),
.services-content a:not(.theme-button),
.newsletter-section-1 .newsletter-disclaimer a {
  color: var(--teal) !important;
  font-weight: 500;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

p a:not(.theme-button):hover,
.service-entry-content a:not(.theme-button):hover,
.blog-entry-content a:not(.theme-button):hover,
.services-content a:not(.theme-button):hover,
.newsletter-section-1 .newsletter-disclaimer a:hover {
  color: var(--navy) !important;
}

/* "More details" style links: plain underlined text link, no arrow badge */
.read-more-btn {
  color: var(--teal) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  padding-right: 0 !important;
}

.read-more-btn::before {
  display: none !important;
}

.read-more-btn:hover {
  color: var(--navy) !important;
}

/* Whole-card links inside page content are cards, not text links */
.service-entry-content a.shop-category-card,
.blog-entry-content a.shop-category-card,
.services-content a.shop-category-card,
a.shop-category-card {
  color: var(--navy) !important;
  text-decoration: none !important;
  font-weight: 400;
}

/* Links in copy on dark bands stay light */
.footer p a:not(.theme-button),
.knee-journey-section-1 p a:not(.theme-button),
.cta-section-3 .cta-wapper p a:not(.theme-button) {
  color: inherit !important;
}

/* Focus: 2px teal on light areas, gold on the dark ribbon/footer bands */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--teal) !important;
  outline-offset: 2px !important;
}

.header a:focus-visible,
.header button:focus-visible,
.header input:focus-visible,
.footer a:focus-visible,
.footer button:focus-visible,
.footer input:focus-visible,
.knee-journey-section-1 a:focus-visible {
  outline-color: var(--gold) !important;
}

/* ==========================================================================
   5. Buttons (PDF sections 5 and 6.3)
   Every style also sets the hover-slide overlay text (span::before) so the
   animated label never flashes the old colour.
   ========================================================================== */

.theme-button,
button.theme-button,
input[type="submit"].theme-button {
  height: auto !important;
  min-height: 0 !important;
  padding: 16px 28px !important;
  font-family: var(--body-fonts) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-transform: none !important;
  border-radius: 4px !important;
}

.theme-button i {
  color: inherit !important;
}

/* Main button: gold, navy text, no border */
.theme-button.style-1,
.theme-button.style-3 {
  background-color: var(--gold) !important;
  color: var(--navy) !important;
  border: 1.5px solid transparent !important;
}

.theme-button.style-1 span,
.theme-button.style-3 span,
.theme-button.style-1 span::before,
.theme-button.style-3 span::before {
  color: var(--navy) !important;
}

.theme-button.style-1:hover,
.theme-button.style-3:hover {
  background-color: var(--gold-hover) !important;
  color: var(--navy) !important;
  border-color: transparent !important;
}

/* Second button: no fill, 1.5px navy border; navy fill + white on hover */
.theme-button.style-2 {
  background-color: transparent !important;
  color: var(--navy) !important;
  border: 1.5px solid var(--navy) !important;
}

.theme-button.style-2 span {
  color: var(--navy) !important;
}

.theme-button.style-2 span::before {
  color: #FFFFFF !important;
}

.theme-button.style-2:hover {
  background-color: var(--navy) !important;
  border-color: var(--navy) !important;
  color: #FFFFFF !important;
}

.theme-button.style-2:hover span {
  color: #FFFFFF !important;
}

/* Style 4: white button (used on dark bands) */
.theme-button.style-4 {
  background-color: #FFFFFF !important;
  color: var(--navy) !important;
  border: 1.5px solid transparent !important;
}

.theme-button.style-4 span,
.theme-button.style-4 span::before {
  color: var(--navy) !important;
}

.theme-button.style-4:hover {
  background-color: var(--sand) !important;
  color: var(--navy) !important;
}

/* Style 5: sand outline on dark (same as the header "Take your knee score") */
.theme-button.style-5 {
  background-color: transparent !important;
  color: var(--sand) !important;
  border: 1.5px solid rgba(247, 244, 238, 0.75) !important;
}

.theme-button.style-5 span {
  color: var(--sand) !important;
}

.theme-button.style-5 span::before {
  color: var(--ribbon-color) !important;
}

.theme-button.style-5:hover {
  background-color: var(--sand) !important;
  border-color: var(--sand) !important;
  color: var(--ribbon-color) !important;
}

.theme-button.style-5:hover span {
  color: var(--ribbon-color) !important;
}

/* Native submit buttons styled like the main button (newsletter, CF7, Woo) */
.newsletter-section-1 .newsletter-form-row input[type="submit"],
.wpcf7 input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce ul.products li.product .button {
  background-color: var(--gold) !important;
  color: var(--navy) !important;
  border: 1.5px solid transparent !important;
  border-radius: 4px !important;
  font-family: var(--body-fonts) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

.newsletter-section-1 .newsletter-form-row input[type="submit"]:hover,
.wpcf7 input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce ul.products li.product .button:hover {
  background-color: var(--gold-hover) !important;
  border-color: transparent !important;
  color: var(--navy) !important;
}

/* Phones: content buttons go full width and stack */
@media (max-width: 767px) {
  .theme-button {
    width: 100%;
  }

  .hero-section-1 .hero-button-wappper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
}

/* ==========================================================================
   6. Header ribbon (PDF section 4)
   ========================================================================== */

.header .header-lower,
.header-1 .header-lower,
.header .header-lower.sticky,
.header-1 .header-lower.sticky {
  background-color: var(--ribbon-color) !important;
  min-height: 104px;
  display: flex;
  align-items: center;
  width: 100% !important;
  margin-left: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.header .header-lower .header-content .header-navigation {
  min-width: 0;
}

/* Logo: white monogram 52px tall, then the name typed in Cormorant SC
   (PDF section 3 "How to set the name" and section 4). The WP Additional
   CSS sizes .custom-logo at 175px wide; its white filter is kept. */
.header .header-lower .logo-box .logo a {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #FFFFFF;
  text-decoration: none;
}

.header .header-lower .logo-box .logo figure {
  margin: 0;
  flex-shrink: 0;
}

.header .header-lower .logo-box .logo img.custom-logo {
  display: block;
  height: 52px !important;
  width: auto !important;
  padding: 0 !important;
}

.omk-name {
  font-family: var(--logo-fonts);    /* "Cormorant SC", Georgia, serif */
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.06em;
  color: #FFFFFF;
  white-space: nowrap;
}

.omk-name small {
  font-size: 0.87em;
}

/* 1200-1439px: the monogram + name is wider than the old logo, so tighten
   it and the menu spacing to keep the ribbon on one row (it is tight at
   1200px — the handover's own fix is moving the links into the menu
   below 1440px) */
@media (min-width: 1200px) and (max-width: 1439px) {
  .header .header-lower .logo-box .logo a {
    gap: 12px;
  }

  .header .header-lower .logo-box .omk-name {
    font-size: 20px;
  }

  body .header .header-lower .header-content .header-navigation .main-menu nav > ul > li:not(:last-child) {
    margin-inline-end: 18px !important;  /* beats the 24px rule further down */
  }
}

/* Narrow phones (under 400px): smaller lockup so it clears Contact + menu */
@media (max-width: 399px) {
  .header .header-lower .logo-box .logo a {
    gap: 8px !important;
  }

  body .header .header-lower .logo-box .logo img.custom-logo {
    height: 32px !important;             /* beats the 36px phone rule further down */
  }

  .header .header-lower .logo-box .omk-name {
    font-size: 16px !important;
  }

  .header .header-lower .header-content .header-right {
    gap: 8px !important;
  }
}

@media (max-width: 374px) {
  .header .header-lower .logo-box .omk-name {
    font-size: 15px !important;
  }
}

/* Same monogram in the mobile menu panel (WP Additional CSS: 175px wide) */
.offcanvas .offcanvas-logo img.custom-logo {
  display: block;
  height: 36px !important;
  width: auto !important;
  padding: 0 !important;
}

/* Main menu links: Rubik 500 17px, sand, 24px apart, never wrap */
body .header .header-lower .header-content .header-navigation .main-menu nav > ul > li {
  margin-inline-end: 24px;
}

body .header .header-lower .header-content .header-navigation .main-menu nav > ul > li:last-child {
  margin-inline-end: 0;
}

body .header .header-lower .header-content .header-navigation .main-menu nav > ul > li > a {
  font-family: var(--body-fonts) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap;
  color: var(--sand) !important;
  padding: 43px 0;
  text-decoration: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

body .header .header-lower .header-content .header-navigation .main-menu nav > ul > li:hover > a,
body .header .header-lower .header-content .header-navigation .main-menu nav > ul > li > a:hover,
body .header .header-lower .header-content .header-navigation .main-menu nav > ul > li > a:focus-visible {
  color: var(--gold) !important;
  text-decoration: underline;
  text-decoration-color: var(--gold);
}

/* Dropdown / mega menu panel: light panel, navy links (the theme colours
   them with the header link colour, which is now sand) */
body .header .header-lower .header-content .header-navigation .main-menu ul li .submenu {
  background-color: var(--card) !important;
  border: 1px solid var(--line);
  border-radius: 6px;
}

body .header .header-lower .header-content .header-navigation .main-menu ul li .submenu li a {
  color: var(--navy) !important;
  font-family: var(--body-fonts) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

body .header .header-lower .header-content .header-navigation .main-menu ul li .submenu li a:hover,
body .header .header-lower .header-content .header-navigation .main-menu ul li .submenu li:hover > a {
  color: var(--teal) !important;
}

body .header .header-lower .header-content .header-navigation .main-menu ul li .submenu li a::before {
  background-color: var(--teal) !important;
}

body .header .header-lower .header-content .header-navigation .main-menu ul li .submenu li a .menu-item-description {
  color: var(--slate) !important;
  font-weight: 400 !important;
}

/* Search: white box 190 x 48 */
.header-lower .header-ribbon-search .header-search form {
  width: 190px;
  position: relative;
}

.header-lower .header-ribbon-search .header-search form .form-group input {
  background-color: #FFFFFF !important;
  min-height: 48px !important;
  height: 48px !important;
  border-color: transparent !important;
  color: var(--navy) !important;
}

/* Bootstrap floating labels (header + sidebar search) default to grey */
.form-floating > label {
  color: var(--slate) !important;
}

.header-lower .header-ribbon-search .header-search form .form-group label {
  padding: 0.6rem 0.75rem;
}

.header-lower .header-ribbon-search .header-search form .form-group button {
  width: 48px !important;
  color: var(--navy) !important;
}

/* Below 1600px the search box is replaced by a sand icon that opens the
   search modal (.header-search-toggle / #header-search-modal) */
.header-lower .header-ribbon-search .header-search-toggle {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sand);
  font-size: 20px;
  line-height: 1;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.2s ease;
}

.header-lower .header-ribbon-search .header-search-toggle:hover {
  color: var(--gold);
}

@media (max-width: 1599px) {
  .header-lower .header-ribbon-search .header-search {
    display: none !important;
  }

  .header-lower .header-ribbon-search .header-search-toggle {
    display: inline-flex !important;   /* overrides Bootstrap's .d-none */
  }
}

/* Search modal: pale ecru panel, navy title, gold Search button */
.header-search-modal .modal-dialog {
  max-width: 640px;
  padding: 0 var(--page-gutter);
}

.header-search-modal .modal-content {
  background-color: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 8px 16px;
}

.header-search-modal .modal-header {
  border-bottom: 0;
}

.header-search-modal .modal-title {
  font-size: 26px !important;
  color: var(--navy);
}

.header-search-modal .btn-close {
  width: 44px;
  height: 44px;
  padding: 0;
  opacity: 1;
  border-radius: 4px;
}

.header-search-modal .header-search-modal-field {
  display: flex;
  gap: 12px;
}

.header-search-modal .header-search-modal-field .form-control {
  min-height: 52px;
  font-size: 17px;
  background-color: #FFFFFF !important;
}

.header-search-modal .header-search-modal-field .theme-button {
  flex-shrink: 0;
}

.modal-backdrop.show {
  background-color: var(--navy);
  opacity: 0.6;
}

@media (max-width: 575px) {
  .header-search-modal .header-search-modal-field {
    flex-direction: column;
  }
}

/* "Contact": gold, navy text */
.header .header-lower .header-contact-cta .theme-button,
.header .header-lower .header-contact-cta .theme-button.style-2 {
  background-color: var(--gold) !important;
  border: 1.5px solid var(--gold) !important;
  color: var(--navy) !important;
  font-size: 16px !important;
  padding: 14px 24px !important;
  line-height: 17px !important;
  height: auto !important;
  white-space: nowrap;
}

.header .header-lower .header-contact-cta .theme-button span,
.header .header-lower .header-contact-cta .theme-button span::before {
  color: var(--navy) !important;
}

.header .header-lower .header-contact-cta .theme-button:hover {
  background-color: var(--gold-hover) !important;
  border-color: var(--gold-hover) !important;
}

/* "Take your knee score": 1.5px sand outline; sand fill + ribbon text on hover */
.header .header-lower .header-content .header-right .header-button .theme-button {
  background-color: transparent !important;
  border: 1.5px solid rgba(247, 244, 238, 0.75) !important;
  color: var(--sand) !important;
  font-size: 16px !important;
  padding: 14px 24px !important;
  line-height: 17px !important;
  height: auto !important;
  white-space: nowrap;
}

.header .header-lower .header-content .header-right .header-button .theme-button span {
  color: var(--sand) !important;
}

.header .header-lower .header-content .header-right .header-button .theme-button span::before {
  color: var(--ribbon-color) !important;
}

.header .header-lower .header-content .header-right .header-button .theme-button:hover {
  background-color: var(--sand) !important;
  border-color: var(--sand) !important;
  color: var(--ribbon-color) !important;
}

.header .header-lower .header-content .header-right .header-button .theme-button:hover span {
  color: var(--ribbon-color) !important;
}

/* Menu icon: sand bars, no box, 44px tap area */
.header .header-sidebar .sidebar-toggler {
  background-color: transparent !important;
  border: 0 !important;
  width: 44px;
  height: 44px;
}

.header .header-sidebar .sidebar-toggler::before {
  display: none;
}

.header .header-sidebar .sidebar-toggler span,
.header .header-sidebar .sidebar-toggler:hover span {
  background-color: var(--sand) !important;
  width: 22px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Tablet: tighten spacing so nothing wraps between 1200 and 1439px */
@media (max-width: 1439px) {
  .header .header-lower .header-content .header-right {
    gap: 16px !important;
  }
}

/* Phones: 80px ribbon, smaller Contact (side padding: --page-gutter) */
@media (max-width: 767px) {
  .header .header-lower,
  .header-1 .header-lower,
  .header .header-lower.sticky,
  .header-1 .header-lower.sticky {
    min-height: 80px;
  }

  /* Logo on phones: monogram 36px, name 19px */
  .header .header-lower .logo-box .logo a {
    gap: 10px;
  }

  .header .header-lower .logo-box .logo img.custom-logo {
    height: 36px !important;
  }

  .header .header-lower .logo-box .omk-name {
    font-size: 19px;
  }

  .header .header-lower .header-contact-cta .theme-button,
  .header .header-lower .header-contact-cta .theme-button.style-2 {
    font-size: 15px !important;
    padding: 10px 14px !important;
  }

  .header .theme-button {
    width: auto;
  }
}

/* Menu icon only where the full menu is hidden (below 1200px the theme
   moves the nav links into the off-canvas panel via meanmenu) */
@media (min-width: 1200px) {
  .header .header-lower .header-content .header-right .header-sidebar {
    display: none !important;
  }
}

/* Off-canvas menu (phones/tablets): dark teal like the ribbon, sand links.
   The site logo is filtered white in the WP Additional CSS, so the panel
   must be dark for it to show. */
.offcanvas {
  background-color: var(--ribbon-color) !important;
  color: var(--sand);
}

.offcanvas .offcanvas-header .offcanvas-close,
.offcanvas .offcanvas-header .offcanvas-close i {
  color: var(--sand) !important;
}

.offcanvas .menu-outer .navbar-collapse ul.navigation > li > a,
.offcanvas .menu-outer .navbar-collapse ul.navigation > li ul.submenu li > a,
.mean-container .mean-nav > ul li a {
  color: var(--sand) !important;
  font-family: var(--body-fonts) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  min-height: 44px;                       /* handover: 44px tap area */
}

.offcanvas .menu-outer .navbar-collapse ul.navigation > li > a:hover,
.offcanvas .menu-outer .navbar-collapse ul.navigation > li ul.submenu li > a:hover,
.mean-container .mean-nav > ul li a:hover {
  color: var(--gold) !important;
}

/* Pillar submenu: name above its one-line description (desktop dropdown
   stacks these; the mobile clone has no rule for it) */
.mean-container .mean-nav .menu-item-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mean-container .mean-nav .menu-item-description {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4;
}

.mean-container .mean-nav > ul li .menu-item-description,
.offcanvas .menu-outer .navbar-collapse ul.navigation > li ul.submenu li > a .menu-item-description {
  color: rgba(247, 244, 238, 0.75) !important;
}

.mean-container .mean-nav > ul li a,
.offcanvas .menu-outer .navbar-collapse ul.navigation > li,
.offcanvas .menu-outer .navbar-collapse ul.navigation > li ul.submenu li {
  border-color: rgba(247, 244, 238, 0.2) !important;
}

/* Sub-menu expand (+) buttons */
.mean-container .mean-nav > ul li a.mean-expand {
  background-color: rgba(247, 244, 238, 0.12) !important;
  color: var(--sand) !important;
  min-height: 0;
}

/* Intro and contact details in the panel */
.offcanvas .offcanvas-body .offcanvas-about p,
.offcanvas .offcanvas-body .offcanvas-contact .widget-title h3,
.offcanvas .offcanvas-body .offcanvas-contact .offcanvas-cta-content,
.offcanvas .offcanvas-body .offcanvas-contact .offcanvas-cta-content p,
.offcanvas .offcanvas-body .offcanvas-contact .offcanvas-cta-content a,
.offcanvas .offcanvas-body .offcanvas-contact .offcanvas-cta-icon {
  color: var(--sand) !important;
}

.offcanvas .offcanvas-body .widget .widget-title h3::after {
  background-color: var(--gold) !important;
}

/* Gold focus ring on the dark panel */
.offcanvas a:focus-visible,
.offcanvas button:focus-visible {
  outline-color: var(--gold) !important;
}

/* Top contact bar (only shown when the header's top bar is enabled) */
.header .header-top {
  background-color: var(--ecru);
}

/* ==========================================================================
   7. Hero (PDF section 1 and 3)
   ========================================================================== */

/* Ecru page colour shows through the white of the faded hero sketch */
.hero-section-1 {
  background-color: var(--ecru) !important;
  background-blend-mode: multiply;
}

/* H1 colour is also set inline from the page editor — navy wins here */
.hero-section-1 h1,
.hero-section-2 h1,
.hero-section-3 h1 {
  color: var(--navy) !important;
}

.hero-section-1 .hero-content .section-title h1 {
  font-size: 64px !important;
  line-height: 1.08 !important;
}

/* Hero copy: Bootstrap's .text-black and the page editor's "paragraph
   colour" (printed as an inline <style> with !important by the hero
   templates) both force it — the body prefix outranks them for slate. */
body .hero-section-1 .hero-content .section-title .hero-copy,
body .hero-section-1 .hero-content .section-title .hero-copy p,
body .hero-section-2 .hero-items .hero-content .section-title .hero-copy,
body .hero-section-2 .hero-items .hero-content .section-title .hero-copy p,
body .hero-section-3 .hero-content .section-title .hero-copy,
body .hero-section-3 .hero-content .section-title .hero-copy p {
  color: var(--slate) !important;
}

/* Tagline under H1: Newsreader italic 400, 26px, teal. In the editor the
   tagline is the bold line ("Understand them. Look after them. Keep
   moving."), so the bold text is styled rather than "the first paragraph"
   — plain intro copy without bold stays as body text. */
body .hero-section-1 .hero-content .section-title .hero-copy > p > strong {
  font-family: var(--title-fonts) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 26px !important;
  line-height: 1.35 !important;
  color: var(--teal) !important;
}

/* Separate rule: a browser without :has() drops only this one */
body .hero-section-1 .hero-content .section-title .hero-copy > p:has(> strong) {
  font-size: 26px !important;
  line-height: 1.35 !important;
}

@media (max-width: 767px) {
  /* Tighter on phones (theme: 150px / 80px + 40px under the content) so
     the top of the OmKnee Five section shows below the buttons */
  .hero-section-1 {
    padding: 120px 0 40px 0 !important;  /* 80px ribbon + 40px */
  }

  .hero-section-1 .hero-content {
    margin-bottom: 0 !important;
  }

  /* Less space above the OmKnee Five on phones (theme: 80px) */
  .services-section-1 {
    padding-top: 40px !important;
  }

  .hero-section-1 .hero-content .section-title h1 {
    font-size: 40px !important;
  }

  body .hero-section-1 .hero-content .section-title .hero-copy > p > strong {
    font-size: 21px !important;
  }

  body .hero-section-1 .hero-content .section-title .hero-copy > p:has(> strong) {
    font-size: 21px !important;
  }
}

/* ==========================================================================
   8. Sections, cards and forms (PDF sections 1, 2 and 8)
   ========================================================================== */

/* Alternate bands: linen */
.background-one,
.services-section-1.background-one {
  background-color: var(--linen) !important;
}

.newsletter-section-1 {
  background-color: var(--linen) !important;   /* was hard-coded #FDFCFA */
}

/* CTA box (About, FAQ): was teal with white text and white artwork.
   Linen box per the palette ("alternate section bands, boxes"), navy
   heading, slate copy, gold main button. The hexagon background and the
   white dashed arrow are drawn for a dark box, so they are removed. */
.cta-section-3 .cta-wapper {
  background-color: var(--linen) !important;
  background-image: none !important;
  border: 1px solid var(--line);
  border-radius: 6px !important;
}

.cta-section-3 .cta-wapper .cta-content .section-title h2 {
  color: var(--navy) !important;
}

.cta-section-3 .cta-wapper .cta-content .section-title p {
  color: var(--slate) !important;
}

.cta-section-3 .cta-wapper .cta-form .cta-shape {
  display: none !important;
}

/* Cards: pale ecru, 1px line border (OmKnee Five, shop, journal, etc.) */
.services-section-1 .service-items,
.blog-section .blog-grid-item-1,
.blog-section .single-blog-post,
.product-section .product-grid-item-1,
.shop-category-card,
.shop-category-card:hover,
.woocommerce ul.products li.product,
.accordion .accordion-item,
.contact-section .contact-form-box,
.testimonials-section-2 .testimonials-item,
.services-section-2 .service-list .service-item,
.services-section-3 .service-item,
.doctor-section-2 .doctor-item .doctor-content,
.portfolio-section-2 .portfolio-items .portfolio-content,
.micon-section .micon-items,
.age-gate-modal {
  background-color: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
}

/* Card headings use H3 sizing even where the markup is an h2 */
.services-section-1 .service-items .service-content h2,
.micon-section .micon-items .micon-content h2,
.shop-category-card h2,
.product-section .product-grid-item-1 .product-grid-content h2,
.blog-section .single-blog-post h2,
.blog-section .single-blog-post h3 {
  font-size: 26px !important;
  line-height: 1.2 !important;
  color: var(--navy);
}

/* OmKnee Five (homepage only): service images hidden at the client's
   request (14 Oct 2026). TO TURN THEM BACK ON, delete this rule — the
   images are still output by services-homepage-1.php and still set on each
   service (Service Icon / featured image), so nothing else needs changing. */
.home .services-section-1 .service-items .service-icon {
  display: none !important;
}

/* OmKnee Five cards: teal section label above each title, deep-gold
   number, navy name (services-homepage-1.php supplies data-eyebrow and
   .service-number). Deep gold, not button gold: the handover palette
   reserves #C9A45C for buttons and gives #9C7A3C for numbers on light
   backgrounds (3.8:1 on pale ecru, 24px and over). */
.services-section-1 .service-items .service-content h2 {
  color: var(--navy) !important;
}

.services-section-1 .service-items .service-content h2[data-eyebrow]::before {
  content: attr(data-eyebrow);
  display: block;
  margin-bottom: 10px;
  font-family: var(--body-fonts);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}

.services-section-1 .service-items .service-content h2 .service-number {
  color: var(--gold-deep);
  font-size: max(1em, 24px); /* card titles drop to 22px on phones */
}

/* Card text: 16px / 1.6, slate */
.services-section-1 .service-items .service-content p,
.blog-section .single-blog-post .post-content p,
.blog-section .blog-grid-item-1 p,
.shop-category-card .cat-copy,
.product-section .product-grid-item-1 .product-grid-content p {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--slate) !important;
}

@media (max-width: 767px) {
  .services-section-1 .service-items .service-content h2,
  .micon-section .micon-items .micon-content h2,
  .shop-category-card h2,
  .product-section .product-grid-item-1 .product-grid-content h2,
  .blog-section .single-blog-post h2,
  .blog-section .single-blog-post h3 {
    font-size: 22px !important;
  }
}

/* Image wells inside cards: linen instead of grey */
.shop-category-card .cat-media,
.woocommerce ul.products li.product a img,
.product-section .product-grid-item-1 .product-grid-image {
  background-color: var(--linen) !important;
}

/* Form fields: pale ecru with line border */
.form-control,
.form-select,
.newsletter-section-1 .newsletter-form-row input[type="text"],
.newsletter-section-1 .newsletter-form-row input[type="email"],
.cta-section-3 .cta-wapper .cta-form form .form-group .form-control,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  background-color: var(--card) !important;
  border: 1px solid var(--line) !important;
  color: var(--navy) !important;
}

.form-control:focus,
.newsletter-section-1 .newsletter-form-row input[type="text"]:focus,
.newsletter-section-1 .newsletter-form-row input[type="email"]:focus {
  border-color: var(--teal) !important;
}

/* Breadcrumbs */
.breadcrumb-section .breadcrumb-content nav .breadcrumb .breadcrumb-item a,
.breadcrumb-section .breadcrumb-content nav .breadcrumb .breadcrumb-item:not(:nth-child(1))::before {
  color: var(--navy) !important;
}

.breadcrumb-section .breadcrumb-content nav .breadcrumb .breadcrumb-item.active {
  color: var(--teal) !important;
}

/* Footer copy: paragraphs without their own colour rule (e.g. the footer
   "about" widget) would fall back to slate body text on the dark footer */
.footer p,
.footer p strong {
  color: var(--sand) !important;
}

/* Bootstrap's .text-black (!important) is used in templates for labels and
   pricing copy — navy instead of pure black */
.text-black {
  color: var(--navy) !important;
}

/* Hard-coded theme colours outside the palette */
.featured-portfolio-section .featured-portfolio-image {
  background-color: var(--ribbon-color) !important;   /* was #1C4C57 */
}

.fa-star.active {
  color: var(--gold) !important;                      /* was #ffb03b */
}

.video-gallery-filters .vg-filter-btn:hover,
.video-gallery-filters .vg-filter-btn.active {
  color: #FFFFFF !important;
}

/* ==========================================================================
   9. Five Pillars page — Services template (PDF section 7)
   ========================================================================== */

/* Top ribbon stays fixed on scroll on this page (PDF p.10) — the theme
   only fixes it after 250px, which would leave the sticky strip with no
   ribbon above it. Fixed from the start, so drop the theme's fade-in when
   it later adds .sticky. */
.page-template-service-listing-template .header-1 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
}

.page-template-service-listing-template .header .header-lower.sticky {
  position: relative;
  animation: none;
}

/* Title block: replaces the image banner, on the ecru page colour. The
   header is fixed over the top, so clear its height. */
.five-pillars-hero {
  background-color: var(--ecru);
  padding: calc(104px + 24px) 0 32px;   /* ribbon + 24px */
}

.five-pillars-hero .section-title {
  gap: 12px;
  margin-bottom: 0;
}

.five-pillars-hero .five-pillars-intro {
  margin: 4px 0 0;
  color: var(--slate);
}

/* Tile strip: sticks under the ribbon (fixed once scrolled) */
.five-pillars-strip {
  position: sticky;
  top: 104px;
  z-index: 5;
  background-color: var(--ecru);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
  transition: padding 0.2s ease;
}

.five-pillars-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  transition: gap 0.2s ease;
}

.five-pillars-tiles > li {
  display: flex;
  min-width: 0;
}

.five-pillars-strip .pillar-tile {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  color: inherit;
  text-decoration: none !important;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.five-pillars-strip .pillar-tile:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
}

.five-pillars-strip .pillar-tile:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 2px !important;
}

/* Current pillar: 3px gold bottom border in both states */
.five-pillars-strip .pillar-tile.current {
  border-bottom: 3px solid var(--gold);
}

.five-pillars-strip .tile-image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  padding: 6px;
  background-color: var(--linen);
  border-bottom: 1px solid var(--line);
}

.five-pillars-strip .tile-image img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.five-pillars-strip .tile-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
  padding: 16px 14px 14px;
  transition: padding 0.2s ease;
}

.five-pillars-strip .tile-heading {
  display: flex;
  flex-direction: column;
  font-family: var(--title-fonts);
  font-weight: 500;
  line-height: 1.15;
}

.five-pillars-strip .tile-number {
  font-size: 22px;
  color: var(--gold-deep);
}

.five-pillars-strip .tile-name {
  font-size: 22px;
  color: var(--navy);
}

.five-pillars-strip .tile-blurb {
  font-family: var(--body-fonts);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--slate);
}

.five-pillars-strip .tile-link {
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--body-fonts);
  font-size: 14px;
  font-weight: 500;
  color: var(--teal);
}

.five-pillars-strip .tile-link i {
  font-size: 12px;
  margin-left: 4px;
  transform: rotate(-45deg);
}

/* Compact (after ~80px of scroll): one continuous bar of numbers + names */
.five-pillars-strip.compact {
  padding: 0;
}

.five-pillars-strip.compact .five-pillars-tiles {
  gap: 0;
}

.five-pillars-strip.compact .pillar-tile {
  background: none;
  border: 0;
  border-radius: 0;
  border-bottom: 3px solid transparent;
  transform: none;
}

.five-pillars-strip.compact .pillar-tile.current {
  border-bottom-color: var(--gold);
}

.five-pillars-strip.compact .pillar-tile:hover .tile-name {
  color: var(--teal);
}

.five-pillars-strip.compact .tile-image,
.five-pillars-strip.compact .tile-blurb,
.five-pillars-strip.compact .tile-link {
  display: none;
}

.five-pillars-strip.compact .tile-body {
  padding: 14px 18px 11px 0;
}

.five-pillars-strip.compact .tile-heading {
  flex-direction: row;
  align-items: baseline;
  gap: 12px;
}

.five-pillars-strip.compact .tile-number {
  font-size: 17px;
}

.five-pillars-strip.compact .tile-name {
  font-size: 19px;
}

/* Breadcrumb under the strip: Home › The Five Pillars */
.five-pillars-breadcrumb {
  padding-top: 20px;
}

.five-pillars-breadcrumb .breadcrumb {
  --bs-breadcrumb-divider: "›";
  --bs-breadcrumb-divider-color: var(--slate);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--body-fonts);
  font-size: 14px;
}

.five-pillars-breadcrumb .breadcrumb-item {
  list-style: none;
}

.five-pillars-breadcrumb .breadcrumb-item::marker {
  content: none;
}

.five-pillars-breadcrumb .breadcrumb-item a {
  color: var(--slate);
  text-decoration: none;
}

.five-pillars-breadcrumb .breadcrumb-item a:hover {
  color: var(--teal);
}

.five-pillars-breadcrumb .breadcrumb-item.active {
  color: var(--navy);
  font-weight: 500;
}

/* "Understand your knee" copy: text left, knee drawing + buttons right */
.five-pillars-content {
  padding: 56px 0 100px;
}

.five-pillars-content .section-title {
  gap: 12px;
  margin-bottom: 24px;
}

.five-pillars-block + .five-pillars-block {
  margin-top: 56px;
}

.five-pillars-copy p {
  margin-bottom: 16px;
}

.five-pillars-copy p:last-child {
  margin-bottom: 0;
}

.five-pillars-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.five-pillars-figure {
  margin: 0;
  padding: 24px;
  background-color: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.five-pillars-figure img {
  display: block;
  max-height: 420px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}

.five-pillars-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* "Meet your knee": navy button, white text (PDF page 13) */
.theme-button.style-navy {
  background-color: var(--navy) !important;
  color: #FFFFFF !important;
  border: 1.5px solid var(--navy) !important;
}

.theme-button.style-navy span,
.theme-button.style-navy span::before {
  color: #FFFFFF !important;
}

.theme-button.style-navy:hover {
  background-color: var(--teal) !important;
  border-color: var(--teal) !important;
}

/* Tablets: tiles scroll sideways rather than squeezing into five columns */
@media (max-width: 991px) {
  .five-pillars-tiles {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }

  .five-pillars-tiles > li {
    flex: 0 0 34%;
    scroll-snap-align: start;
  }

  .five-pillars-strip.compact .five-pillars-tiles > li {
    flex: 0 0 auto;
  }

  .five-pillars-content .col-lg-5 {
    margin-top: 48px;
  }
}

/* Phones: 80px ribbon; tiles 72% of the screen, snapping into place */
@media (max-width: 767px) {
  .five-pillars-hero {
    padding: calc(80px + 20px) 0 24px;  /* ribbon + 20px */
  }

  .five-pillars-strip {
    top: 80px;
  }

  .five-pillars-tiles > li {
    flex: 0 0 72%;
  }

  .five-pillars-content {
    padding: 40px 0 72px;
  }

  .five-pillars-block + .five-pillars-block {
    margin-top: 40px;
  }

  .five-pillars-figure img {
    max-height: 300px;
  }
}

/* ==========================================================================
   10. Journal (blog listing, category archives, blog sidebar)
   ========================================================================== */

/* Post image: no navy gradient sliding over the image on hover — a gentle
   zoom instead, so the image is never covered */
.blog-section .single-blog-post .post-image a::after {
  display: none !important;
}

.blog-section .single-blog-post .post-image a {
  border-radius: 0 !important;            /* the card's 6px corners clip it */
}

.blog-section .single-blog-post .post-image a figure {
  margin: 0;
  overflow: hidden;
}

.blog-section .single-blog-post .post-image a figure img {
  transition: transform 0.6s ease;
}

.blog-section .single-blog-post:hover .post-image a figure img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .blog-section .single-blog-post .post-image a figure img {
    transition: none;
  }

  .blog-section .single-blog-post:hover .post-image a figure img {
    transform: none;
  }
}

/* Excerpt: its divider line spans the card (the 62ch measure clipped it) */
.blog-section .single-blog-post .post-content p {
  max-width: none;
}

.blog-section .single-blog-post .post-content h2 a:hover {
  color: var(--teal);
}

/* Sidebar boxes: linen, 1px line border, 6px corners */
.widget-sidebar .widget {
  border-radius: 6px !important;
}

/* Search: gold main-button style instead of a teal square */
.widget.widget-search form .form-group .field-inner button {
  background-color: var(--gold) !important;
  color: var(--navy) !important;
}

.widget.widget-search form .form-group .field-inner button:hover {
  background-color: var(--gold-hover) !important;
}

/* Category links: pale ecru cards; gold border on hover, no teal fill */
.widget.widget-categories-list .widget-content .category-list li a {
  background-color: var(--card) !important;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--navy) !important;
}

.widget.widget-categories-list .widget-content .category-list li a:hover,
.widget.widget-categories-list .widget-content .category-list li a.active {
  background-color: var(--card) !important;
  border-color: var(--gold);
  color: var(--teal) !important;
}

/* Recent post thumbnails: 4px corners */
.widget.widget-recent-post .recent-post-image figure {
  border-radius: 4px !important;
  overflow: hidden;
}

.widget.widget-recent-post .recent-post-content h4 a:hover {
  color: var(--teal);
}