/*
Theme Name: Cape Town Carports
Theme URI: https://capetowncarports.co.za/
Author: Cape Town Carports
Description: Lightweight custom theme for Cape Town Carports. No page builder, no bloat, plain PHP templates, native WordPress menus, and Gutenberg-first content. Built to match the site's captured brand: blue accent, dark charcoal text, Poppins throughout.
Version: 1.0.4
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: ctc
*/

/* ==========================================================================
   Self-hosted font (no Google Fonts request, faster, no third-party call)
   ========================================================================== */
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Kadence Blocks compatibility. Several pages (home, services, about,
   contact, service-areas, awnings, patio-covering, shadeports) still use
   Kadence Blocks (infoboxes, tabs, buttons, accordions) which reference
   --global-paletteN custom properties. The old Kadence theme defined these;
   this custom theme must too, or that content loses its colors entirely.
   Values match the site's actual saved Kadence global palette exactly.
   ========================================================================== */
:root {
  --global-palette1: #2537d4;
  --global-palette2: #2537d4;
  --global-palette3: #242d2d;
  --global-palette4: #3a4646;
  --global-palette5: #5f5f5f;
  --global-palette6: #c5c5c5;
  --global-palette7: #e8e8e8;
  --global-palette8: #f7f7f7;
  --global-palette9: #ffffff;
}

/* ==========================================================================
   Design tokens (mirrors DESIGN.md, keep in sync with theme.json)
   ========================================================================== */
:root {
  --ctc-bg: #FFFFFF;
  --ctc-surface: #F7F7F7;
  --ctc-ink: #242D2D;
  --ctc-ink-strong: #3A4646;
  --ctc-ink-medium: #5F5F5F;
  --ctc-subtle: #E8E8E8;
  --ctc-accent: #2537D4;
  --ctc-accent-dark: #1c2ba3;
  --ctc-white: #FFFFFF;

  --ctc-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ctc-radius-sm: 4px;
  --ctc-radius-md: 8px;

  --ctc-space-sm: 8px;
  --ctc-space-md: 24px;
  --ctc-space-lg: 64px;

  --ctc-container: 1180px;
}

/* ==========================================================================
   Reset (minimal, :where() so component rules always win)
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

:where(html) { scroll-behavior: smooth; }

:where(body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl) { margin: 0; }

:where(ul, ol) { padding: 0; list-style: none; }

:where(img, picture, svg) { max-width: 100%; display: block; }

:where(a) { color: inherit; text-decoration: none; }

:where(button, input, textarea, select) { font: inherit; color: inherit; }

/* ==========================================================================
   Base
   ========================================================================== */
html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  max-width: 100vw;
  font-family: var(--ctc-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ctc-ink);
  background: var(--ctc-bg);
  -webkit-font-smoothing: antialiased;
}

/* Wide tables (e.g. spec sheets) scroll within themselves on small screens
   instead of forcing the whole page wider than the viewport. */
@media (max-width: 599px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

h1, h2, h3, h4 {
  font-family: var(--ctc-font);
  font-weight: 700;
  color: var(--ctc-ink);
  line-height: 1.2;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.2rem; }

p { color: var(--ctc-ink-strong); }

a { transition: color 0.15s ease, opacity 0.15s ease; }

.ctc-container {
  max-width: var(--ctc-container);
  margin-inline: auto;
  padding-inline: var(--ctc-space-md);
}

/* Buttons: matches the accent-fill pattern used across all site content */
.ctc-btn,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: var(--ctc-radius-md);
  background: var(--ctc-accent);
  color: var(--ctc-white) !important;
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
}
.ctc-btn:hover,
.wp-block-button__link:hover {
  background: var(--ctc-accent-dark);
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--ctc-accent) !important;
  border: 2px solid var(--ctc-accent);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--ctc-accent);
  color: var(--ctc-white) !important;
}

/* ==========================================================================
   Kadence "global inherit" and "global fill" buttons (no explicit text
   color set on the block for their default state) rely on a site-wide
   button default the old Kadence theme used to provide. On this site every
   instance is a solid blue-fill button, so the fix is a direct white-text
   override rather than leaving it to fall back to the page's default ink
   color. Their own hover/focus states already set contrasting colors
   correctly, so this only touches the default (non-hover) state.
   ========================================================================== */
a.kb-button.kb-btn-global-inherit,
a.kb-button.kb-btn-global-inherit .kt-btn-inner-text,
a.kb-button.kb-btn-global-fill,
a.kb-button.kb-btn-global-fill .kt-btn-inner-text {
  color: #ffffff !important;
}

a.kb-button.kb-btn-global-fill:hover,
a.kb-button.kb-btn-global-fill:hover .kt-btn-inner-text,
a.kb-button.kb-btn-global-fill:focus,
a.kb-button.kb-btn-global-fill:focus .kt-btn-inner-text {
  color: #000000 !important;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */
.screen-reader-text {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.skip-link:focus {
  position: fixed;
  left: var(--ctc-space-sm);
  top: var(--ctc-space-sm);
  z-index: 999;
  background: var(--ctc-accent);
  color: var(--ctc-white);
  padding: 10px 16px;
  border-radius: var(--ctc-radius-sm);
}

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.ctc-header {
  border-bottom: 1px solid var(--ctc-subtle);
  background: var(--ctc-white);
  position: sticky;
  top: 0;
  z-index: 100;
}

.ctc-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ctc-space-md);
  padding-block: var(--ctc-space-sm);
}

.ctc-logo img {
  max-height: 56px;
  width: auto;
}

.ctc-logo {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ctc-ink);
}

.ctc-nav {
  display: flex;
  align-items: center;
  gap: var(--ctc-space_lg, 32px);
}

.ctc-nav ul {
  display: flex;
  gap: 28px;
  align-items: center;
}

.ctc-nav a {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ctc-ink-strong);
}

.ctc-nav a:hover { color: var(--ctc-accent); }

/* Submenus (e.g. Services > Patio Covering, Window Awnings, ...) */
.ctc-nav .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ctc-nav .menu-item-has-children > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ctc-nav .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
}

@media (min-width: 900px) {
  .ctc-nav > ul > li { position: relative; }

  .ctc-nav .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: -12px;
    background: var(--ctc-white);
    border: 1px solid var(--ctc-subtle);
    border-radius: var(--ctc-radius-md);
    box-shadow: 0 12px 28px rgba(36,45,45,0.12);
    min-width: 220px;
    padding: 8px;
    z-index: 20;
  }

  .ctc-nav > ul > li:hover > .sub-menu,
  .ctc-nav > ul > li:focus-within > .sub-menu,
  .ctc-nav > ul > li.ctc-submenu-open > .sub-menu {
    display: block;
  }

  .ctc-nav .sub-menu a {
    display: block;
    padding: 10px 12px;
    border-radius: var(--ctc-radius-sm);
    white-space: nowrap;
    font-weight: 400;
  }

  .ctc-nav .sub-menu a:hover { background: var(--ctc-surface); color: var(--ctc-accent); }
}

@media (max-width: 899px) {
  .ctc-nav .menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .ctc-nav .menu-item-has-children > a { flex: 1; }

  .ctc-submenu-toggle {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--ctc-ink);
  }

  .ctc-submenu-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
  }

  .ctc-submenu-open .ctc-submenu-toggle svg { transform: rotate(180deg); }

  .ctc-nav .sub-menu {
    flex-basis: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    padding-left: 16px;
  }

  .ctc-nav .ctc-submenu-open .sub-menu {
    max-height: 400px;
    margin-top: 8px;
  }

  .ctc-nav .sub-menu li { margin-top: 12px; }
  .ctc-nav .sub-menu a { font-size: 0.9rem; color: var(--ctc-ink-medium); }
}

.ctc-nav-toggle {
  display: inline-flex;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}

.ctc-nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ctc-ink);
  margin: 5px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (min-width: 900px) {
  .ctc-nav-toggle { display: none; }
}

@media (max-width: 899px) {
  .ctc-nav {
    position: fixed;
    inset: 0 0 0 30%;
    background: var(--ctc-white);
    flex-direction: column;
    align-items: flex-start;
    padding: 96px var(--ctc-space-md) var(--ctc-space-md);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    box-shadow: -8px 0 24px rgba(0,0,0,0.08);
  }
  .ctc-nav.is-open { transform: translateX(0); }
  .ctc-nav ul { flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; }
  .ctc-nav .ctc-btn { margin-top: var(--ctc-space-md); }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.ctc-footer {
  background: var(--ctc-ink);
  color: var(--ctc-subtle);
  padding-block: var(--ctc-space-lg) var(--ctc-space-md);
  margin-top: var(--ctc-space-lg);
}

.ctc-footer__logo {
  display: inline-block;
  background: var(--ctc-white);
  padding: 12px 16px;
  border-radius: var(--ctc-radius-md);
}

.ctc-footer__logo img {
  max-height: 48px;
  width: auto;
  display: block;
}

.ctc-footer a { color: var(--ctc-subtle); }
.ctc-footer a:hover { color: var(--ctc-white); }

.ctc-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ctc-space-lg);
}

@media (min-width: 780px) {
  .ctc-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

.ctc-footer__nav ul { display: flex; flex-direction: column; gap: 10px; }

.ctc-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: var(--ctc-space-lg);
  padding-top: var(--ctc-space-md);
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ctc-space-sm);
  color: var(--ctc-ink-medium);
}

/* ==========================================================================
   Blog index / archive cards (index.php)
   ========================================================================== */
.ctc-post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ctc-space-md);
  padding-block: var(--ctc-space-lg);
}

@media (min-width: 780px) {
  .ctc-post-grid { grid-template-columns: repeat(3, 1fr); }
}

.ctc-post-card {
  border: 1px solid var(--ctc-subtle);
  border-radius: var(--ctc-radius-md);
  padding: var(--ctc-space-md);
}

.ctc-post-card h2 { font-size: 1.15rem; margin-bottom: 8px; }
.ctc-post-card h2 a:hover { color: var(--ctc-accent); }
.ctc-post-card .ctc-excerpt { color: var(--ctc-ink-medium); font-size: 0.95rem; }

/* ==========================================================================
   Single post / page content wrapper
   ========================================================================== */
.ctc-content {
  padding-block: var(--ctc-space-md);
}

.ctc-content .wp-block-group { max-width: 100%; }

/* Gutenberg content blocks used across the site already carry their own
   inline colors/spacing; this just makes sure default (unstyled) blocks in
   future posts inherit sane typography. */
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2, .entry-content h3 { margin-top: 1.6em; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content a:not(.wp-block-button__link) { color: var(--ctc-accent); text-decoration: underline; }

/* 404 */
.ctc-404 { text-align: center; padding-block: var(--ctc-space-lg); }