/*
Theme Name:  Kudusole Child
Theme URI:   https://kudusole.com
Description: Child theme for Kudusole — inherits Hestia, adds custom typography and brand styles.
Author:      Kudusole
Template:    hello-elementor
Version:     1.0.0
*/

/* =====================================================
   1. GOOGLE FONTS — loaded non-blocking via functions.php
      (EB Garamond + Libre Baskerville + DM Sans + DM Mono)
   ===================================================== */

/* =====================================================
   2. CSS VARIABLES — brand colours & fonts
   ===================================================== */
:root {
  /* Colours */
  --ks-white:      #ffffff;
  --ks-cream:      #faf8f4;
  --ks-cream2:     #f3f0e9;
  --ks-cream3:     #ebe6db;
  --ks-navy:       #1a2740;
  --ks-navy2:      #243454;
  --ks-navy-pale:  #eef1f7;
  --ks-ink:        #1a1a18;
  --ks-ink3:       #4a4a44;
  --ks-ink4:       #6a6a62;
  --ks-ink5:       #8a8a80;
  --ks-rule:       #ddd8cc;
  --ks-rule2:      #e8e4da;

  /* Fonts */
  --ks-serif:      'EB Garamond', Georgia, serif;
  --ks-display:    'Libre Baskerville', Georgia, serif;
  --ks-body:       'DM Sans', system-ui, sans-serif;
  --ks-mono:       'DM Mono', monospace;
}

/* =====================================================
   3. GLOBAL RESETS & BASE
   ===================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background-color: var(--ks-white) !important;
  color: var(--ks-ink) !important;
  font-family: var(--ks-body) !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--ks-navy);
  text-decoration: none;
  transition: color 0.15s;
}
a:hover {
  color: var(--ks-navy2);
  text-decoration: none;
}

/* =====================================================
   4. TYPOGRAPHY — headings
   ===================================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ks-serif) !important;
  color: var(--ks-ink) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em;
}

h1, .h1 { font-size: clamp(2rem, 5vw, 3.5rem) !important; }
h2, .h2 { font-size: clamp(1.6rem, 3vw, 2.4rem) !important; }
h3, .h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem) !important; }
h4, .h4 { font-size: 1.25rem !important; }
h5, .h5 { font-size: 1.1rem !important; }
h6, .h6 { font-size: 1rem !important; }

/* Italic headings — Garamond italic is beautiful, use it */
h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: 400;
  color: var(--ks-navy);
}

/* Body copy in posts/pages */
.entry-content,
.entry-content p,
.single-post .entry-content,
article .entry-content {
  font-family: var(--ks-serif) !important;
  font-size: 18px !important;
  line-height: 1.8 !important;
  color: var(--ks-ink3) !important;
}

/* Post titles */
.entry-title,
.entry-title a {
  font-family: var(--ks-serif) !important;
  font-weight: 600 !important;
  color: var(--ks-ink) !important;
}
.entry-title a:hover {
  color: var(--ks-navy) !important;
}

/* =====================================================
   5. NAVIGATION
   ===================================================== */
/* Main nav bar */
.navbar,
.navbar.navbar-default,
header.navbar {
  background-color: var(--ks-white) !important;
  border-bottom: 1px solid var(--ks-rule) !important;
  box-shadow: 0 1px 0 var(--ks-rule) !important;
  min-height: 64px !important;
}

/* Site name / logo text */
.navbar-brand,
.navbar-brand span,
.site-title,
.site-title a {
  font-family: var(--ks-display) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--ks-ink) !important;
  letter-spacing: 0.02em !important;
}
.navbar-brand:hover,
.site-title a:hover {
  color: var(--ks-navy) !important;
}

/* Nav links */
.navbar-nav > li > a,
.nav-link {
  font-family: var(--ks-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--ks-ink3) !important;
  letter-spacing: 0.02em !important;
  transition: color 0.15s !important;
}
.navbar-nav > li > a:hover,
.navbar-nav > li.active > a,
.nav-link:hover {
  color: var(--ks-navy) !important;
  background: transparent !important;
}

/* =====================================================
   6. BUTTONS
   ===================================================== */
.btn-primary,
.wc-proceed-to-checkout .checkout-button,
input[type="submit"],
button[type="submit"] {
  background-color: var(--ks-navy) !important;
  border-color: var(--ks-navy) !important;
  color: #fff !important;
  font-family: var(--ks-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  padding: 12px 24px !important;
  border-radius: 4px !important;
  transition: background-color 0.18s, border-color 0.18s !important;
}
.btn-primary:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: var(--ks-navy2) !important;
  border-color: var(--ks-navy2) !important;
  color: #fff !important;
}

.btn-outline,
.btn-secondary {
  background: transparent !important;
  border: 1px solid var(--ks-rule) !important;
  color: var(--ks-ink3) !important;
  font-family: var(--ks-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
  transition: border-color 0.18s, color 0.18s !important;
}
.btn-outline:hover,
.btn-secondary:hover {
  border-color: var(--ks-navy) !important;
  color: var(--ks-navy) !important;
}

/* =====================================================
   7. HERO / PAGE HEADER (Hestia uses a big header section)
   ===================================================== */
.hestia-title,
.page-header .hestia-title {
  font-family: var(--ks-serif) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

.hestia-description,
.page-header .hestia-description {
  font-family: var(--ks-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 19px !important;
  line-height: 1.7 !important;
  opacity: 0.85;
}

/* =====================================================
   8. BLOG / ARCHIVE — post cards
   ===================================================== */
/* Card background */
.card,
.blog-post-item .card {
  background: var(--ks-white) !important;
  border: 1px solid var(--ks-rule) !important;
  border-radius: 6px !important;
  transition: border-color 0.18s, transform 0.18s !important;
}
.card:hover,
.blog-post-item .card:hover {
  border-color: var(--ks-navy) !important;
  transform: translateY(-2px) !important;
}

/* Card title */
.card .card-title a,
.blog-post-item .card-title a {
  font-family: var(--ks-serif) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--ks-ink) !important;
  line-height: 1.3 !important;
}
.card .card-title a:hover,
.blog-post-item .card-title a:hover {
  color: var(--ks-navy) !important;
}

/* Card excerpt */
.card .card-description,
.blog-post-item .card-description {
  font-family: var(--ks-serif) !important;
  font-size: 14px !important;
  font-style: italic !important;
  color: var(--ks-ink4) !important;
  line-height: 1.7 !important;
}

/* Card category label */
.card .card-category,
.blog-post-item .card-category {
  font-family: var(--ks-body) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--ks-navy) !important;
}

/* =====================================================
   9. SINGLE POST
   ===================================================== */
.single-post .entry-header {
  border-bottom: 1px solid var(--ks-rule);
  padding-bottom: 2rem;
  margin-bottom: 2.5rem;
}

/* Post meta (date, author, category) */
.entry-meta,
.entry-meta a,
.post-meta {
  font-family: var(--ks-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ks-navy) !important;
}

/* Blockquotes */
.entry-content blockquote,
blockquote {
  border-left: 3px solid var(--ks-navy) !important;
  background: var(--ks-cream) !important;
  padding: 1.25rem 1.5rem !important;
  margin: 2rem 0 !important;
  font-family: var(--ks-serif) !important;
  font-style: italic !important;
  font-size: 19px !important;
  color: var(--ks-ink3) !important;
  border-radius: 0 4px 4px 0 !important;
}

/* =====================================================
   10. SIDEBAR & WIDGETS
   ===================================================== */
.widget-title,
.widgettitle {
  font-family: var(--ks-body) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ks-ink5) !important;
  border-bottom: 1px solid var(--ks-rule) !important;
  padding-bottom: 0.6rem !important;
  margin-bottom: 1rem !important;
}

/* =====================================================
   11. FOOTER
   ===================================================== */
footer,
.footer-wrapper,
#footer {
  background-color: var(--ks-navy) !important;
  color: rgba(255,255,255,0.55) !important;
}

footer a,
.footer-wrapper a,
#footer a {
  color: rgba(255,255,255,0.55) !important;
  font-family: var(--ks-serif) !important;
  transition: color 0.15s !important;
}
footer a:hover,
.footer-wrapper a:hover {
  color: #fff !important;
}

footer .widget-title,
footer .widgettitle {
  font-family: var(--ks-body) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.4) !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}

/* Copyright bar */
.footer-bottom,
.sub-footer {
  background: var(--ks-navy) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  font-family: var(--ks-mono) !important;
  font-size: 10px !important;
  color: rgba(255,255,255,0.25) !important;
  letter-spacing: 0.07em !important;
}

/* =====================================================
   12. MISCELLANEOUS
   ===================================================== */
/* Horizontal rules */
hr {
  border-color: var(--ks-rule) !important;
}

/* Category / tag pills */
.post-categories a,
.post-tags a,
.cat-links a,
.tags-links a {
  background: var(--ks-navy-pale) !important;
  color: var(--ks-navy) !important;
  font-family: var(--ks-body) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  border-radius: 3px !important;
  transition: background 0.15s !important;
}
.post-categories a:hover,
.post-tags a:hover,
.cat-links a:hover,
.tags-links a:hover {
  background: var(--ks-navy) !important;
  color: #fff !important;
}

/* Search input */
.search-field,
input[type="search"] {
  border: 1px solid var(--ks-rule) !important;
  border-radius: 4px !important;
  font-family: var(--ks-body) !important;
  transition: border-color 0.15s !important;
}
.search-field:focus,
input[type="search"]:focus {
  border-color: var(--ks-navy) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--ks-navy-pale) !important;
}

/* =====================================================
   13. MOBILE RESPONSIVE
   ===================================================== */
@media (max-width: 768px) {
  body {
    font-size: 15px !important;
  }

  h1, .h1 { font-size: 2rem !important; }
  h2, .h2 { font-size: 1.6rem !important; }
  h3, .h3 { font-size: 1.3rem !important; }

  .entry-content,
  .entry-content p {
    font-size: 17px !important;
    line-height: 1.75 !important;
  }

  .entry-content blockquote,
  blockquote {
    font-size: 17px !important;
    padding: 1rem 1.25rem !important;
  }

  .navbar-brand,
  .site-title a {
    font-size: 18px !important;
  }
}