/**
 * TEMPORARY brand preview — colours and fonts lifted from the customer's
 * "Omknee Health Retail" Lovable build (src/index.css / tailwind.config.ts).
 *
 * This overrides the same CSS custom properties the Theme Colours admin
 * screen writes to (see inc/theme-colours.php), without touching that
 * system or its stored values — enqueued last so it always wins. Delete
 * this file and its loader (inc/lovable-preview.php) to remove the test.
 */

@import url("https://fonts.googleapis.com/css2?family=Newsreader:wght@600&family=Inter:wght@400;500&display=swap");

:root {
  /* Core brand */
  --primary-color: #0E424E;
  --primary-rgb-05: rgba(14, 66, 78, 0.10);
  --title-color: #172326;
  --text-color: #5A6E72;
  --body-color: #FFFFFF;
  --footer-color: #10242A;

  /* Header */
  --header-background-color: #003b49;
  --header-navigation-text-color: #172326;
  --header-navigation-hover-color: #0E424E;
  --header-contact-text-color: #172326;
  --header-button-background-color: #003b49;
  --header-button-text-color: #FFFFFF;
  --header-button-hover-background-color: #D6BC71;
  --header-button-hover-text-color: #172326;

  /* Buttons */
  --button-style-1-background-color: #0E424E;
  --button-style-1-text-color: #FFFFFF;
  --button-style-1-hover-background-color: #D6BC71;
  --button-style-1-hover-text-color: #172326;

  --button-style-2-background-color: transparent;
  --button-style-2-text-color: #172326;
  --button-style-2-hover-background-color: #0E424E;
  --button-style-2-hover-text-color: #FFFFFF;

  --button-style-3-background-color: #0E424E;
  --button-style-3-text-color: #FFFFFF;
  --button-style-3-hover-background-color: #0E424E;
  --button-style-3-hover-text-color: #FFFFFF;

  --button-style-4-background-color: #FFFFFF;
  --button-style-4-text-color: #172326;
  --button-style-4-hover-background-color: #FFFFFF;
  --button-style-4-hover-text-color: #172326;

  --button-style-5-background-color: transparent;
  --button-style-5-text-color: #FFFFFF;
  --button-style-5-hover-background-color: #D6BC71;
  --button-style-5-hover-text-color: #172326;

  /* Borders and section backgrounds */
  --border-color-one: #F4F2EC;
  --border-color-two: #E9E6DD;
  --background-one: #F7F6F2;
  --background-two: #EBF3F4;

  /* Accent tints */
  --extra-color: #F3E9CE;
  --extra-color-one: #FBF8F1;
  --extra-color-two: #EBF3F4;
  --extra-color-three: #EFE6D0;
  --extra-color-four: #F5F4F0;
  --extra-color-five: #172326;
  --extra-color-six: #0F1B1D;

  /* Typography */
  --title-fonts: "Newsreader", Georgia, serif;
  --body-fonts: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --subtitle-fonts: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --text-color above (#5A6E72) fails the 7:1 body-text contrast target on
     white/off-white — reuse the near-black title colour for body copy too. */
  --text-color: #172326;
}

/**
 * header-lower (logo, main nav, header CTA button, sidebar toggler) keeps
 * the theme's original colours/fonts, except its background and CTA button
 * are the requested #003b49 (set in :root above, left un-reverted here) —
 * nav text/hover are flipped to white/gold so they stay readable against
 * that dark background. Everything in this subtree resolves the same
 * custom properties via inheritance, so re-declaring them here shadows the
 * :root preview values without touching header-lower.php or
 * theme-colours.php.
 */
.header-lower {
  --primary-color: #035E58;
  --primary-rgb-05: rgba(3, 94, 88, 0.10);
  --white-color: #FFFFFF;
  --black-color: #000000;
  --border-color-one: #F3F3F3;
  --border-color-two: #D3D3D3;
  --extra-color: #DDF6FA;
  --header-navigation-text-color: #FFFFFF;
  --header-navigation-hover-color: #D6BC71;
  --header-button-text-color: #FFFFFF;
  --header-button-hover-background-color: #000000;
  --header-button-hover-text-color: #FFFFFF;
  --button-style-1-background-color: #035E58;
  --button-style-1-text-color: #FFFFFF;
  --button-style-1-hover-background-color: #000000;
  --button-style-1-hover-text-color: #FFFFFF;
  --title-fonts: "Newsreader", Georgia, serif;
  --body-fonts: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/**
 * font-family is inherited as an already-resolved value, not re-evaluated
 * from var(--body-fonts) at each descendant, so the custom-property scoping
 * above doesn't reach the nav/button text — set it explicitly here instead.
 * Icons are untouched: Font Awesome's own font-family rule targets the
 * <i> element directly, which always wins over an inherited value.
 */
.header-lower .main-menu a,
.header-lower .theme-button {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/**
 * header-contact-info sits outside .header-lower, so it still resolves
 * --header-contact-text-color from :root above. Keep that on the homepage,
 * but force it (and its icons) white on every inner page.
 */
body:not(.home) .header .header-contact-info,
body:not(.home) .header .header-contact-info p,
body:not(.home) .header .header-contact-info a,
body:not(.home) .header .header-contact-info i,
body:not(.home) .header .header-contact-info ul li,
body:not(.home) .header .header-contact-info ul li p,
body:not(.home) .header .header-contact-info ul li p i {
  color: #ffffff !important;
}


.header .header-lower {
  background-color: #003B49;
}

.hero-section-1 .hero-button-wappper .theme-button.style-2 {
    color: #fff!important;
    border-color: #CBA052!important;
    background: #CBA052!important;
}

body {
    background-color: #FAF7EF!important;
}

/**
 * Typography spec: Newsreader (600) for headings, Inter (400/500 only) for
 * everything else. rem-based so browser zoom / user font-size settings work
 * — main.css never rescales the html root font-size, so 1rem = 16px here.
 * Selectors are plain tags with !important so this wins over every
 * component class in main.css/shop.css regardless of their specificity,
 * per the "completely overwrite previous styles" rule for this file.
 *
 * Not achievable in CSS: "sentence case for headings and buttons" needs
 * text-transform, but CSS only offers uppercase/lowercase/capitalize
 * (capitalize = Title Case) — there's no sentence-case transform. That has
 * to be fixed in the copy/markup itself.
 */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--title-fonts) !important;
  font-weight: 600 !important;
  color: var(--title-color);
}

h1 {
  font-size: clamp(2.25rem, 2rem + 0.75vw, 2.5rem) !important; /* ~36-40px */
  line-height: 1.2 !important;
}

h2 {
  font-size: clamp(1.625rem, 1.5rem + 0.5vw, 1.75rem) !important; /* ~26-28px */
  line-height: 1.3 !important;
}

h3 {
  font-size: 1.25rem !important; /* 20px */
  line-height: 1.4 !important;
}

body {
  font-family: var(--body-fonts) !important;
  font-weight: 400 !important;
  font-size: 1.125rem !important; /* 18px */
  line-height: 1.65 !important;
  color: var(--text-color);
}

@media (max-width: 991px) {
  /* main.css drops body to 15px/1.4rem below 992px; hold the spec size instead */
  body {
    font-size: 1.125rem !important;
    line-height: 1.65 !important;
  }
}

/* Buttons, nav, form labels and inputs: Inter 500 specifically */
button,
.theme-button,
input[type="submit"],
input[type="button"],
.btn,
.main-menu a,
.navigation a,
.offcanvas .navigation a,
label,
input,
select,
textarea {
  font-family: var(--body-fonts) !important;
  font-weight: 500 !important;
}

/* Line length: cap prose measure to the 65-75 character target */
p, blockquote {
  max-width: 68ch !important;
}

/* No font weights below 400 anywhere — only 400/500 (body) and 600
   (headings) are loaded, so these utility/component rules are pinned up. */
.fw_1, .fw_2, .fw_3 {
  font-weight: 400 !important;
}
.accordion .accordion-item .accordion-collapse .accordion-body p {
  font-weight: 400 !important;
}
.pricing-section-2 .pricing-list-box .pricing-item .pricing-content .pricing-text .pricing-plan-title span {
  font-weight: 400 !important;
}

/* Minimum text size 14px anywhere — main.css has a handful of 11-13px spots */
.featured-portfolio-section .featured-portfolio-check,
.shop-product-single-section .product-single-tab .tab-content .product-description-list ul li p i,
.knee-journey-section-1 .knee-journey-item-step,
.skill-progress-wapper .single-progressbar .progressbar .progress-bar-count::before,
.knee-journey-section-1 .knee-journey-eyebrow,
.footer .footer-bottom .footer-widget-wrap .widget-link .link li a i,
.featured-portfolio-section .featured-portfolio-disclaimer,
.newsletter-section-1 .newsletter-disclaimer,
.widget.widget-cart-total-summary .note span,
.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,
.blog-single-section .blog-single-post .post-navigation .nav-links .nav-previous a .post-nav-icon .post-nav-head,
.blog-single-section .blog-single-post .post-navigation .nav-links .nav-next a .post-nav-icon .post-nav-head {
  font-size: 0.875rem !important; /* 14px floor */
}

/* Sentence case, not Title Case, for buttons — main.css force-capitalizes
   every word via text-transform, which mangles sentence-case label text
   even though the labels themselves are already written correctly. */
.theme-button {
  text-transform: none !important;
}

/**
 * Header ribbon search + contact CTA (header-lower.php renders these inside
 * .header-lower, in place of .header-top, whenever the header CPT's "Hide
 * top bar" field is on). Narrower than the old top-bar search, and sized to
 * sit inline with the nav/CTA row.
 */
.header-lower .header-ribbon-search .header-search form {
  width: 220px;
}
@media (max-width: 1399px) {
  .header-lower .header-ribbon-search .header-search form {
    width: 180px;
  }
}
.header-lower .header-ribbon-search .header-search form .form-group input {
  min-height: 44px !important;
  height: 44px !important;
}
.header-lower .header-ribbon-search .header-search form .form-group button {
  width: 44px !important;
}
.header .header-search form .form-group label {
    padding: 0.5rem 0.5rem;
}
.header-lower .header-contact-cta .theme-button {
  height: 44px !important;
  white-space: nowrap;
  background: #CBA052 !important;
  border-color: #CBA052 !important;
  color: #fff !important;
}
.header-lower .header-contact-cta .theme-button span {
  color: #fff !important;
}