/*
Theme Name:   Carylldine (Astra Child)
Theme URI:    https://carylldine.co.za/
Description:  Custom child theme for Carylldine — procurement/ICT partner rebuild. Requisition-slip visual identity: ink navy, paper, brass, forge teal.
Author:       Carylldine
Template:     astra
Version:      1.0.0
Text Domain:  carylldine-child
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Astra reads its own theme through CSS variables on :root. Overriding
   these here reskins the whole site (header, buttons, links, headings)
   without fighting Astra's specificity. Anything Astra doesn't already
   theme through variables is styled directly further down.
   ========================================================================== */

:root{
  /* ---- Brand palette ---- */
  --cd-navy:        #16213E;   /* primary — header, nav, footer, dark sections */
  --cd-navy-deep:    #0E1730;  /* hover/active state of navy */
  --cd-paper:        #F6F3EC; /* page background — warm, not stark white */
  --cd-paper-dim:    #EDE8DB; /* card / alt-section background */
  --cd-brass:        #B8863B; /* accent — CTAs, numerals, active states */
  --cd-brass-deep:   #9A6E2C; /* brass hover */
  --cd-teal:         #2F5D62; /* secondary — tags, links, sector chips */
  --cd-charcoal:     #2A2A28; /* body text */
  --cd-charcoal-soft:#5B5B56; /* secondary text */
  --cd-line:         #D8D0BC; /* hairline rule color on paper */
  --cd-line-on-navy: rgba(246,243,236,0.18);

  /* ---- Type ---- */
  --cd-font-display: "Source Serif 4", Georgia, serif;
  --cd-font-body:    "IBM Plex Sans", -apple-system, Segoe UI, sans-serif;
  --cd-font-mono:    "IBM Plex Mono", "Courier New", monospace;

  /* ---- Astra global color variable overrides ---- */
  --ast-global-color-0: var(--cd-navy);   /* Astra "Theme Color 1" */
  --ast-global-color-1: var(--cd-navy-deep);
  --ast-global-color-2: var(--cd-charcoal);
  --ast-global-color-3: var(--cd-charcoal-soft);
  --ast-global-color-4: var(--cd-paper);
  --ast-global-color-5: #FFFFFF;
  --ast-global-color-6: var(--cd-brass);
  --ast-global-color-7: var(--cd-teal);
  --ast-global-color-8: var(--cd-line);
  --ast-global-color-9: var(--cd-navy);

  --ast-global-font-family: var(--cd-font-body);
}

/* ==========================================================================
   2. BASE / TYPOGRAPHY
   ========================================================================== */

body{
  background: var(--cd-paper);
  color: var(--cd-charcoal);
  font-family: var(--cd-font-body);
  font-size: 17px;
  line-height: 1.65;
}

h1, h2, h3, h4,
.entry-title,
.ast-oembed-container + h2{
  font-family: var(--cd-font-display);
  color: var(--cd-navy);
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1{ font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.08; }
h2{ font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.18; }
h3{ font-size: 1.25rem; }

a{ color: var(--cd-teal); }
a:hover{ color: var(--cd-brass-deep); }

/* Eyebrow-style small labels ("Why Carylldine", "ICT, office supplies...") */
.ast-shortcode-heading .ast-dynamic-heading-subtitle,
.taxonomy-title{
  font-family: var(--cd-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  color: var(--cd-teal);
}

/* ==========================================================================
   3. HEADER / NAVIGATION
   ========================================================================== */

.site-header,
.main-header-bar{
  background-color: var(--cd-navy) !important;
  border-bottom: none !important;
}

.main-header-bar .main-navigation ul li > a,
.ast-header-account,
.site-header .site-title,
.site-header .site-description{
  color: #F6F3EC !important;
  font-family: var(--cd-font-body);
  font-weight: 500;
}

.main-header-bar .main-navigation ul li > a:hover,
.main-header-bar .main-navigation ul li.current-menu-item > a{
  color: var(--cd-brass) !important;
}

/* Underline-on-hover instead of Astra's default bg-highlight, reads more
   like a document index than a webapp nav */
.main-header-bar .main-navigation ul li > a{
  position: relative;
  padding-bottom: 4px;
}
.main-header-bar .main-navigation ul li > a::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--cd-brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.main-header-bar .main-navigation ul li > a:hover::after,
.main-header-bar .main-navigation ul li.current-menu-item > a::after{
  transform: scaleX(1);
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

.ast-button,
button,
a.button,
.wp-block-button__link{
  background-color: var(--cd-brass) !important;
  color: var(--cd-navy) !important;
  border: none !important;
  border-radius: 2px !important;
  font-family: var(--cd-font-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.85em 1.6em !important;
  transition: background-color .2s ease, transform .15s ease;
}
.ast-button:hover,
button:hover,
a.button:hover,
.wp-block-button__link:hover{
  background-color: var(--cd-brass-deep) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* Secondary / outline CTA (e.g. "Explore our services") */
.ast-button.ast-outline,
a.button.outline{
  background: transparent !important;
  color: var(--cd-paper) !important;
  border: 1.5px solid var(--cd-line-on-navy) !important;
}
.ast-button.ast-outline:hover{
  border-color: var(--cd-brass) !important;
  color: var(--cd-brass) !important;
}

/* ==========================================================================
   5. SIGNATURE ELEMENT — the requisition slip
   A card styled like a purchase-order stub: perforated top edge, mono
   reference number + status field. Drop the .cd-slip markup (see
   README) around the hero CTA block, testimonials, or the quote CTA.
   ========================================================================== */

.cd-slip{
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--cd-line);
  border-radius: 3px;
  padding: 28px 30px 24px;
  box-shadow: 0 18px 40px -22px rgba(22,33,62,0.35);
  max-width: 380px;
}
.cd-slip::before{
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 10px;
  background-image: radial-gradient(circle, var(--cd-paper) 4px, transparent 4.5px);
  background-size: 18px 10px;
  background-repeat: repeat-x;
  background-position: center top;
}
.cd-slip__ref{
  font-family: var(--cd-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--cd-charcoal-soft);
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed var(--cd-line);
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.cd-slip__status{
  color: var(--cd-teal);
  font-weight: 600;
}
.cd-slip__title{
  font-family: var(--cd-font-display);
  color: var(--cd-navy);
  font-size: 1.15rem;
  margin: 0 0 6px;
}
.cd-slip__body{
  color: var(--cd-charcoal-soft);
  font-size: 0.92rem;
  margin: 0;
}

/* ==========================================================================
   6. STAT / TRUST STRIP (Level 1 · 135% · Since 2018)
   Styled as a document header block rather than icon badges.
   ========================================================================== */

.cd-stat-strip{
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--cd-line-on-navy);
  border-bottom: 1px solid var(--cd-line-on-navy);
  margin: 2rem 0;
}
.cd-stat{
  flex: 1 1 180px;
  padding: 1.1rem 1.4rem;
  border-right: 1px solid var(--cd-line-on-navy);
}
.cd-stat:last-child{ border-right: none; }
.cd-stat__value{
  font-family: var(--cd-font-mono);
  font-size: 1.5rem;
  color: var(--cd-brass);
  display: block;
}
.cd-stat__label{
  font-size: 0.78rem;
  color: var(--cd-paper);
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ==========================================================================
   7. SERVICE / LINE-ITEM CARDS (ICT hardware, Software licensing, ...)
   Numbered like invoice line items — justified by the content itself
   being a catalogue of procurement categories.
   ========================================================================== */

.cd-line-item{
  border-top: 1px solid var(--cd-line);
  padding: 1.6rem 0;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 1rem;
  align-items: start;
}
.cd-line-item:last-child{ border-bottom: 1px solid var(--cd-line); }
.cd-line-item__num{
  font-family: var(--cd-font-mono);
  color: var(--cd-brass);
  font-size: 1.1rem;
}
.cd-line-item__title{
  font-family: var(--cd-font-display);
  color: var(--cd-navy);
  margin: 0 0 4px;
  font-size: 1.1rem;
}
.cd-line-item__desc{
  color: var(--cd-charcoal-soft);
  font-size: 0.94rem;
  margin: 0;
}

/* ==========================================================================
   8. SECTOR TAGS (Government, Education, Retail, ...)
   ========================================================================== */

.cd-tag{
  display: inline-block;
  font-family: var(--cd-font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  color: var(--cd-teal);
  border: 1px solid var(--cd-teal);
  border-radius: 999px;
  padding: 4px 12px;
  margin: 0 6px 8px 0;
}

/* ==========================================================================
   9. SECTIONS ON NAVY (hero, CTA band)
   ========================================================================== */

.cd-section-navy{
  background: var(--cd-navy);
  color: var(--cd-paper);
}
.cd-section-navy h1,
.cd-section-navy h2,
.cd-section-navy h3{
  color: #FFFFFF;
}
.cd-section-navy p{
  color: rgba(246,243,236,0.85);
}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */

footer.site-footer,
.ast-small-footer{
  background: var(--cd-navy-deep) !important;
  color: rgba(246,243,236,0.7) !important;
  font-family: var(--cd-font-body);
}
.ast-small-footer a{ color: var(--cd-paper) !important; }

/* Astra's own footer builder rows are empty (see functions.php note on
   the footer fallback) — collapse their padding so they don't leave a
   blank strip above the .cd-footer-fallback bar */
.site-footer,
.footer-adv,
.ast-builder-footer-row-container,
.ast-footer-overlay{
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

.cd-footer-fallback{
  background: var(--cd-navy-deep);
  padding: 1.1rem 1.5rem;
}
.cd-footer-fallback__inner{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--cd-font-body);
  font-size: 0.85rem;
  color: var(--cd-paper);
}
.cd-footer-fallback__brand{
  color: var(--cd-brass);
  font-weight: 600;
}

/* ==========================================================================
   11. RESPONSIVE / MOBILE POLISH
   ========================================================================== */

@media (max-width: 768px){
  .cd-stat-strip{ flex-direction: column; }
  .cd-stat{ border-right: none; border-bottom: 1px solid var(--cd-line-on-navy); }
  .cd-slip{ max-width: 100%; padding: 22px 20px 18px; }

  /* Tighter section rhythm on small screens */
  .ast-container{ padding-left: 20px !important; padding-right: 20px !important; }

  /* Line-item catalogue: drop the number to its own row above the text
     instead of squeezing a 2-column grid on a narrow screen */
  .cd-line-item{
    grid-template-columns: 1fr;
    padding: 1.3rem 0;
  }
  .cd-line-item__num{ font-size: 0.95rem; }

  h1{ font-size: clamp(1.8rem, 7vw, 2.4rem); }
  body{ font-size: 16px; }
}

/* Tap targets: mobile nav toggle, menu links, and buttons all meet the
   ~44px minimum so they're comfortable to hit on a touchscreen */
.ast-mobile-menu-buttons-minimal .astra-mobile-menu-trigger,
button.menu-toggle{
  min-width: 44px;
  min-height: 44px;
}

@media (max-width: 921px){
  /* Astra's default mobile breakpoint — style the slide-out/collapsed
     menu panel to match the rest of the design instead of default white */
  .ast-header-break-point .main-header-bar .main-navigation{
    background: var(--cd-navy);
  }
  .main-header-bar .main-navigation ul.submenu,
  .main-header-bar .main-navigation ul.ast-submenu{
    background: var(--cd-navy-deep);
  }
  .main-header-bar .main-navigation ul li > a{
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .ast-button, a.button, .wp-block-button__link{
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .main-header-bar .main-navigation ul li > a::after,
  .ast-button{ transition: none; }
}

/* ==========================================================================
   12. HIDE PAGE TITLE BANNERS
   Removes the "Carylldine – 2026 Homepage" / "About Carylldine – 2026" style
   banners visually. The <h1> stays in the HTML (screen-reader + SEO
   friendly) — it just isn't shown, since the logo now carries that role.
   ========================================================================== */

.page-header .entry-title,
.ast-archive-title,
.page .entry-title,
.single .entry-title{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Collapse the now-empty banner strip so it doesn't leave blank space */
.page-header{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

/* ==========================================================================
   13. STICKY / FIXED HEADER — CSS fallback
   Prefer the native toggle: Customize → Header Builder → click the header
   row → "Stick Header" (see README). This block only matters if that
   option isn't available on your Astra version — it's harmless either way.
   ========================================================================== */

.main-header-bar-wrap{
  position: sticky;
  top: 0;
  z-index: 999;
}
.main-header-bar-wrap .main-header-bar{
  box-shadow: 0 6px 18px -10px rgba(22,33,62,0.45);
}