/* Quantum Toolset - Clean Generic CSS with Navbar */

/* Reset & Base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Inter', sans-serif;
  background-color: #F9FAFB;
  color: #111827;
  line-height: 1.6;
}
a {
  color: #0D9488;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
h1, h2, h3 {
  font-weight: 600;
  margin-bottom: 1rem;
}
p {
  margin-bottom: 1rem;
}

.left-aligned ol {
  list-style-position: inside;
  padding-left: 0;
}

.centered-list {
  max-width: 700px;
  margin: 0 auto;
  text-align: left;
}

.centered-list ol {
  list-style-position: inside;
  padding-left: 0;
  margin: 0;
}

.centered-list li {
  margin-bottom: 1rem;
  line-height: 1.6;
}


/* Layout */
section {
  padding: 2.5rem 1rem;
  text-align: center;
  max-width: 960px;
  margin: 0 auto;
}
.section-light {
  background-color: #E5E7EB;
}
.section-muted {
  background-color: #F3F4F6;
}
header, footer {
  background-color: #E5E7EB;
  padding: 1.5rem 1rem;
  text-align: center;
}
main {
  padding-bottom: 2rem;
}

html {
  overflow-y: scroll;
}

/* Buttons */
.btn {
  background-color: #0D9488;
  color: white;
  padding: 0.625rem 1.25rem;
  border-radius: 6px;
  font-size: 1rem;
  display: inline-block;
  transition: background 0.3s;
}
.btn:hover {
  background-color: #0F766E;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}

.card {
  background: white;
  padding: 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  text-align: center;
  flex: 1 1 280px;
}

.card .btn {
  margin-top: auto;
  align-self: center;
}

/* Navbar */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background-color: #F3F4F6;
  border-bottom: 1px solid #D1D5DB;
  padding: 0.5rem 1rem;
}

.navbar-top {
  display: flex;
  padding-top: 0.75rem;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

.menu-toggle {
  display: none;
}

@media (max-width: 640px) {
  .menu-toggle {
    display: block;
  }
}


.logo {
  font-weight: 700;
  font-size: 1.25rem;
  color: #0D9488;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.spacer {
  width: 1.5rem; /* Same width as .menu-toggle to balance layout */
}

.checklist {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.checklist li {
  margin-bottom: 0.5rem;
}

/* Menu list */
.navbar-menu {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.navbar-menu li a {
  font-weight: 500;
  color: #111827;
  text-decoration: none;
}
.navbar-menu li a:hover {
  color: #0D9488;
}

.bulletless-list-centered {
  list-style: none;
  padding-left: 1.2rem;
  text-align: center;
}

./* === Blog readability overrides === */

/* 1) Don't center every section by default */
section { text-align: left; }

/* Keep hero/intro sections centered if you like */
.section-light,
.section-muted,
header,
footer { text-align: center; }

/* 2) Container width for blog pages */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* 3) Card still centered, but its contents read like an article */
.blog-card {
  max-width: 900px;           /* overall card width */
  margin: 0 auto;
  text-align: left;           /* stop centering inside the card */
  padding: 2rem;              /* a bit more breathing room */
}

/* 4) Constrain the text column inside the card */
.blog-content {
  max-width: 760px;           /* ideal reading width */
  margin: 0 auto;             /* centers the text column in the card */
  font-size: 1.02rem;
  line-height: 1.75;
}

/* 5) Headings spacing & step separation */
.blog-content h1 { 
  font-size: 2rem; 
  line-height: 1.25; 
  margin-bottom: .75rem; 
}
.blog-content .tagline {
  color: #4B5563;
  margin-bottom: 1.5rem;
}

.blog-content h2 {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #E5E7EB;  /* subtle divider between steps */
}
.blog-content h2:first-of-type { border-top: 0; padding-top: 0; }

/* 6) Lists: use normal bullets, consistent indent */
.blog-post ul {
  list-style: disc outside;
  margin: .25rem 0 1rem 0;
  padding-left: 1.25rem;
}
.blog-post ul li::before { content: none; } /* remove custom "• " */
.blog-post li { margin: .25rem 0 .5rem; }

/* Optional: two-column lists on wide screens */
@media (min-width: 900px) {
  .list-two-col { 
    columns: 2; 
    column-gap: 2rem; 
  }
}

/* 7) Callouts that pop without shouting */
.callout {
  border: 1px solid #E5E7EB;
  background: #F9FAFB;
  border-left: 4px solid #0D9488;
  padding: .875rem 1rem;
  border-radius: .5rem;
  margin: 1rem 0 1.5rem;
}
.callout strong { color: #0F766E; }

/* 8) Code & hr polish */
.blog-content code {
  background: #F3F4F6;
  padding: .1rem .35rem;
  border-radius: .25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .95em;
}
.blog-content hr {
  border: 0;
  border-top: 1px solid #E5E7EB;
  margin: 2rem 0 1rem;
}


.container.narrow { max-width: 980px; margin: 0 auto; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 820px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* Panels used inside the main card */
.panel {
  background: #FFFFFF;
  border: 1px solid #E5E7EB; /* slate-200 */
  border-radius: 12px;
  padding: 1rem;
}

/* Form controls */
form label { display: block; font-weight: 500; margin-bottom: .35rem; }
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form select,
form textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: .6rem .75rem;
  border: 1px solid #D1D5DB; /* gray-300 */
  border-radius: 10px;
  background: #fff;
}
form textarea { min-height: 140px; resize: vertical; }

/* Fieldset/legend tidy */
form fieldset { border: 0; padding: 0; margin: 0; }
form legend { font-weight: 600; margin-bottom: .35rem; }
form .inline-checks label { display: inline-flex; align-items: center; margin-right: 1rem; }

/* Lists inside cards (no weird left indents) */
.left-aligned { list-style-position: inside; padding-left: 0; margin-left: 0; }

/* Nesting: avoid heavy 'card in card' feel */
.card .panel { box-shadow: none; }

/* Required marker */
label .req { color: #DC2626; /* red-600 */ margin-left: .2rem; }

/* Error styles */
.is-invalid {
  border-color: #DC2626 !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.08);
}
.error-msg {
  color: #DC2626;
  font-size: .875rem;
  margin-top: .35rem;
  display: none;
}
.error-msg.show { display: block; }

/* Optional: highlight group heading if any field inside is invalid */
.panel.error h4 { color: #DC2626; }

/* 3-up responsive grid */
.grid-3 {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch; /* ensures all cards stretch to equal height */
}

.grid-3block {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch; /* ensures all cards stretch to equal height */
}
@media (max-width: 1024px) { .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px)  { .grid-3 { grid-template-columns: 1fr; } }

/* if .card has flex rules globally, neutralize inside grid-3 */
.grid-3 .card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.grid-3 .card > *:last-child { margin-top:auto; } /* pushes last button/cta down */

.grid-3block .card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}


/* --- Design tokens --- */
:root{
  --brand: #0D9488;         /* teal */
  --brand-600:#0F766E;
  --ink:#111827;
  --muted:#6B7280;
  --card:#FFFFFF;
  --ring:#E5E7EB;
  --soft:#F9FAFB;
}

/* Eyebrow (tiny label above headings) */
.eyebrow{
  display:inline-block;
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  background:#EFF6F5;
  border:1px solid #DAF0EC;
  border-radius:999px;
  padding:.15rem .5rem;
  margin-bottom:.6rem;
}

/* Section title w/ accent underline */
.h2-accent{
  position:relative;
  padding-bottom:.35rem;
}
.h2-accent::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:60px; height:3px;
  background:linear-gradient(90deg,var(--brand),#22A699);
  border-radius:2px;
}

/* Feature card (use on 1 card per row to add variety) */
.card.feature{
  background: radial-gradient(120% 140% at 0% 0%, #F1FBF9 0%, #FFFFFF 55%);
  border:1px solid #D9F3EF;
}

/* Subtle hover on cards (desktop only) */
@media (hover:hover){
  .grid-3 .card{ transition: transform .18s ease, box-shadow .18s ease; }
  .grid-3 .card:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,.06);
  }
}

/* Pretty check bullets */
.ul-check{ list-style: none; padding-left:0; }
.ul-check li{
  position: relative; padding-left:1.5rem; margin:.35rem 0;
}
.ul-check li::before{
  content:"✓";
  position:absolute; left:0; top:0;
  color:var(--brand);
  font-weight:700;
}

/* Dim secondary text lines inside cards */
.card .subtle{ color:var(--muted); }

/* Pill tags (e.g., “Included”, “Optional”) */
.pill{
  display:inline-block; font-size:.75rem; padding:.2rem .5rem; border-radius:999px;
  border:1px solid #D1FAE5; background:#ECFDF5; color:#065F46;
}
.pill.warn{ border-color:#FDE68A; background:#FFFBEB; color:#92400E; }


/* Gradient button edge highlight */
.btn{
  position:relative;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.06);
}
.btn:active{ transform: translateY(1px); }

/* Divider dots between sections (for big pages) */
.divider-dot{
  display:flex; justify-content:center; gap6: .4rem; margin:1.75rem 0;
}
.divider-dot::before, .divider-dot::after{
  content:""; width:6px; height:6px; border-radius:50%; background:#D1FAE5;
}

label.required::after {
  content: " *";
  color: red;
  font-weight: bold;
}

/* -------- NAV: top-level spacing (desktop + mobile) -------- */
.navbar-menu > li { padding-top: .5rem; padding-left: 1rem; }
.navbar-menu > li:not(:first-child) { padding-left: 0; }

/* Make the Info button look like a link */
.navbar-menu .dropbtn {
  background: none; border: 0; font: inherit; color: inherit;
  cursor: pointer; padding: 0;
}

/* Dropdown base */
.navbar-menu .dropdown { position: relative; padding-bottom: 6px; }
.dropdown-menu {
  position: absolute; top: calc(100% + 2px); left: 0;
  min-width: 180px; margin: 0; list-style: none;
  background: #fff; border: 1px solid #E5E7EB; border-radius: 8px;
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
  padding: .5rem 0; display: none; z-index: 1001;
}
.dropdown-menu a { display: block; padding: .5rem .75rem; white-space: nowrap; }

/* Keep menu open while hovering or focusing within (desktop) */
@media (hover:hover){
  .navbar-menu .dropdown:hover .dropdown-menu { display: block; }
}
.navbar-menu .dropdown:focus-within .dropdown-menu { display: block; }

/* Highlight Info while open/hovered */
.navbar-menu .dropdown:hover > .dropbtn,
.navbar-menu .dropdown:focus-within > .dropbtn {
  background:#F3F4F6; color:#0D9488; border-radius:6px;
}

/* Reset padding INSIDE dropdown so About/Contact/Blog don't shift */
.navbar-menu .dropdown-menu li { padding: 0; }

/* -------- NAV: mobile collapse + dropdown behavior -------- */
@media (max-width: 640px){
  /* Collapsed by default; JS toggles .active */
  .navbar-menu {
    display: none;
    flex-direction: column;
    width: 100%;
    margin-top: .5rem;
    padding: .5rem 1rem;
    background:#F3F4F6;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
  }
  .navbar-menu.active { display: flex !important; }  /* ensure wins */

  /* Mobile item spacing */
  .navbar-menu > li { padding: .5rem 0; padding-left: 0; }

  /* Dropdown opens by tap (class .open set by JS) */
  .navbar-menu .dropdown { width: 100%; padding-bottom: 0; }
  .navbar-menu .dropdown .dropdown-menu { display: none; position: static; box-shadow: none; border: 0; padding: .25rem 0 0; }
  .navbar-menu .dropdown.open .dropdown-menu { display: block; }
  .dropbtn { width: 100%; text-align: left; padding: .25rem 0; }
}