/* === Domain Forge UI — Single Source of Truth ================================= */

/* TOKENS are now defined in tokens.css */

/* 1) Global text contrast guard */
* { text-shadow: none; } /* avoid faux contrast hacks */

/* Use higher specificity instead of !important */
html body,
html p,
html li,
html h1,
html h2,
html h3,
html h4,
html h5,
html h6,
html a,
html small,
html .muted { 
  opacity: 100%; 
}

/* Global link styles */
/* stylelint-disable-next-line no-descending-specificity -- order constrained by template structure; html selectors must come first for opacity override */
a {
  color: var(--link, var(--df-orange));
  text-decoration: none;
  font-weight: 600;
  transition: 
    color 0.2s ease,
    text-decoration-color 0.2s ease;
}

a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

a:focus-visible {
  outline: 2px solid var(--link, var(--df-orange));
  outline-offset: 2px;
  text-decoration: none;
}

/* Headings + lead copy use solid colors (no alpha) */
/* stylelint-disable-next-line no-descending-specificity -- order constrained by template structure; html selectors must come first for opacity override */
h1, h2, h3, .lead { color: var(--text); }





/* 2) Theme text + link colors (authoritative) */
.theme-dark { 
  --bg:#0E1320; 
  --text:#FFF; 
  --text-muted:var(--df-text-muted-dark); 
  --link:#FF7A00; 
  --border:var(--df-border-dark); 
  --table-border: var(--table-border-dark);
  --table-header-bg: var(--table-header-bg-dark);
  --table-header-color: var(--table-header-color-dark);
  --table-zebra-bg: var(--table-zebra-bg-dark);
  --table-hover-bg: var(--table-hover-bg-dark);

  background:var(--bg); 
  color:var(--text); 
}

.theme-cream { 
  --bg:#FAF3DD; 
  --text:#111; 
  --text-muted:var(--df-text-muted-light); 
  --link:#0E1320; 
  --border:var(--df-border-light); 

  background:var(--bg); 
  color:var(--text); 
}

.theme-light { 
  --bg:#FFF; 
  --text:#111; 
  --text-muted:var(--df-text-muted-light); 
  --link:#0E1320; 
  --border:var(--df-border-light); 

  background:var(--bg); 
  color:var(--text); 
}

.theme-dark a, .theme-cream a, .theme-light a { 
  color: var(--link); 
  text-decoration: underline; 
  text-underline-offset: 2px; 
}



/* Preserve button-style links */
a.btn,
a.button {
  text-decoration: none;
}

/* LAYOUT */
*,*::before,*::after{box-sizing:border-box}

img{
  max-width: 100%;
  height: auto;
  display: block;
} 

svg{
  display: block;
}

.container{
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}
.section{padding-block:clamp(var(--space-xl),5vw,var(--space-2xl))}
.center{text-align:center}

.auto-grid{
  display:grid; gap:var(--space-xl);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  place-items:stretch center;
}





/* TEXT UTILITIES */
.text-muted{color:var(--text-muted)}

.lead{
  font-size: var(--font-lg); 
  color: var(--text-muted);
}

.kicker{
  letter-spacing: .08em; 
  text-transform: uppercase; 
  font-size: var(--font-xs); 
  color: var(--text-muted);
}

/* Base Card */
.card { 
  background: var(--card-bg); 
  color: var(--card-text); 
  border: 1px solid var(--card-border); 
  border-radius: var(--card-radius); 
  box-shadow: var(--card-shadow); 
  padding: var(--card-padding); 
  display: flex; 
  flex-direction: column; 
  gap: var(--card-gap); 
  width: 100%; 
  max-width: var(--card-max-width); 
}

/* Card Typography */
.card h3 { margin: 0; }

.card p, 
.card li, 
.card small { 
  color: var(--card-text); /* Ensure full contrast */
}

.card .text-muted, 
.card .muted { 
  color: var(--text-muted); /* Use theme muted color */
}

.card .actions {
  margin-top: auto;
  display: flex;
  gap: 0.5rem;
}

/* Optional Surface Variants */
.card--surface-light { 
  --card-bg: var(--df-cream);
  --card-text: var(--df-text-dark);
  --card-border: var(--df-border-light);
}

.card--surface-dark { 
  --card-bg: var(--df-slate);
  --card-text: var(--df-text-light);
  --card-border: var(--df-border-dark);
}



/* Button styles moved to components/buttons.css */







/* 6) Utility to prevent accidental low-contrast overrides */

/* Use attribute selector with higher specificity */
html [style*="opacity"],
html .low-contrast { 
  opacity: 100%; 
}



/* Base Table */

/* Base Table */
.table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  color: var(--text);
  background: var(--bg);
  font-size: var(--table-font);
}

.table th,
.table td {
  padding: var(--table-cell-padding);
  text-align: left;
  border-bottom: 1px solid var(--table-border);
}

.table thead th {
  font-weight: 600;
  font-size: var(--table-header-font);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  background: var(--table-header-bg);
  color: var(--table-header-color);
  border-color: var(--table-border);
}

.table tbody tr:nth-child(even) {
  background: var(--table-zebra-bg);
}

.table tbody tr:hover {
  background: var(--table-hover-bg);
}



.theme-light,
.theme-cream {
  --table-border: var(--table-border-light);
  --table-header-bg: var(--table-header-bg-light);
  --table-header-color: var(--table-header-color-light);
  --table-zebra-bg: var(--table-zebra-bg-light);
  --table-hover-bg: var(--table-hover-bg-light);
}

/* Table Wrapper for Responsive Scroll */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--table-radius);
  border: 1px solid var(--table-border-dark);
}

/* Legacy class support - layout only */
.packages-table {
  max-width: 800px;
  margin: 2rem auto;
}

.comparison {
  margin: 1rem 0;
}

/* Banner Components */
.banner {
  position: relative;
  padding: var(--banner-padding);
  border-radius: var(--banner-radius);
  background: var(--banner-gradient);
  color: var(--banner-text);
  box-shadow: var(--banner-shadow);
  overflow: hidden;
}

/* Banner with dark overlay for better text contrast */
.banner--overlay {
  position: relative;
  color: var(--df-white);
}

.banner--overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--banner-overlay);
  z-index: 1;
}

.banner--overlay > * {
  position: relative;
  z-index: 2;
}

/* Hero banner with circuit background */
.banner--hero {
  position: relative;
  padding: var(--banner-padding);
  border-radius: var(--banner-radius);
  background: var(--banner-gradient);
  color: var(--df-white);
  box-shadow: var(--banner-shadow);
  overflow: hidden;
  background-image: url('/images/circuit_background.png');
  background-size: cover;
  background-position: center;
  padding-block: calc(var(--banner-padding) * 2);
  margin-top: 60px; /* Space for fixed navbar */
}

.banner--hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--banner-overlay);
  z-index: 1;
}

.banner--hero > * {
  position: relative;
  z-index: 2;
}

/* CTA banner */
.banner--cta {
  position: relative;
  border-radius: var(--banner-radius);
  background: var(--banner-gradient);
  color: var(--banner-text);
  box-shadow: var(--banner-shadow);
  overflow: hidden;
  text-align: center;
  padding: calc(var(--banner-padding) * 1.5) var(--banner-padding);
}

.banner--cta h2,
.banner--cta h3 {
  color: var(--banner-text);
  margin-bottom: var(--space-lg);
}

/* Text chip for guaranteed contrast */
.banner__chip {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--df-white);
  color: var(--df-navy);
  border-radius: calc(var(--radius) / 2);
  font-weight: 500;
}

/* RESPONSIVE */
@media (width <=700px){
  .section{padding-block:var(--space-xl)}
  
  /* Table responsive */
  .table {
    min-width: 640px; /* Ensure tables scroll on mobile */
  }
  
  .table th,
  .table td {
    padding: 0.5rem var(--table-cell-padding); /* Reduced vertical padding */
  }

  /* Banner responsive */
  .banner {
    padding: calc(var(--banner-padding) * 0.75);
    border-radius: calc(var(--banner-radius) * 0.75);
  }

  .banner--hero {
    padding-block: var(--banner-padding);
  }

  .banner--cta {
    padding: var(--banner-padding);
  }

  .banner__chip {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
  }
}