.custom-logo { max-height: 60px; width: auto; height: auto; }


/* ==========================================================================
   NUTRIPEDIA DESIGN SYSTEM — Design Tokens
   Generated by automation. Edit tokens here to update the whole site.
   ========================================================================== */
:root{
  --np-primary:#4CAF50;
  --np-primary-dark:#287B3A;
  --np-primary-deep:#173F2A;
  --np-secondary:#FF9800;
  --np-accent:#2196F3;
  --np-bg:#FAFAFA;
  --np-surface:#FFFFFF;
  --np-text:#212121;
  --np-muted:#68716B;
  --np-border:#E3E8E4;
  --np-error:#EF5350;

  --np-space-1:4px; --np-space-2:8px; --np-space-3:12px; --np-space-4:16px;
  --np-space-5:24px; --np-space-6:32px; --np-space-7:48px; --np-space-8:64px; --np-space-9:96px;

  --np-radius-sm:8px; --np-radius-md:12px; --np-radius-lg:16px; --np-radius-xl:24px; --np-radius-pill:999px;

  --np-shadow-1:0 8px 24px rgba(23,63,42,.08);
  --np-shadow-2:0 18px 60px rgba(23,63,42,.14);

  --np-content-max:1180px;
  --np-nav-max:1280px;

  --np-motion-fast:150ms;
  --np-motion-med:220ms;
  --np-motion-slow:300ms;
}

@media (prefers-color-scheme: dark){
  :root{
    --np-primary:#66C86F;
    --np-primary-dark:#8BD68F;
    --np-primary-deep:#F4F7F5;
    --np-secondary:#FFB74D;
    --np-accent:#64B5F6;
    --np-bg:#0E1711;
    --np-surface:#152119;
    --np-text:#F4F7F5;
    --np-muted:#AAB5AD;
    --np-border:#2A3A2E;
    --np-error:#FF7A74;
  }
}

/* ---- Base type & surfaces ---- */
body{ background-color:var(--np-bg); color:var(--np-text); }
body, p, li, input, textarea, select{ font-family:'Inter', sans-serif; }

h1,.h1{ font-weight:700; line-height:1.05; color:var(--np-text); }
h2,.h2{ font-weight:700; line-height:1.12; color:var(--np-text); }
h3,.h3{ font-weight:650; line-height:1.25; color:var(--np-text); }

.np-eyebrow{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--np-muted); }
[dir="rtl"] .np-eyebrow, html[lang="ar"] .np-eyebrow{ text-transform:none; letter-spacing:normal; }
.np-data,.np-tabular{ font-variant-numeric:tabular-nums; }

a{ color:var(--np-primary-dark); }
a:hover{ color:var(--np-primary-deep); }

/* ---- Buttons ---- */
.elementor-button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.tutor-btn{
  border-radius:var(--np-radius-sm);
  min-height:44px;
  font-weight:700;
  transition:background-color var(--np-motion-fast) ease, transform var(--np-motion-fast) ease, opacity var(--np-motion-fast) ease;
}
.elementor-button,
.wp-block-button__link,
.woocommerce a.button.alt,
.woocommerce #respond input#submit,
.tutor-btn.tutor-btn-primary{
  background-color:var(--np-primary);
  color:#FFFFFF;
  border-color:var(--np-primary);
}
.elementor-button:hover,
.wp-block-button__link:hover,
.woocommerce a.button.alt:hover,
.tutor-btn.tutor-btn-primary:hover{
  background-color:var(--np-primary-dark);
  border-color:var(--np-primary-dark);
}
.elementor-button.elementor-button-danger,
.np-button-destructive{ background-color:var(--np-error); border-color:var(--np-error); }
button[disabled],.elementor-button[disabled],.wp-block-button__link[disabled]{ opacity:.5; pointer-events:none; }

/* ---- Cards (course / product) ---- */
.woocommerce ul.products li.product,
.tutor-course-card,
.elementor-widget-woocommerce-products li.product{
  border-radius:var(--np-radius-lg);
  box-shadow:var(--np-shadow-1);
  border:1px solid var(--np-border);
  background-color:var(--np-surface);
  transition:transform var(--np-motion-med) ease, box-shadow var(--np-motion-med) ease;
}
@media (hover:hover){
  .woocommerce ul.products li.product:hover,
  .tutor-course-card:hover{ transform:translateY(-4px); box-shadow:var(--np-shadow-2); }
}

/* ---- Forms ---- */
input[type="text"],input[type="email"],input[type="password"],input[type="number"],
input[type="tel"],input[type="url"],input[type="search"],textarea,select{
  min-height:44px;
  border-radius:var(--np-radius-sm);
  border:1px solid var(--np-border);
  background-color:var(--np-surface);
  color:var(--np-text);
}
input:focus,textarea:focus,select:focus{
  outline:2px solid var(--np-accent);
  outline-offset:1px;
  border-color:var(--np-accent);
}
.woocommerce-error,.woocommerce-invalid input.input-text{ border-color:var(--np-error); }

/* ---- Badges ---- */
.np-badge{ display:inline-flex; align-items:center; gap:4px; border-radius:var(--np-radius-pill); padding:4px 10px; font-size:12px; font-weight:700; background-color:var(--np-border); color:var(--np-text); }
.np-badge-certificate{ background-color:var(--np-primary); color:#fff; }
.np-badge-live{ background-color:var(--np-secondary); color:#fff; }
.np-badge-ai{ background-color:var(--np-accent); color:#fff; }

/* ---- Progress bar ---- */
.np-progress-track{ height:8px; border-radius:var(--np-radius-pill); background-color:var(--np-border); overflow:hidden; }
.np-progress-fill{ height:100%; background-color:var(--np-primary); transition:width var(--np-motion-slow) ease; }

/* ---- Layout container ---- */
.np-content-max{ max-width:var(--np-content-max); margin-left:auto; margin-right:auto; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}


/* ==== NUTRIPEDIA DESIGN SYSTEM EXTENSION: Arabic type + utilities ==== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap');

:lang(ar), .rtl, [dir="rtl"]{ font-family:'Noto Sans Arabic', Tahoma, sans-serif; letter-spacing:0 !important; text-transform:none !important; }
:lang(ar) h1, .rtl h1, [dir="rtl"] h1, :lang(ar) h2, .rtl h2, [dir="rtl"] h2, :lang(ar) h3, .rtl h3, [dir="rtl"] h3, :lang(ar) .np-eyebrow, .rtl .np-eyebrow, [dir="rtl"] .np-eyebrow{ font-family:'Noto Kufi Arabic', Tahoma, sans-serif; }

/* ---- Catalog card line-clamp (title only; full text stays in DOM for assistive tech) ---- */
.np-line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; line-height:1.25; }

/* ---- Tabs ---- */
.np-tabs{ display:flex; gap:8px; overflow-x:auto; border-bottom:1px solid var(--np-border); }
.np-tabs .np-tab{ flex:0 0 auto; min-height:44px; padding:8px 16px; background:transparent; border:none; border-bottom:2px solid transparent; color:var(--np-muted); font-weight:650; cursor:pointer; }
.np-tabs .np-tab[aria-selected="true"]{ color:var(--np-primary-dark); border-bottom-color:var(--np-primary); }
.np-tabs .np-tab:focus-visible{ outline:2px solid var(--np-accent); outline-offset:2px; }

/* ---- Accordion ---- */
.np-accordion .np-accordion-header{ width:100%; text-align:left; background:var(--np-surface); border:1px solid var(--np-border); border-radius:12px; padding:12px 16px; min-height:44px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-weight:650; }
.np-accordion .np-accordion-header[aria-expanded="true"]{ border-color:var(--np-primary); }
.np-accordion .np-accordion-panel{ padding:12px 16px; color:var(--np-muted); }
.np-accordion .np-lesson-duration{ font-variant-numeric:tabular-nums; color:var(--np-muted); font-size:13px; }
.np-accordion .np-lesson-locked::after{ content:"Locked"; margin-left:8px; font-size:11px; color:var(--np-muted); }
.np-accordion .np-lesson-preview::after{ content:"Preview"; margin-left:8px; font-size:11px; color:var(--np-accent); }

/* ---- Toast ---- */
.np-toast{ position:fixed; bottom:24px; right:24px; max-width:360px; background:var(--np-surface); color:var(--np-text); border-radius:12px; box-shadow:0 18px 60px rgba(23,63,42,.14); padding:16px; display:flex; gap:12px; z-index:9999; }
.np-toast .np-toast-action{ font-weight:700; color:var(--np-primary-dark); background:none; border:none; cursor:pointer; min-height:44px; }
@media (max-width:560px){ .np-toast{ left:16px; right:16px; bottom:16px; max-width:none; } }

/* ---- Modal / drawer ---- */
.np-modal-overlay{ position:fixed; inset:0; background:rgba(23,63,42,.45); z-index:9998; }
.np-modal{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--np-surface); border-radius:24px; box-shadow:0 18px 60px rgba(23,63,42,.14); max-width:560px; width:calc(100% - 32px); max-height:85vh; overflow:auto; padding:24px; z-index:9999; }
.np-modal .np-modal-title{ font-weight:700; font-size:20px; margin-bottom:12px; }
@media (max-width:560px){ .np-modal{ top:auto; bottom:0; left:0; transform:none; width:100%; max-width:none; border-radius:24px 24px 0 0; max-height:90vh; } }

/* ---- Empty state ---- */
.np-empty-state{ text-align:center; padding:48px 24px; color:var(--np-muted); }
.np-empty-state .np-empty-icon{ font-size:40px; margin-bottom:16px; color:var(--np-border); }
.np-empty-state .np-empty-cta{ margin-top:16px; }

/* ---- Skeleton ---- */
.np-skeleton{ background:linear-gradient(90deg, var(--np-border) 25%, var(--np-bg) 37%, var(--np-border) 63%); background-size:400% 100%; border-radius:8px; animation:np-skeleton-shimmer 1.4s ease infinite; }
@keyframes np-skeleton-shimmer{
	0%{ background-position:100% 50%; }
	100%{ background-position:0 50%; }
}
@media (prefers-reduced-motion:reduce){ .np-skeleton{ animation:none; background:var(--np-border); } }

/* ---- Carousel ---- */
.np-carousel{ position:relative; }
.np-carousel .np-carousel-track{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; }
.np-carousel .np-carousel-track > *{ scroll-snap-align:start; }
.np-carousel .np-carousel-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:999px; background:var(--np-surface); box-shadow:0 8px 24px rgba(23,63,42,.08); border:1px solid var(--np-border); cursor:pointer; }
.np-carousel .np-carousel-arrow.prev{ left:-8px; }
.np-carousel .np-carousel-arrow.next{ right:-8px; }
.np-carousel .np-carousel-position{ text-align:center; font-size:12px; color:var(--np-muted); margin-top:8px; }
@media (max-width:850px){ .np-carousel .np-carousel-arrow{ display:none; } }

}

/* ==========================================================
   NUTRIPEDIA DESIGN SYSTEM - Part 2
   Accessibility, RTL/Arabic, and layout utilities
   ========================================================== */

/* Visible focus ring (WCAG 2.2 AA) */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--np-accent);
  outline-offset: 3px;
  border-radius: var(--np-radius-sm);
}

/* Minimum 44px touch targets */
.elementor-button,
.wp-block-button__link,
.tutor-btn,
button[type="submit"],
input[type="submit"] {
  min-height: 44px;
}

/* Tabular figures for progress and data */
.np-data,
[class*="progress"] {
  font-variant-numeric: tabular-nums;
}

/* Arabic typography and RTL behaviour */
html[dir="rtl"] body {
  font-family: "Noto Sans Arabic", Inter, Arial, sans-serif;
}
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] .elementor-heading-title {
  font-family: "Noto Kufi Arabic", "Noto Sans Arabic", Arial, sans-serif;
  letter-spacing: normal;
}
html[dir="rtl"] .elementor-heading-title,
html[dir="rtl"] .np-eyebrow {
  text-transform: none;
}
.np-icon--directional { transform: none; }
html[dir="rtl"] .np-icon--directional { transform: scaleX(-1); }

/* Eyebrow / label token */
.np-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--np-muted);
}

/* Catalog card title clamp */
.np-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Reusable surface + section spacing */
.np-surface {
  background: var(--np-surface);
  border: 1px solid var(--np-border);
  border-radius: var(--np-radius-lg);
  box-shadow: var(--np-shadow-1);
}
.np-section { padding-block: var(--np-space-8); }
@media (max-width: 850px) {
  .np-section { padding-block: var(--np-space-7); }
}

/* Skip link */
.skip-link:focus {
  position: fixed;
  top: 8px;
  inset-inline-start: 8px;
  z-index: 100000;
  background: var(--np-surface);
  color: var(--np-primary-deep);
  padding: 12px 16px;
  border-radius: var(--np-radius-sm);
  box-shadow: var(--np-shadow-2);
}

::selection { background: var(--np-primary); color: #fff; }


/* ==========================================================================
   NUTRIPEDIA DESIGN SYSTEM - Part 3
   Block (Gutenberg) layer token mapping.
   The site content is authored with core blocks, so the theme preset
   variables are remapped onto the Nutripedia tokens. Existing blocks then
   inherit the design system without having to be re-authored one by one.
   ========================================================================== */

/* Fixed brand ink: stays dark in both colour schemes, unlike --np-primary-deep
   which flips in dark mode. */
:root { --np-block-ink: #173F2A; }

/* Colour presets. The Nutripedia palette contains no pure black, so the
   "black" preset used by existing headings, body copy, outline buttons and
   full-width dark bands is remapped to the brand deep token. */
:root,
body {
  --wp--preset--color--black: var(--np-block-ink);
}

/* Spacing presets remapped to the approved 4 / 8 / 12 / 16 / 24 / 32 / 48 /
   64 / 96 scale. The theme shipped a 1.5x geometric scale (7, 10.7, 36, 54,
   81px) which is not part of the design system. */
:root,
body {
  --wp--preset--spacing--10: var(--np-space-1);
  --wp--preset--spacing--20: var(--np-space-2);
  --wp--preset--spacing--30: var(--np-space-3);
  --wp--preset--spacing--40: var(--np-space-4);
  --wp--preset--spacing--50: var(--np-space-5);
  --wp--preset--spacing--60: var(--np-space-6);
  --wp--preset--spacing--70: var(--np-space-7);
  --wp--preset--spacing--80: var(--np-space-8);
  --wp--preset--spacing--90: var(--np-space-9);
}

/* Layout, per the blueprint theme.json: content 1180px, wide 1280px. */
:root,
body {
  --wp--style--global--content-size: var(--np-content-max);
  --wp--style--global--wide-size: var(--np-nav-max);
}

/* Type scale: display 45-68px, H2 34-48px, H3 20-28px, fluid between the
   1100 / 850 / 560px breakpoints. */
:root,
body {
  --wp--preset--font-size--xx-large: clamp(34px, 4.4vw + 8px, 56px);
  --wp--preset--font-size--x-large: clamp(28px, 3vw + 8px, 42px);
}

h1,
.wp-block-heading.has-xx-large-font-size {
  font-size: clamp(34px, 4.4vw + 8px, 56px);
  line-height: 1.04;
}

h2 {
  font-size: clamp(26px, 2.6vw + 8px, 40px);
  line-height: 1.12;
}

h3 {
  font-size: clamp(20px, 0.8vw + 14px, 24px);
  line-height: 1.25;
}

/* Radius: 18px is not a Nutripedia radius. Snap bordered cards to 16px. */
.wp-block-group.has-border-color {
  border-radius: var(--np-radius-lg) !important;
}

/* Arabic must never be uppercased or letter-spaced. */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] .wp-block-heading {
  letter-spacing: normal;
  text-transform: none;
}


/* ==========================================================================
   NUTRIPEDIA DESIGN SYSTEM - Part 4
   Tutor LMS surface theming.
   Tutor ships its own palette (blue #3E64DE, greys, 4-6px radii). Remapping
   its custom properties re-skins every LMS surface at once: the course
   catalogue, single course, lesson player, quizzes and the student dashboard.
   ========================================================================== */

:root {
  /* Brand */
  --tutor-color-primary: #4CAF50;
  --tutor-color-primary-rgb: 76, 175, 80;
  --tutor-color-primary-hover: #287B3A;
  --tutor-color-primary-hover-rgb: 40, 123, 58;
  --tutor-color-secondary: #173F2A;

  /* Text */
  --tutor-body-color: #212121;
  --tutor-body-color-rgb: 33, 33, 33;
  --tutor-color-muted: #68716B;
  --tutor-color-hints: #68716B;
  --tutor-color-subdued: #68716B;
  --tutor-color-white: #FFFFFF;

  /* Lines and fills */
  --tutor-border-color: #E3E8E4;
  --tutor-border-color-rgb: 227, 232, 228;
  --tutor-color-gray: #E3E8E4;
  --tutor-color-gray-rgb: 227, 232, 228;
  --tutor-color-gray-10: #FAFAFA;

  /* Status. Success uses the accessible dark green, not the light primary. */
  --tutor-color-success: #287B3A;
  --tutor-color-success-rgb: 40, 123, 58;
  --tutor-color-warning: #FF9800;
  --tutor-color-warning-rgb: 255, 152, 0;
  --tutor-color-danger: #EF5350;
  --tutor-color-danger-rgb: 239, 83, 80;

  --tutor-text-size: 16px;
}

/* Radii: Tutor hardcodes 3-6px. Snap to the 8 / 12 / 16 / 24 / pill scale. */
.tutor-card,
.tutor-course-card {
  border-radius: var(--np-radius-md);
  border-color: var(--np-border);
  overflow: hidden;
}

.tutor-btn,
.tutor-form-control,
.tutor-form-select,
.tutor-form-wrap input,
.tutor-form-wrap select,
.tutor-form-wrap textarea {
  border-radius: var(--np-radius-sm);
}

.tutor-avatar,
.tutor-iconic-btn,
.tutor-course-bookmark .tutor-course-wishlist-btn,
.tutor-badge-label,
.tutor-round-box {
  border-radius: var(--np-radius-pill);
}

/* Card elevation and hover, per the motion spec (opacity/transform only). */
.tutor-course-card {
  box-shadow: var(--np-shadow-1);
  transition: transform var(--np-motion-fast) ease, box-shadow var(--np-motion-fast) ease;
}

@media (hover: hover) {
  .tutor-course-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--np-shadow-2);
  }
}

/* Progress indicators use the brand green and tabular figures. */
.tutor-progress-bar .tutor-progress-value,
.tutor-progress-filled {
  background-color: var(--np-primary);
}

.tutor-progress-bar,
.tutor-course-progress {
  font-variant-numeric: tabular-nums;
}

/* Catalogue grid gutters on the approved spacing scale. */
.tutor-courses.tutor-grid {
  gap: var(--np-space-5);
}

/* LMS wrappers respect the 1180px content maximum. */
.tutor-container,
.tutor-wrap.tutor-courses-wrap {
  max-width: var(--np-content-max);
  margin-inline: auto;
  padding-inline: var(--np-space-5);
}

/* Arabic: no uppercase, no tracking, inside LMS chrome either. */
html[dir="rtl"] [class*="tutor-"] {
  text-transform: none;
  letter-spacing: normal;
}


/* ==========================================================================
   NUTRIPEDIA DESIGN SYSTEM - Part 5
   Contrast corrections required by the palette rules:
   "#4CAF50 is a fill, not a text colour. Use #173F2A for dense text and
   #287B3A for accessible links/actions on light backgrounds."
   ========================================================================== */

/* Outline and text actions on light surfaces. #4CAF50 only reaches 2.78:1
   against white; #287B3A reaches 5.42:1. */
.tutor-btn-outline-primary,
a.tutor-btn-outline-primary,
.tutor-btn-ghost,
.tutor-btn-text {
  color: var(--np-primary-dark);
  border-color: var(--np-primary-dark);
}

@media (hover: hover) {
  .tutor-btn-outline-primary:hover,
  a.tutor-btn-outline-primary:hover {
    background-color: var(--np-primary-dark);
    border-color: var(--np-primary-dark);
    color: #FFFFFF;
  }
}

/* Avatar initials are real text and need 4.5:1 against their fill. */
.tutor-avatar-text {
  background-color: var(--np-primary-dark);
  color: #FFFFFF;
}

/* Dark brand bands: the brand-deep and body-text tokens are illegible on the
   deep green background, so lift them to their on-dark equivalents. */
/* On-dark primary (the dark-scheme primary token) clears 5.9:1 on #173F2A,
   whereas #4CAF50 only reaches 4.24:1. */
:root { --np-primary-on-dark: #66C86F; }

.has-black-background-color .has-theme-2-color,
.has-black-background-color .has-theme-5-color {
  color: var(--np-primary-on-dark) !important;
}

.has-black-background-color strong,
.has-black-background-color b,
.has-black-background-color em {
  color: inherit;
}


/* ==========================================================================
   NUTRIPEDIA DESIGN SYSTEM - Part 6
   (a) WordPress core default palette -> Nutripedia tokens. Some pages were
       authored with the editor defaults (vivid green cyan, vivid cyan blue,
       pale cyan blue), which are outside the palette.
   (b) WooCommerce commerce surfaces.
   ========================================================================== */

:root,
body {
  /* Full-bleed bands that carry white text. */
  --wp--preset--color--vivid-green-cyan: #173F2A;
  --wp--preset--color--vivid-cyan-blue: #287B3A;
  /* Tinted band that carries dark text. */
  --wp--preset--color--pale-cyan-blue: #E3E8E4;
  --wp--preset--color--light-green-cyan: #E3E8E4;
  --wp--preset--color--cyan-bluish-gray: #E3E8E4;
  /* Semantic equivalents. */
  --wp--preset--color--luminous-vivid-amber: #FF9800;
  --wp--preset--color--luminous-vivid-orange: #FF9800;
  --wp--preset--color--vivid-red: #EF5350;
}

/* ---- WooCommerce ------------------------------------------------------- */

/* Prices are data: brand-deep with tabular figures so columns align. */
.woocommerce .price,
.woocommerce-Price-amount,
.wc-block-components-product-price {
  color: var(--np-primary-deep);
  font-variant-numeric: tabular-nums;
}

.woocommerce del,
.woocommerce del .woocommerce-Price-amount {
  color: var(--np-muted);
}

.woocommerce-breadcrumb,
.woocommerce-breadcrumb a {
  color: var(--np-muted);
}

.woocommerce-breadcrumb a:hover {
  color: var(--np-primary-dark);
}

/* Commerce actions match the design-system button. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wc-block-components-button {
  background-color: var(--np-primary);
  color: #FFFFFF;
  border: 0;
  border-radius: var(--np-radius-sm);
  min-height: 44px;
  padding: var(--np-space-3) var(--np-space-5);
  font-weight: 600;
  transition: background-color var(--np-motion-fast) ease;
}

@media (hover: hover) {
  .woocommerce a.button:hover,
  .woocommerce button.button:hover,
  .woocommerce input.button:hover,
  .woocommerce a.button.alt:hover,
  .woocommerce button.button.alt:hover,
  .wc-block-components-button:hover {
    background-color: var(--np-primary-dark);
    color: #FFFFFF;
  }
}

/* Product cards. */
.woocommerce ul.products li.product img,
.wc-block-components-product-image img {
  border-radius: var(--np-radius-md);
}

/* Checkout and account fields reuse the field tokens. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
  background: var(--np-surface);
  color: var(--np-text);
  border: 1px solid var(--np-border);
  border-radius: var(--np-radius-sm);
  padding: var(--np-space-3) var(--np-space-4);
  min-height: 44px;
}

/* Store notices. */
.woocommerce-message { border-top-color: var(--np-primary); }
.woocommerce-info    { border-top-color: var(--np-accent); }
.woocommerce-error   { border-top-color: var(--np-error); }

/* Order totals and quantity inputs are numeric data. */
.woocommerce table.shop_table,
.woocommerce .quantity input.qty,
.woocommerce-orders-table {
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   NUTRIPEDIA DESIGN SYSTEM - Part 7
   Site chrome, touch targets and the last LMS details.
   ========================================================================== */

/* Navigation is allowed 1280px; page content stays at 1180px. Both get the
   24px page gutter. */
.site-header,
.site-footer {
  max-width: var(--np-nav-max);
  margin-inline: auto;
  padding-inline: var(--np-space-5);
}

.site-header {
  align-items: center;
  gap: var(--np-space-6);
}

/* Touch targets: 44px minimum height on every menu link. */
.site-navigation .menu-item > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: var(--np-space-2);
}

/* Tutor LMS: remaining non-token radii and fills. */
.tutor-card-image-top {
  border-radius: 0;
}

.tutor-form-select-dropdown {
  border-radius: var(--np-radius-sm);
  border-color: var(--np-border);
}

.tutor-form-select-option.is-active,
.tutor-form-select-option:hover {
  background-color: var(--np-bg);
  color: var(--np-primary-deep);
}


/* ==========================================================================
   NUTRIPEDIA DESIGN SYSTEM - Part 8
   Full-bleed bands are sized with 100vw, which includes the scrollbar gutter.
   That left about 8px of horizontal scroll at every breakpoint (1920, 1440,
   1100, 850, 560 and 390px all measured the same offset). Clipping the cross
   axis removes the stray scrollbar without turning the page into a scroll
   container, so sticky positioning keeps working.
   ========================================================================== */

html,
body {
  overflow-x: clip;
}

/* Guard: media never forces the page wider than the viewport. */
.wp-block-group img,
.wp-block-image img,
.tutor-card img,
.woocommerce img {
  max-width: 100%;
  height: auto;
}


/* ==========================================================================
   PART 9 - Colour-scheme integrity and CTA contrast (WCAG 2.2 AA)
   --------------------------------------------------------------------------
   a) Splits the remapped "black" preset into separate ink (text) and band
      (background) tokens so the dark colour scheme does not render deep-green
      text on a near-black page.
   b) Adds the blueprint data-theme dark hook alongside the OS-level query.
   c) Raises filled call-to-action fills to a tone that clears 4.5:1 against
      white label text. #4CAF50 with white is 2.78:1 and fails AA.
   ========================================================================== */

:root{
  --np-block-band:#173F2A;
  --np-cta:#287B3A;
  --np-cta-hover:#173F2A;
  --np-cta-ink:#FFFFFF;
  color-scheme:light;
}

/* Dark scheme: follow the OS preference unless the document opts out. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --np-block-ink:#F4F7F5;
    --np-block-band:#152119;
    --np-cta:#66C86F;
    --np-cta-hover:#8BD68F;
    --np-cta-ink:#0E1711;
    color-scheme:dark;
  }
}

/* Explicit toggle hook, per the blueprint token table. */
:root[data-theme="dark"]{
  --np-primary:#66C86F;
  --np-primary-dark:#8BD68F;
  --np-primary-deep:#F4F7F5;
  --np-secondary:#FFB74D;
  --np-accent:#64B5F6;
  --np-bg:#0E1711;
  --np-surface:#152119;
  --np-text:#F4F7F5;
  --np-muted:#AAB5AD;
  --np-border:#2A3A2E;
  --np-error:#FF7A74;
  --np-block-ink:#F4F7F5;
  --np-block-band:#152119;
  --np-cta:#66C86F;
  --np-cta-hover:#8BD68F;
  --np-cta-ink:#0E1711;
  color-scheme:dark;
}

/* Band backgrounds use the band token, not the ink token. */
.has-black-background-color{ background-color:var(--np-block-band) !important; }

/* Filled CTAs. */
.elementor-button,
.wp-block-button__link,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit,
.woocommerce a.button.add_to_cart_button,
.woocommerce button[type="submit"],
.tutor-btn.tutor-btn-primary{
  background-color:var(--np-cta);
  border-color:var(--np-cta);
  color:var(--np-cta-ink);
}
.elementor-button:hover,
.elementor-button:focus-visible,
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.add_to_cart_button:hover,
.tutor-btn.tutor-btn-primary:hover,
.tutor-btn.tutor-btn-primary:focus-visible{
  background-color:var(--np-cta-hover);
  border-color:var(--np-cta-hover);
  color:var(--np-cta-ink);
}

/* Outline CTAs sitting on the light surface. */
.wp-block-button.is-style-outline .wp-block-button__link{
  background-color:transparent;
  color:var(--np-cta);
  border:1px solid currentColor;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible{
  background-color:var(--np-cta);
  color:var(--np-cta-ink);
}

/* CTAs placed on a dark band need the light-on-dark pairing. */
.has-black-background-color .wp-block-button__link,
.has-black-background-color .elementor-button{
  background-color:var(--np-primary-on-dark);
  border-color:var(--np-primary-on-dark);
  color:#0E1711;
}
.has-black-background-color .wp-block-button.is-style-outline .wp-block-button__link{
  background-color:transparent;
  color:var(--np-primary-on-dark);
}

/* Keep the focus ring visible against every fill above. */
.wp-block-button__link:focus-visible,
.elementor-button:focus-visible,
.tutor-btn:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible{
  outline:3px solid var(--np-accent);
  outline-offset:3px;
}

/* PART 9b - the WordPress colour presets carry !important, so the dark-band
   CTA ink has to match that weight to win. Outline variants keep light ink. */
.has-black-background-color .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.has-black-background-color .elementor-button:not(.elementor-button-link){
  color:#0E1711 !important;
}
.has-black-background-color .wp-block-button.is-style-outline .wp-block-button__link{
  color:var(--np-primary-on-dark) !important;
}
.has-black-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-black-background-color .wp-block-button.is-style-outline .wp-block-button__link:focus-visible{
  background-color:var(--np-primary-on-dark);
  color:#0E1711 !important;
}


/* ==========================================================================
   PART 10 - Residual contrast and pointer-target minimums
   --------------------------------------------------------------------------
   The WooCommerce breadcrumb ships #767676, which is 4.35:1 on the page
   background and misses AA by a hair. Card and breadcrumb meta links were
   17-20px tall, below the WCAG 2.2 target-size floor.
   ========================================================================== */

.woocommerce .woocommerce-breadcrumb,
nav.woocommerce-breadcrumb,
.woocommerce nav.woocommerce-breadcrumb{
  color:var(--np-muted);
  font-size:14px;
}
.woocommerce .woocommerce-breadcrumb a,
nav.woocommerce-breadcrumb a{
  color:var(--np-primary-dark);
  text-decoration:none;
}
.woocommerce .woocommerce-breadcrumb a:hover,
nav.woocommerce-breadcrumb a:hover{
  color:var(--np-primary-deep);
  text-decoration:underline;
}

/* Target size. Standalone meta links get vertical padding so the hit area
   clears the 24px floor without changing the visual rhythm of the cards. */
nav.woocommerce-breadcrumb a,
.tutor-meta a,
.tutor-meta-value a,
.tutor-course-author a,
.tutor-course-card a:not(.tutor-btn):not(.tutor-course-thumbnail),
.woocommerce-loop-product__title a{
  display:inline-flex;
  align-items:center;
  min-height:24px;
}

/* Author avatars in course cards act as links; give them a real hit area. */
.tutor-avatar,
.tutor-avatar-text{
  min-width:36px;
  min-height:36px;
}


/* ==========================================================================
   PART 11 - Sticky header at the blueprint height
   --------------------------------------------------------------------------
   The header was 220px tall because eleven nav links wrapped onto four rows.
   Target: 74px sticky bar, 1280px inner measure, 64px below the tablet
   breakpoint. Full-bleed background with a padded inner measure keeps the
   sticky band spanning the viewport while the content stays on the grid.
   ========================================================================== */

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  max-width:none;
  margin-inline:0;
  padding-block:0;
  padding-inline:max(var(--np-space-5), calc((100% - var(--np-nav-max)) / 2));
  min-height:74px;
  flex-wrap:nowrap;
  gap:var(--np-space-5);
  background-color:var(--np-surface);
  border-bottom:1px solid var(--np-border);
  box-shadow:var(--np-shadow-1);
}

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

.site-header .site-branding{ flex:0 0 auto; align-items:center; }
.site-header .custom-logo{ height:44px; width:auto; display:block; }

.site-header .site-navigation{
  flex:1 1 auto;
  min-width:0;
  justify-content:flex-end;
}
.site-header .site-navigation .menu{
  flex-wrap:nowrap;
  align-items:center;
  gap:var(--np-space-1);
  margin:0;
  padding:0;
}
.site-header .site-navigation .menu-item > a{
  white-space:nowrap;
  font-size:15px;
  padding-inline:var(--np-space-3);
  border-radius:var(--np-radius-sm);
}
.site-header .site-navigation .menu-item > a:hover{
  background-color:var(--np-bg);
  color:var(--np-primary-deep);
}
.site-header .site-navigation .current-menu-item > a{
  color:var(--np-primary-deep);
  font-weight:700;
}

/* Below the desktop measure the row scrolls horizontally rather than
   wrapping, so the bar keeps a predictable height. */
@media (max-width:1200px){
  .site-header .site-navigation{
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    justify-content:flex-start;
  }
  .site-header .site-navigation::-webkit-scrollbar{ display:none; }
}

@media (max-width:768px){
  .site-header{ min-height:64px; padding-inline:var(--np-space-4); }
  .site-header .custom-logo{ height:36px; }
}

/* Anchors must clear the sticky bar. */
html{ scroll-padding-top:90px; }
@media (max-width:768px){ html{ scroll-padding-top:80px; } }

/* The skip link has to become visible when it receives focus. */
.skip-link.screen-reader-text:focus,
.skip-link:focus-visible{
  position:fixed !important;
  top:var(--np-space-3);
  left:var(--np-space-3);
  width:auto !important;
  height:auto !important;
  clip:auto !important;
  clip-path:none !important;
  z-index:1000;
  padding:var(--np-space-3) var(--np-space-5);
  background-color:var(--np-surface);
  color:var(--np-primary-deep);
  border-radius:var(--np-radius-sm);
  box-shadow:var(--np-shadow-2);
  outline:3px solid var(--np-accent);
  outline-offset:3px;
}


/* ==========================================================================
   PART 12 - Content measure and heading ink
   --------------------------------------------------------------------------
   The theme capped .site-main at 600px, which squeezed every non-Elementor
   page (pricing, shop, mentors) into a third of the 1280px header. Restores
   the 1180px blueprint measure while keeping running prose at a readable
   line length. Headings also settle on one ink token instead of drifting
   between #212121 and the brand deep green from page to page.
   ========================================================================== */

.site-main{
  max-width:var(--np-content-max);
  margin-inline:auto;
  width:100%;
}
body:not(.home) .site-main{
  padding-inline:var(--np-space-5);
  padding-block:var(--np-space-8) var(--np-space-9);
}
@media (max-width:768px){
  body:not(.home) .site-main{ padding-block:var(--np-space-6) var(--np-space-8); }
}

/* Running prose keeps a comfortable measure even though the column is wide. */
.site-main .entry-content > p,
.site-main .entry-content > ul,
.site-main .entry-content > ol,
.site-main .entry-content > blockquote{
  max-width:72ch;
}

/* One heading ink. Flips to near-white automatically in the dark scheme
   because --np-primary-deep is scheme-aware. */
h1,.h1,h2,.h2,h3,.h3,
.wp-block-heading,
.entry-title{
  color:var(--np-primary-deep);
}
.has-black-background-color h1,
.has-black-background-color h2,
.has-black-background-color h3,
.has-black-background-color .wp-block-heading{
  color:#F4F7F5;
}


/* ==========================================================================
   PART 13 - Tutor LMS archive container
   --------------------------------------------------------------------------
   .tutor-wrap is rendered as a direct child of <body>, so the catalogue
   escaped the site measure entirely and sat flush against the viewport edge.
   ========================================================================== */

.tutor-wrap.tutor-wrap-parent{
  max-width:var(--np-content-max);
  margin-inline:auto;
  padding-inline:var(--np-space-5);
  padding-block:var(--np-space-8) var(--np-space-9);
}
@media (max-width:768px){
  .tutor-wrap.tutor-wrap-parent{
    padding-inline:var(--np-space-4);
    padding-block:var(--np-space-6) var(--np-space-8);
  }
}

/* Archive title reads as the page heading, so give it the heading ink and
   the display scale used everywhere else. */
.tutor-wrap .tutor-fs-3.tutor-color-black,
.tutor-wrap .tutor-course-archive-title,
.tutor-wrap h1.tutor-fs-3{
  color:var(--np-primary-deep);
  font-weight:700;
  line-height:1.12;
}

/* Rating stars follow the secondary token rather than Tutor amber. */
.tutor-ratings-stars i,
.tutor-ratings i{ color:var(--np-secondary); }


/* ============================================================
   BLUEPRINT PART 11 — TOKEN NAME ALIASES
   The spec names radii --np-r-* and widths --np-content/--np-nav.
   This site implements --np-radius-* and --np-*-max.
   These aliases make code written against the blueprint resolve
   correctly. No visual change.
   ============================================================ */
:root{
  --np-r-sm: var(--np-radius-sm);
  --np-r-md: var(--np-radius-md);
  --np-r-lg: var(--np-radius-lg);
  --np-r-xl: var(--np-radius-xl);
  --np-content: var(--np-content-max);
  --np-nav: var(--np-nav-max);
}