/* This is the stylesheet for the main portal. */

:root {
  /* Color Palette */
  --default-light: #f0ebe8;
  --default-dark: #302f2e;
  --primary-light: #b8b2e6;
  --primary-dark: #160b74;
  --secondary-light: #ffa456;
  --secondary-dark: #753700;
  --highlight-light: #ffe78f;
  --highlight-dark: #806400;
  --accent-light: #95d7db;
  --accent-dark: #006065;

  /* Light Theme (Default) */
  --default-fg: var(--default-dark);
  --default-bg: var(--default-light);
  --primary-fg: var(--primary-dark);
  --primary-bg: var(--primary-light);
  --secondary-fg: var(--secondary-dark);
  --secondary-bg: var(--secondary-light);
  --highlight-fg: var(--highlight-dark);
  --highlight-bg: var(--highlight-light);
  --accent-fg: var(--accent-dark);
  --accent-bg: var(--accent-light);

  --guide-rail: rgba(0, 0, 0, 0.05);

  /* Other Variables */
  --xs: 0.5rem;
  --s: 1rem;
  --m: 1.5rem;
  --l: 2rem;
  --xl: 3rem;
  --xxl: 5rem;

  /* https://fonts.google.com/specimen/Architects+Daughter */
  --font-hand: 'Architects Daughter', cursive;

  /* https://fonts.google.com/specimen/Saira+condensed/ */
  --font-title: 'Saira Condensed', sans-serif;

  /* https://fonts.google.com/specimen/Atkinson+Hyperlegible+Next */
  --font-default: 'Atkinson Hyperlegible Next', sans-serif;

  /* https://fonts.google.com/specimen/Source+Code+Pro */
  --font-mono: 'Source Code Pro', monospace;
}

html {
  overflow-y: scroll; /* Prevent layout shift between pages */
}

html[data-theme='dark'] {
  --default-fg: var(--default-light);
  --default-bg: var(--default-dark);
  --primary-fg: var(--primary-light);
  --primary-bg: var(--primary-dark);
  --secondary-fg: var(--secondary-light);
  --secondary-bg: var(--secondary-dark);
  --highlight-fg: var(--highlight-light);
  --highlight-bg: var(--highlight-dark);
  --accent-fg: var(--accent-light);
  --accent-bg: var(--accent-dark);

  --guide-rail: rgba(255, 255, 255, 0.05);
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-default);
  background-color: var(--default-bg);
  color: var(--default-fg);
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-size: 1.125rem;
}

h1, h2, h3, h4, h5, h6, h7 {
  font-family: var(--font-title);
  font-weight: 400; /* Lighter weight for all headings */
}

/* SVG Styling Fixes */
svg {
  color: var(--default-fg);
  fill: none;
}
/* Icons should inherit color and have no fill */
.card-icon svg path, 
.card-icon svg circle, 
.card-icon svg rect, 
.card-icon svg polyline, 
.card-icon svg line,
.theme-btn svg path,
.theme-btn svg circle,
.theme-btn svg rect,
.theme-btn svg polyline,
.theme-btn svg line,
.user-btn svg path,
.user-btn svg circle,
.user-btn svg rect,
.user-btn svg polyline,
.user-btn svg line,
.card-image svg path,
.card-image svg circle,
.card-image svg rect,
.card-image svg polyline,
.card-image svg line {
  stroke: currentColor;
  fill: none !important;
}

.label {
  font-family: var(--font-title);
}

.htmx-indicator {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(
    255,
    255,
    255,
    0.8
  ); /* Light semi-transparent overlay */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* Ensure it's on top of everything */
  opacity: 0;
  pointer-events: none; /* Allow clicks to pass through when not visible */
  transition: opacity 200ms ease-in; /* Smooth fade-in/out */
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
  pointer-events: auto; /* Block clicks when visible */
}

.htmx-indicator::after {
  content: '';
  border: 4px solid var(--highlight-color-lt);
  border-top: 4px solid var(--highlight-color-bg);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* =========================================
   Added Styles for Sullux Site
   ========================================= */

/* Site Frame (Guide Rails) */
.site-frame {
  max-width: calc(var(--xxl) * 16); /* ~80rem / 1280px */
  margin: 0 auto;
  padding: 0 var(--m);
  width: 100%;
  box-sizing: border-box;
  border-left: 1px solid var(--guide-rail);
  border-right: 1px solid var(--guide-rail);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#content-area {
    flex: 1; /* Ensure main content grows to fill space */
}

/* Header */
#main-header {
  padding: var(--s) 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--default-bg);
}
#main-header > .container { /* Target the specific container inside header */
  border-bottom: 1px solid var(--guide-rail);
  padding-bottom: var(--s); /* Add spacing */
}
#main-header > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
/* Logo Hover Effect */
#main-header > div > a {
  display: inline-block;
  transition: transform 0.2s;
}
#main-header > div > a:hover {
  transform: translateY(-2px);
}
#main-header > div > a > svg {
  height: var(--xl);
  width: auto;
}
.main-nav {
  display: flex;
  gap: var(--l);
  flex-wrap: wrap;
  align-items: center;
}
.main-nav a {
  text-decoration: none;
  color: var(--default-fg);
  font-family: var(--font-default);
  font-size: var(--m);
  font-weight: normal;
}
.main-nav a:hover {
  color: var(--primary-fg);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--xs); /* Reduced from var(--s) */
}

/* Footer */
.main-footer {
  padding: var(--xl) 0;
  margin-top: var(--xxl);
  text-align: center;
  background-color: var(--default-fg);
  color: var(--default-bg);
  /* The footer is inside site-frame, so it respects the rails. */
}
.main-footer svg path, .main-footer svg circle, .main-footer svg rect {
    stroke: var(--default-bg);
}
.footer-bottom svg {
  height: var(--xl);
  margin-top: var(--m);
}

/* Typography & Elements */
a {
  color: var(--primary-fg);
}
p {
  line-height: 1.6;
}

/* Buttons */
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 8rem; /* Reduced from 10rem */
  padding: 0.5rem 1.25rem;
  border: 2px solid transparent;
  border-radius: 4px;
  text-decoration: none;
  font-family: var(--font-title);
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 1.1rem;
}
.btn-primary {
  background-color: var(--primary-bg);
  color: var(--primary-fg);
  border-color: var(--primary-fg);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.btn-secondary {
  background-color: var(--secondary-bg);
  color: var(--secondary-fg);
  border-color: var(--secondary-fg);
}
.btn-secondary:hover {
  background-color: var(--secondary-fg);
  color: var(--secondary-bg);
}
.btn-accent {
  background-color: var(--accent-bg);
  color: var(--accent-fg);
  border-color: var(--accent-fg);
}

/* Theme Switcher */
.theme-switcher {
  display: flex;
  gap: 0; /* Remove gap for grouped look */
}
.theme-btn, .user-btn {
  border: 1px solid var(--default-fg);
  border-radius: 4px;
  cursor: pointer;
  padding: 0; /* Remove padding to enforce strict size */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  transition: all 0.2s;
  text-decoration: none;
  color: var(--default-fg);
  box-sizing: border-box; /* Strict sizing */
}
.theme-btn:hover, .user-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  color: var(--primary-fg); /* Ensure hover color applies */
}
.user-btn {
  margin-left: var(--xs); /* Reduced margin */
}
.theme-btn svg, .user-btn svg {
  width: 1.2rem; /* Reverted to 1.2rem */
  height: 1.2rem;
}

/* Theme Button Selectors */
#theme-light {
    background-color: var(--default-light);
}
#theme-light svg, #theme-light svg path, #theme-light svg circle, #theme-light svg line, #theme-light svg rect, #theme-light svg polyline {
    stroke: var(--default-dark);
}

#theme-dark {
    background-color: var(--default-dark);
}
#theme-dark svg, #theme-dark svg path, #theme-dark svg circle, #theme-dark svg line, #theme-dark svg rect, #theme-dark svg polyline {
    stroke: var(--default-light);
}

#theme-system {
    background-color: var(--default-bg);
}
#theme-system svg, #theme-system svg rect, #theme-system svg line, #theme-system svg path, #theme-system svg circle, #theme-system svg polyline {
    stroke: var(--primary-fg);
}

/* User Button (Merged above) */

/* Hero & Tagline */
.hero-container {
    padding: var(--xl) 0;
    margin-bottom: var(--l);
    background: transparent;
    border-left: none;
    text-align: left;
}
.hero-content {
    max-width: 800px;
    margin: 0;
}
.hero-content h1 {
    font-size: 2.5rem; /* Reduced from 3rem */
    font-weight: 400; /* Lighter weight */
    margin-bottom: var(--m);
    color: var(--default-fg);
    line-height: 1.1;
}
.tagline {
    font-family: var(--font-default);
    font-size: 1.5rem;
    margin-bottom: var(--l);
    color: var(--secondary-fg);
}

/* Previews & Lists */
.news-preview, .services-preview, .journey-preview, .pricing-preview, .contact-preview {
  margin-bottom: var(--xl);
}
.actions {
  margin-top: var(--m);
  text-align: left;
}
.news-list, .service-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--l);
}

/* Cards */
.news-card, .service-card, .card {
  border: 1px solid var(--default-fg);
  padding: var(--s);
  border-radius: 8px;
  transition: transform 0.2s;
  background-color: var(--default-bg);
  position: relative;
  display: flex;
  flex-direction: column;
}
.news-card:hover, .service-card:hover, .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  cursor: pointer;
  border-color: var(--primary-fg);
}

/* Card Icons & Images */
.card-image {
    width: 100%;
    height: 150px;
    background-color: var(--primary-bg);
    margin-bottom: var(--m);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-image svg {
    width: 100%;
    height: 100%;
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--s);
    color: var(--primary-fg);
}
.card-icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--primary-fg); /* Fallback */
}

.service-card.active {
  background-color: var(--primary-fg);
  color: var(--primary-bg);
  border-color: var(--primary-fg);
  pointer-events: none;
  box-shadow: none;
  transform: none;
}
.service-card.active h3 a {
  color: var(--primary-bg);
  pointer-events: none;
}
.service-card.active p {
  color: var(--primary-bg);
}
.service-card.active .card-icon {
  color: var(--primary-bg);
}
.service-card.active .card-icon svg,
.service-card.active .card-icon svg path,
.service-card.active .card-icon svg circle,
.service-card.active .card-icon svg rect,
.service-card.active .card-icon svg polyline,
.service-card.active .card-icon svg line {
    stroke: var(--primary-bg) !important; /* Force Invert */
}

.news-card h3 a, .service-card h3 a, .card h3 a {
  color: var(--secondary-fg);
  text-decoration: none;
}
.news-card h3 a::after, .service-card h3 a::after, .card h3 a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.news-card h3 a:hover, .service-card h3 a:hover, .card h3 a:hover {
  text-decoration: underline;
}
.news-card h3, .service-card h3 {
  margin-top: 0;
}
.date {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--secondary-fg);
  margin-bottom: var(--s);
}

/* Journey Timeline */
.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--m);
  border-left: 2px solid var(--primary-fg);
  padding-left: var(--l);
  margin-left: var(--l);
}
.timeline .card {
  position: relative;
}
.timeline .card h3 {
  color: var(--secondary-fg);
  margin-top: 0;
}
.timeline .card::before {
  content: '';
  position: absolute;
  left: calc(var(--l) * -1 - var(--s) - 1px);
  top: var(--m);
  width: var(--s);
  height: var(--s);
  background-color: var(--primary-fg);
  border-radius: 50%;
  border: 2px solid var(--default-bg);
  z-index: 1;
}
.timeline .card::before {
  left: calc( -1 * (var(--l) + (var(--s) / 2) + 1px) );
}

/* Content Pages */
article {
  padding-top: var(--l);
  max-width: 50rem; /* ~800px for optimal reading line length */
  margin: 0 auto;   /* Center the column */
  padding-bottom: var(--xxl);
}
article h1 {
  font-size: var(--xl);
  margin-bottom: var(--s);
}
article li {
  margin-bottom: 0.5em; /* Breathing room between bullets */
  line-height: 1.6;     /* Comfortable reading height */
}
article ul, article ol {
  padding-left: var(--l); /* Ensure indentation */
}

/* Feature & Price Grids */
.feature-grid, .price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--m);
  margin: var(--l) 0;
}

/* Feature Cards */
.feature-card {
  background-color: var(--default-bg);
  border: 1px solid var(--primary-fg);
  border-left: 4px solid var(--primary-fg);
  padding: var(--m);
  border-radius: 4px;
}
.feature-card h4 {
  margin-top: 0;
  color: var(--primary-fg);
  font-size: 1.1rem;
}

/* Estimate Form */
.estimate-form {
  max-width: 800px;
  margin-top: var(--m);
  background-color: var(--default-bg);
  border: 1px solid var(--default-fg);
  padding: var(--m);
  border-radius: 8px;
}
.form-group {
  margin-bottom: var(--m);
}
.form-group label {
  display: block;
  font-family: var(--font-title);
  margin-bottom: var(--xs);
  color: var(--primary-fg);
}
.form-group input, .form-group textarea {
  width: 100%;
  padding: var(--s);
  border: 2px solid var(--accent-fg);
  border-radius: 4px;
  font-family: var(--font-default);
  background-color: var(--default-bg);
  color: var(--default-fg);
  box-sizing: border-box;
  font-size: 1rem;
}
.form-group textarea {
  min-height: 120px;
}
.form-group input:focus, .form-group textarea:focus {
  outline: none;
  border-color: var(--highlight-fg);
  box-shadow: 0 0 0 4px var(--highlight-bg);
}

/* Pricing Menu Styles */
.pricing-category {
  margin-bottom: var(--xxl);
}
.pricing-category h2 {
  border-bottom: 2px solid var(--secondary-fg);
  padding-bottom: var(--s);
  margin-bottom: var(--m);
  color: var(--primary-fg);
}
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--m);
}
.pricing-table th {
  text-align: left;
  padding: var(--s);
  border-bottom: 2px solid var(--secondary-fg);
  font-family: var(--font-title);
  font-size: 1.1rem;
  color: var(--secondary-fg);
}
.pricing-table td {
  padding: var(--s);
  border-bottom: 1px solid var(--default-fg);
  opacity: 0.9;
  vertical-align: top;
}
/* Zebra Striping */
.pricing-table tbody tr:nth-child(even) {
  background-color: rgba(0,0,0,0.03);
}
html[data-theme='dark'] .pricing-table tbody tr:nth-child(even) {
  background-color: rgba(255,255,255,0.05);
}
.price-col {
  text-align: right;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-weight: bold;
  color: var(--primary-fg);
  width: 150px;
}
.pricing-footer {
  margin-top: var(--xxl);
  text-align: center;
  background-color: var(--primary-bg);
  padding: var(--xl);
  border-radius: 8px;
}
.pricing-footer h3 {
  margin-top: 0;
  color: var(--primary-fg);
}

/* =========================================
   Responsive Design
   ========================================= */

@media (max-width: 1100px) {
  /* Header Refinement */
  #main-header > div {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: 
      "logo actions"
      "nav nav";
    gap: var(--m);
    align-items: center;
  }
  #main-header > div > a {
    grid-area: logo;
    justify-self: start;
  }
  .header-actions {
    grid-area: actions;
    justify-self: end;
    width: auto;
    margin-top: 0;
  }
  .main-nav {
    grid-area: nav;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: var(--s);
    margin: 0; /* Align exactly with logo */
    gap: var(--m);
  }
  .main-nav a {
    font-size: 1rem;
  }
  .btn-primary {
      min-width: auto;
  }

  /* Hero */
  .hero-content h1 {
    font-size: 2.2rem;
  }
  .tagline {
    font-size: 1.2rem;
  }

  /* Services Switcher -> Pills Refinement */
  .service-list {
    display: flex;
    overflow-x: auto;
    gap: var(--s);
    padding-bottom: var(--s);
    margin-bottom: var(--m);
    border-bottom: 1px solid var(--default-fg);
  }
  .service-card {
    flex: 0 0 auto;
    padding: 0; /* Remove padding to let link fill space */
    border-radius: 20px;
    overflow: hidden;
  }
  .service-card h3 {
    margin: 0;
    font-size: 1rem;
  }
  .service-card h3 a {
    display: block;
    padding: var(--xs) var(--m); /* Move padding here */
    color: inherit;
    text-decoration: none;
  }
  .service-card .card-icon, 
  .service-card p {
    display: none;
  }
  .service-card h3 a::after {
      display: none;
  }

  /* Pricing Table */
  .pricing-table thead {
    display: none;
  }
  .price-col {
    width: auto;
  }
}