/* Contain The Runway — brand override, layered on top of Furni's style.css.
   Cloned look-and-feel from the live containtherunway.com WordPress site: white body,
   black/Oswald headings, gray/Public Sans body text, green CTA accent, dark nav bar.
   Every rule below reads color through semantic CSS variables so a future re-theme
   only ever touches the :root blocks below — no rule here should hardcode a literal color. */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;700&family=Public+Sans:wght@400;500;700&display=swap');

:root,
:root[data-theme="light"] {
  --bg: #FFFFFF;
  --surface: #F5F6F5;
  --text: #1A1A1A;
  --text-muted: #808080;
  --divider: #E2E2E2;
  --accent: #4AAB10;
  --accent-hover: #3D8F0D;
  --accent-light: #6FCB3A;
  --accent-text: #E9FFDB;
  --nav-bg: #1A1A1A;
  --nav-text: #FFFFFF;
  --icon-dot: rgba(74, 171, 16, 0.15);

  --font-display: 'Oswald', Arial, sans-serif;
  --font-body: 'Public Sans', Arial, sans-serif;
  --font-accent: 'Oswald', Arial, sans-serif;
  --heading-tracking: 0.01em;
}

:root[data-theme="dark"] {
  --bg: #14161A;
  --surface: #1C1F24;
  --text: #F0F0F0;
  --text-muted: rgba(240, 240, 240, 0.6);
  --divider: #2A2E35;
  --accent: #4AAB10;
  --accent-hover: #6FCB3A;
  --accent-light: #6FCB3A;
  --accent-text: #0E0C0A;
  --nav-bg: #0E0F11;
  --nav-text: #F0F0F0;
  --icon-dot: rgba(74, 171, 16, 0.25);

  --font-display: 'Oswald', Arial, sans-serif;
  --font-body: 'Public Sans', Arial, sans-serif;
  --font-accent: 'Oswald', Arial, sans-serif;
  --heading-tracking: 0.01em;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-muted);
}

h1, h2, h3, .section-title, .site-title, .product-title, .footer-logo {
  font-family: var(--font-display) !important;
  letter-spacing: var(--heading-tracking);
  color: var(--text);
  text-transform: uppercase;
}

/* Furni's original CSS targets these with higher specificity than a bare class
   override can beat (e.g. `.product-section .product-item h3`), or never gave
   them a color at all (`.section-title`) — !important makes brand.css authoritative. */
.section-title {
  color: var(--text) !important;
}

h1 { font-weight: 700; }
h2, h3 { font-weight: 700; }

blockquote, .accent-quote {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--accent);
}

/* Feature icons (Home/About/Services) — inline SVG, see render_feature_icon() */
.feature .icon:before {
  background: var(--icon-dot) !important;
}
.feature-icon-svg {
  width: 100%;
  height: 100%;
}
.feature-icon-svg path {
  stroke: var(--accent);
}
.feature-icon-svg path[fill]:not([fill="none"]) {
  fill: var(--accent);
}

/* Contact page icon circles (already inline SVG using currentColor) */
.service-icon {
  background: var(--accent) !important;
  color: var(--accent-text) !important;
}

.navbar-logo {
  max-height: 40px;
  width: auto;
}
.footer-logo-img {
  max-height: 48px;
  width: auto;
}

/* Navbar — solid dark bar (institutional, matches the live site's dark header) */
.custom-navbar {
  background: var(--nav-bg) !important;
  border-bottom: 3px solid var(--accent);
}
.custom-navbar .navbar-brand,
.custom-navbar .nav-link {
  color: var(--nav-text) !important;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.custom-navbar .nav-link:hover,
.custom-navbar li.active .nav-link {
  color: var(--accent-light) !important;
}
.theme-toggle-btn {
  background: transparent;
  border: 1px solid var(--nav-text);
  color: var(--nav-text) !important;
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.theme-toggle-btn:hover {
  border-color: var(--accent-light);
  color: var(--accent-light) !important;
}

/* Hero — full-bleed photo with a dark readability overlay, white uppercase headline,
   matching the live site's "Containing Runways For Over A Decade" hero. */
.hero {
  position: relative;
  background: var(--nav-bg);
  border-bottom: 3px solid var(--accent);
  overflow: hidden;
}
.hero .hero-bg-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10, 10, 10, 0.82) 0%, rgba(10, 10, 10, 0.55) 60%, rgba(10, 10, 10, 0.35) 100%);
  z-index: 1;
}
.hero .container {
  position: relative;
  z-index: 2;
}
.hero h1, .hero p {
  color: #FFFFFF;
}
.hero .intro-excerpt {
  padding: 5rem 0;
}

/* Buttons — square corners, bold uppercase, matching the live site's green CTA */
.btn, button, .btn-black {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text) !important;
  border-radius: 0;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.btn:hover, button:hover, .btn-black:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.btn-outline-black, .btn-white-outline, .btn.secondary {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent) !important;
  border-radius: 0;
}
.btn-outline-black:hover, .btn-white-outline:hover, .btn.secondary:hover {
  background: var(--accent);
  color: var(--accent-text) !important;
}
.btn-secondary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-text) !important;
  border-radius: 0;
}

/* Product cards / repeatable-item sections */
.product-item, .product-card,
.untree_co-section, .product-section, .why-choose-section {
  background: transparent;
  color: var(--text-muted);
}
.product-title, .product-price {
  color: var(--text) !important;
}
.product-item:hover .product-title,
.product-card:hover h3 {
  color: var(--accent);
}

/* Cards / surfaces */
.site-blocks-table, .border, .card {
  background: var(--surface) !important;
  border-color: var(--divider) !important;
  color: var(--text-muted);
}
.site-blocks-table td {
  color: var(--text-muted) !important;
}

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

/* Footer */
.footer-section {
  background: var(--nav-bg) !important;
  border-top: 3px solid var(--accent);
}
.footer-section, .footer-section p, .footer-section a {
  color: var(--nav-text) !important;
}
.footer-section a:hover {
  color: var(--accent-light) !important;
}
.footer-section .copyright {
  border-color: var(--divider) !important;
  color: rgba(255, 255, 255, 0.5) !important;
}
.footer-section .copyright a {
  color: var(--accent-light) !important;
}

/* Forms */
.form-control {
  background: var(--surface);
  border-color: var(--divider);
  color: var(--text);
}
.form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.2rem var(--icon-dot);
}

/* Carousels (Slick) — generic, usable anywhere via [data-carousel] */
[data-carousel] .carousel-slide {
  position: relative;
  aspect-ratio: var(--slide-ratio, 16 / 9);
  overflow: hidden;
}
[data-carousel] .carousel-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
[data-carousel] .slick-dots li button:before {
  color: var(--accent);
  opacity: 0.5;
}
[data-carousel] .slick-dots li.slick-active button:before {
  color: var(--accent);
  opacity: 1;
}
[data-carousel] .slick-prev:before,
[data-carousel] .slick-next:before {
  color: var(--accent);
}
[data-carousel].slick-initialized {
  visibility: visible;
}

/* Focal-point images — fixed ratio box + object-fit:cover so object-position (set inline) matters */
.focal-4x3 {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
}
.focal-team-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0;
}
.focal-avatar-sm {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
}
.focal-blog-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}