/* ==========================================================================
   Techtlk Child - Design System
   --------------------------------------------------------------------------
   Single source of truth for FONTS and COLOURS.

   Load order (see functions.php):
     1. parent bootstrap/default/responsive/style.css
     2. design-system.css        <- this file (variables + semantics)
     3. parent-color-overrides.css (generated; re-skins parent rules)
     4. custom.css               (site-specific tweaks)

   Nothing in this file touches layout, spacing, sizing or behaviour.
   Icon fonts (remixicon, Font Awesome, icofont, slick, swiper, uicons) are
   deliberately untouched - never add a blanket "*" font rule here.
   ========================================================================== */

:root {
  /* ---- Typography ------------------------------------------------------ */
  --font-heading: "Montserrat", sans-serif;
  --font-body: "Poppins", sans-serif;

  /* ---- Brand ----------------------------------------------------------- */
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;

  /* ---- Text ------------------------------------------------------------ */
  --color-heading: #0F172A;
  --color-text: #475569;
  --color-muted: #94A3B8;

  /* ---- Surfaces -------------------------------------------------------- */
  --color-background: #FAFBFC;
  --color-background-alt: #F6F9FF;
  --color-surface: #FFFFFF;

  /* ---- Lines ----------------------------------------------------------- */
  --color-border: #E2E8F0;
  --color-divider: #EDF2F7;

  /* ---- Premium accent - awards, featured badges, certifications only.
          Never a page background and never a primary button. ------------- */
  --color-gold: #C89B3C;
  --color-gold-light: #F8F2E3;
  --color-gold-dark: #9C6B15;

  /* ---- Status ---------------------------------------------------------- */
  --color-success: #16A34A;
  --color-warning: #F59E0B;
  --color-danger: #DC2626;

  /* ---- Third-party aliases --------------------------------------------- */
  /* bootstrap.min.css builds its base stack from this variable */
  --bs-font-sans-serif: var(--font-body);
  --bs-primary: var(--color-primary);
  --bs-secondary: var(--color-muted);
  --bs-success: var(--color-success);
  --bs-warning: var(--color-warning);
  --bs-danger: var(--color-danger);
  --bs-light: var(--color-background-alt);
  --bs-dark: var(--color-heading);
}

/* ==========================================================================
   1. TYPOGRAPHY
   Every non-icon font-family declared by the parent theme and its add-ons is
   re-pointed below. Selectors mirror the originals exactly so specificity is
   unchanged and load order decides the winner.
   ========================================================================== */

/* --- Poppins: body copy, navigation, forms, controls -------------------- */

/* default.css:20 */
html,
body {
  font-family: var(--font-body);
}

/* Form controls default to the system font in every browser, so this is the
   one place a declaration is required rather than inherited. */
button,
input,
select,
optgroup,
textarea {
  font-family: var(--font-body);
}

::placeholder {
  font-family: var(--font-body);
}

/* default.css:4185 + :4234 - main navigation */
.menu-area .navbar ul li a,
.menu-area .navbar ul li > a {
  font-family: var(--font-body);
}

/* default.css:1100 - single post prev/next navigation */
.single .ps-navigation ul li {
  font-family: var(--font-body);
}

/* techtlk-addons team-slider-widget.css:591 - slider arrow labels */
.rsaddon-unique-slider.rs-team-slider.team-slider-style8 .rs-addon-slider .custom-nav .slick-arrow {
  font-family: var(--font-body);
}

/* --- Montserrat: headings, titles, blockquote --------------------------- */

/* default.css:239 */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
}

/* default.css:1564-1620 */
blockquote,
blockquote p,
blockquote cite {
  font-family: var(--font-heading);
}

/* default.css:4052 - text site title in the header */
#rs-header .logo-area .site-title a {
  font-family: var(--font-heading);
}

/* Widget + section + card titles (default.css:1768, :1951 and addon headings).
   .post-desc > a is the recent-post widget's title link, not a description. */
.title,
.widget-title,
.bs-sidebar .widget_block h2,
.bs-sidebar .widget-title,
.bs-sidebar .wp-block-search__label,
.bs-sidebar .recent-post-widget .post-title,
.bs-sidebar .recent-post-widget .post-title a,
.bs-sidebar .recent-post-widget .post-desc a,
.rs-heading .title-inner .title,
.prelements-heading .title-inner .title,
.elementor-heading-title {
  font-family: var(--font-heading);
}

/* Statistics / counters / odometers read as headings. */
.rs-counter-list .count-number,
.rs-counter-list .count-number span,
.rs-counter-list .count-text span.rs-counter,
.odometer {
  font-family: var(--font-heading);
}

/* default.css:13377 declares this one !important, so the override needs it too */
.woocommerce ul.products li .woocommerce-loop-product__title {
  font-family: var(--font-heading) !important;
}

/* ==========================================================================
   2. COLOUR SEMANTICS
   Only the values the parent theme never expressed at all. Rule-by-rule
   re-skinning of the parent lives in parent-color-overrides.css.
   ========================================================================== */

/* Page background - the parent theme never sets one, so the browser default
   (white) was in use. */
body {
  background-color: var(--color-background);
}

/* Text selection - was #565454 (body grey) in default.css:321 */
::-moz-selection,
::selection {
  background: var(--color-primary);
  color: var(--color-surface);
}

/* --- Inline content links ------------------------------------------------
   The parent paints every <a> in body grey (default.css:281 "body a"), which
   makes real in-copy links indistinguishable from surrounding text. Scoped to
   editorial containers only, so nav items, card wrappers, buttons and titles
   keep the colours their own rules give them.
   Delete this block if links should stay grey. */
.entry-content p a,
.entry-content li a,
.entry-content td a,
.comment-content p a,
.comment-content li a,
.widget_text p a,
.textwidget p a {
  color: var(--color-primary);
}

.entry-content p a:hover,
.entry-content li a:hover,
.entry-content td a:hover,
.comment-content p a:hover,
.comment-content li a:hover,
.widget_text p a:hover,
.textwidget p a:hover {
  color: var(--color-primary-hover);
}

/* --- Focus states --------------------------------------------------------
   default.css:281 sets "outline: none !important" on body a, so restoring a
   visible keyboard focus ring needs the same weight. Pointer focus is
   unaffected (:focus-visible only). */
body a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary);
}