/*
 * Protingi.lt design foundation
 *
 * Keep brand decisions in one place. Components should consume these
 * variables instead of introducing a page-specific colour or type system.
 */
:root {
  --sv-color-ink: #10231B;
  --sv-color-green: #1BA365;
  --sv-color-green-hi: #37D48C;
  --sv-color-green-soft: #E8F3EE;
  --sv-color-amber: #F2A93B;
  --sv-color-paper: #F7FAF8;
  --sv-color-grid: #E0EBE5;
  --sv-color-muted: #5C6F67;
  --sv-color-faint: #83978D;
  --sv-color-line: #E2ECE6;
  --sv-color-white: #FFFFFF;
  --sv-color-danger: #C4534A;
  --sv-color-success: var(--sv-color-green);
  --sv-color-warning: var(--sv-color-amber);
  --sv-color-focus: var(--sv-color-green);

  --sv-font-heading: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sv-font-body: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sv-font-size-body: 16px;
  --sv-line-height-body: 1.65;
  --sv-heading-weight: 500;
  --sv-body-weight: 400;
  --sv-medium-weight: 500;

  --sv-radius-sm: 8px;
  --sv-radius-md: 12px;
  --sv-radius-lg: 16px;
  --sv-radius-xl: 24px;
  --sv-radius-pill: 999px;
  --sv-shadow-sm: 0 4px 16px rgba(16, 35, 27, .06);
  --sv-shadow-md: 0 14px 36px rgba(16, 35, 27, .09);
  --sv-shadow-lg: 0 24px 58px rgba(16, 35, 27, .12);
  --sv-focus-ring: 0 0 0 3px rgba(27, 163, 101, .22);
  --sv-control-height: 46px;
  --sv-control-padding-x: 14px;
  --sv-transition: 180ms ease;

  /* Astra-compatible aliases used by existing selectors. */
  --ast-global-color-0: var(--sv-color-green);
  --ast-global-color-1: var(--sv-color-green);
  --ast-global-color-2: var(--sv-color-ink);
  --ast-global-color-3: var(--sv-color-muted);
  --ast-global-color-4: var(--sv-color-paper);
  --ast-global-color-5: var(--sv-color-white);
  --ast-global-color-6: var(--sv-color-grid);
  --ast-global-color-7: var(--sv-color-ink);
  --ast-global-color-8: var(--sv-color-ink);
  --sv-font: var(--sv-font-body);
  --sv-marketing-page-bg: var(--sv-color-paper);

  /* Compatibility aliases for the migrated section CSS. */
  --sv-about-navy: var(--sv-color-ink);
  --sv-about-text: var(--sv-color-ink);
  --sv-about-muted: var(--sv-color-muted);
  --sv-about-accent: var(--sv-color-green);
  --sv-about-line: var(--sv-color-line);
  --sv-dest-navy: var(--sv-color-ink);
  --sv-dest-orange: var(--sv-color-green);
  --sv-dest-cream: var(--sv-color-paper);
  --sv-dest-green: var(--sv-color-ink);
  --sv-dest-green-2: var(--sv-color-green);
  /* Legacy destination alias now follows the active green accent. Amber is
   * reserved for brand margin marks and should not leak into UI components. */
  --sv-dest-yellow: var(--sv-color-green);
  --svui-accent: var(--sv-color-green);
  --svui-accent-hover: var(--sv-color-ink);
  --svui-accent-dark: var(--sv-color-ink);
  --svui-accent-soft: rgba(27, 163, 101, .10);
  --svadmin-accent: var(--sv-color-green);
  --svadmin-accent-hover: var(--sv-color-ink);
  --sv-lc-orange: var(--sv-color-green);
  --sv-lc-orange-dark: var(--sv-color-ink);
  --sv-lc-orange-soft: rgba(27, 163, 101, .10);
  --sv-lc-gold: var(--sv-color-green);
  --sv-lc-gold-hover: var(--sv-color-ink);
}

/* Global type scale. Outfit is reserved for headings; body copy stays Jakarta. */
body,
button,
input,
select,
textarea {
  font-family: var(--sv-font-body);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.widget-title {
  font-family: var(--sv-font-heading);
  font-weight: var(--sv-heading-weight);
  letter-spacing: -.035em;
  color: var(--sv-color-ink);
}

body {
  color: var(--sv-color-ink);
  background-color: var(--sv-color-paper);
  font-size: var(--sv-font-size-body);
  line-height: var(--sv-line-height-body);
}

a { color: var(--sv-color-green); }
a:hover, a:focus-visible { color: var(--sv-color-ink); }

/* Shared controls: one treatment for Gutenberg, WooCommerce and theme UI. */
button,
.button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.wp-element-button,
.wp-block-button__link {
  min-height: var(--sv-control-height);
  border: 1px solid transparent;
  border-radius: var(--sv-radius-pill);
  background: var(--sv-color-green);
  color: var(--sv-color-white);
  padding: 11px 20px;
  font-family: var(--sv-font-body);
  font-weight: var(--sv-medium-weight);
  line-height: 1.25;
  text-decoration: none;
  transition: background-color var(--sv-transition), color var(--sv-transition),
    border-color var(--sv-transition), box-shadow var(--sv-transition),
    transform var(--sv-transition), opacity var(--sv-transition);
}

button:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.wp-element-button:hover,
.wp-block-button__link:hover {
  background: var(--sv-color-ink);
  color: var(--sv-color-white);
  box-shadow: var(--sv-shadow-sm);
  transform: translateY(-1px);
}

button:focus-visible,
.button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 0;
  box-shadow: var(--sv-focus-ring);
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
.is-disabled {
  cursor: not-allowed;
  opacity: .55;
  transform: none;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="url"],
select,
textarea {
  min-height: var(--sv-control-height);
  max-width: 100%;
  border: 1px solid var(--sv-color-line);
  border-radius: var(--sv-radius-md);
  background: var(--sv-color-white);
  color: var(--sv-color-ink);
  padding: 10px var(--sv-control-padding-x);
  font-family: var(--sv-font-body);
  transition: border-color var(--sv-transition), box-shadow var(--sv-transition), background-color var(--sv-transition);
}

textarea { min-height: 120px; resize: vertical; }
input::placeholder,
textarea::placeholder { color: var(--sv-color-faint); opacity: 1; }
input:hover,
select:hover,
textarea:hover { border-color: var(--sv-color-green-hi); }
input:focus,
select:focus,
textarea:focus {
  border-color: var(--sv-color-green);
  outline: 0;
  box-shadow: var(--sv-focus-ring);
}

/* Reusable surface language for cards and notices. */
.sv-card,
.sv-surface,
.ast-article-post,
.woocommerce form,
.woocommerce .woocommerce-order,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error {
  border: 1px solid var(--sv-color-line);
  border-radius: var(--sv-radius-lg);
  background: var(--sv-color-white);
  box-shadow: var(--sv-shadow-sm);
}

.sv-card:hover,
.sv-surface:hover { box-shadow: var(--sv-shadow-md); }

.sv-status-success { color: var(--sv-color-green); }
.sv-status-warning { color: var(--sv-color-amber); }
.sv-status-error { color: var(--sv-color-danger); }
.sv-status-info { color: var(--sv-color-muted); }

/* Theme-owned marketing sections have inline component styles. These scoped
 * rules keep their visual language aligned even while old markup remains. */
.sv-theme-hero__eyebrow { color: var(--sv-color-green-hi) !important; }
.sv-theme-hero__button,
.sv-register-btn,
.sv-tutor-cta a,
.sv-tutor-cta button { background: var(--sv-color-green) !important; }
.sv-theme-hero__button:hover,
.sv-theme-hero__button:focus-visible,
.sv-register-btn:hover,
.sv-tutor-cta a:hover,
.sv-tutor-cta button:hover { background: var(--sv-color-ink) !important; }
.sv-home-counter-number,
.sv-counter-number,
[class*="counter"] .sv-counter-value { color: var(--sv-color-green) !important; }

/* Common legacy component variables are intentionally remapped here so the
 * plugin can keep business/runtime CSS while the theme owns the palette. */
body .svacc-enabled,
body .svacc-section-ui,
body .svadmin-ui,
body .sv-live-chat,
body .sv-zinynas,
body .sv-quick-tutor-quiz {
  --svui-accent: var(--sv-color-green);
  --svui-accent-hover: var(--sv-color-ink);
  --svadmin-accent: var(--sv-color-green);
  --svadmin-accent-hover: var(--sv-color-ink);
  --sv-lc-orange: var(--sv-color-green);
  --sv-lc-orange-dark: var(--sv-color-ink);
  --sv-lc-gold: var(--sv-color-green);
  --sv-lc-gold-hover: var(--sv-color-ink);
}

body .site-footer,
body .site-primary-footer-wrap,
body .site-below-footer-wrap {
  background: var(--sv-color-paper) !important;
  color: var(--sv-color-ink);
  border-color: var(--sv-color-line) !important;
}

body .site-footer a:hover,
body .site-footer a:focus-visible { color: var(--sv-color-green) !important; }

body .sv-live-chat,
body .sv-live-chat button,
body .sv-live-chat input,
body .sv-live-chat textarea,
body .sv-live-chat select,
body .svacc-enabled,
body .svadmin-ui,
body .sv-zinynas {
  font-family: var(--sv-font-body) !important;
}

/*
 * Last-mile marketing overrides. Several migrated sections still print a
 * small, scoped <style> block with their markup. Keep those legacy rules
 * visually subordinate to the central Protingi.lt palette as the sections
 * are updated independently.
 */
body .sv-theme-hero__eyebrow,
body.home .sv-home-hero-eyebrow { color: var(--sv-color-green-hi) !important; }

body .sv-process__eyebrow,
body .sv-home-destination--learning .sv-home-destination__eyebrow,
body .sv-about-page .sv-about-eyebrow,
body .sv-detail .sv-day-date,
body .sv-detail .sv-booking-day-date { color: var(--sv-color-green) !important; }

body .sv-process__step-number { background: var(--sv-color-green) !important; }
body .sv-process__button,
body .sv-about-button,
body .sv-tutor-cta-button,
body .sv-carousel-intro-link { background: var(--sv-color-green) !important; }

body .sv-process__button:hover,
body .sv-process__button:focus-visible,
body .sv-about-button:hover,
body .sv-tutor-cta-button:hover,
body .sv-carousel-intro-link:hover,
body .sv-carousel-intro-link:focus { background: var(--sv-color-ink) !important; }

body .sv-faq2__item:hover,
body .sv-faq2__item.is-open { border-color: rgba(27, 163, 101, .34) !important; }
body .sv-faq2__item.is-open .sv-faq2__trigger { background: var(--sv-color-green-soft, #E8F3EE) !important; }
body .sv-faq2__icon { background: #E8F3EE !important; border-color: rgba(27, 163, 101, .24) !important; }

body .sv-tutor-cta-box { background: var(--sv-color-green-soft, #E8F3EE) !important; }

body .sv-detail .sv-availability-grid-wrap,
body .sv-detail .sv-availability-week-nav,
body .sv-booking-page .sv-booking-grid-wrap,
body .sv-booking-page .sv-booking-week-nav { border-color: var(--sv-color-line) !important; }
body .sv-detail .sv-slot-view.is-past,
body .sv-booking-page .sv-booking-slot.is-past {
  background: #DCEBE5 !important;
  border-color: #83978D !important;
  color: var(--sv-color-ink) !important;
  box-shadow: inset 0 0 0 1px rgba(131, 151, 141, .62), 0 2px 6px rgba(16, 35, 27, .08) !important;
  opacity: 1 !important;
}
body .sv-detail .sv-availability-week-btn:hover,
body .sv-booking-page .sv-booking-week-btn:not([disabled]):hover { background: #E8F3EE !important; border-color: var(--sv-color-green) !important; }
body .sv-detail .sv-carousel-intro { border-color: rgba(27, 163, 101, .42) !important; }
body .sv-detail .sv-carousel-intro-link { border-color: rgba(27, 163, 101, .30) !important; }

/* The same compact, solid-color scrollbar language is used by the
 * availability table, the tutor carousel and the account lesson list. */
body .sv-carousel,
body .sv-upcoming-lessons__body {
  scrollbar-color: var(--sv-color-green) var(--sv-color-grid);
  scrollbar-width: thin;
}

body .sv-carousel::-webkit-scrollbar,
body .sv-upcoming-lessons__body::-webkit-scrollbar { width: 10px; height: 10px; }
body .sv-carousel::-webkit-scrollbar-track,
body .sv-upcoming-lessons__body::-webkit-scrollbar-track {
  border-radius: var(--sv-radius-pill);
  background: var(--sv-color-grid);
  box-shadow: inset 0 0 0 1px var(--sv-color-line);
}
body .sv-carousel::-webkit-scrollbar-thumb,
body .sv-upcoming-lessons__body::-webkit-scrollbar-thumb {
  min-width: 42px;
  min-height: 42px;
  border: 2px solid var(--sv-color-grid);
  border-radius: var(--sv-radius-pill);
  background: var(--sv-color-green);
  background-clip: padding-box;
}
body .sv-carousel::-webkit-scrollbar-thumb:hover,
body .sv-upcoming-lessons__body::-webkit-scrollbar-thumb:hover {
  background: var(--sv-color-ink);
  background-clip: padding-box;
}

/* Open FAQ icon: the minus must not inherit a white bar from a button reset. */
body .sv-faq2__item.is-open .sv-faq2__icon::before,
body .sv-faq2__item.is-open .sv-faq2__icon::after {
  background: var(--sv-color-ink) !important;
}

@media (max-width: 767px) {
  :root { --sv-font-size-body: 15px; }
  button,
  .button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  .wp-element-button,
  .wp-block-button__link { padding-inline: 17px; }
}