/* theme scaffold generated by marque */
/* site: D:\VS Projects\marque-new\template */
/* reference theme: comte */
/* reference file: D:\VS Projects\marque-new\template\themes\comte.css */
/*
  This file is organized from two inputs:
  1. selectors discovered from directive render output and directive style blocks
  2. the current reference theme, used as the baseline for token values and shared UI styles
*/

/* Imports */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Fraunces:ital,wght@0,300;0,500;0,700;1,300&family=DM+Sans:wght@300;400;500&display=swap');

/* Theme Tokens */
:root {
  /* Palette */
  --mq-primary: #c85a2a;
  --mq-secondary: #2a5ac8;
  --mq-tertiary: #2ac852;

  /* Surface And Text */
  --mq-background: #f7f5f0;
  --mq-surface: #ffffff;
  --mq-surface-alt: #eeece7;
  --mq-text: #1a1916;
  --mq-muted: #6b6860;
  --mq-border: rgba(0,0,0,0.09);

  /* Navigation */
  --mq-nav-bg: var(--mq-surface);
  --mq-nav-text: var(--mq-text);
  --mq-nav-border: var(--mq-border);
  --mq-nav-active-bg: color-mix(in srgb, var(--mq-primary) 10%, transparent);
  --mq-nav-active-text: var(--mq-text);

  /* Code */
  --mq-code-bg: #1e1c18;
  --mq-code-text: #e8e4dc;
  --mq-code-border: #352c23;
  --mq-code-head-bg: var(--mq-code-bg);
  --mq-code-head-text: var(--mq-code-text);
  --mq-code-copy-border: color-mix(in srgb, var(--mq-code-head-text) 35%, transparent);
  --mq-code-copy-bg: color-mix(in srgb, var(--mq-code-head-text) 8%, transparent);
  --mq-code-copy-bg-hover: color-mix(in srgb, var(--mq-code-head-text) 16%, transparent);

  /* Cards */
  --mq-card-bg: var(--mq-surface);
  --mq-card-border: var(--mq-border);
  --mq-card-shadow: none;
  --mq-card-radius: calc(var(--mq-radius) + 2px);

  /* Callouts */
  --mq-callout-info-bg: #eef3fb;
  --mq-callout-info-border: #2a5ac8;
  --mq-callout-info-text: #1a3060;
  --mq-callout-warn-bg: #fdf5e8;
  --mq-callout-warn-border: #c87a2a;
  --mq-callout-warn-text: #5a3510;
  --mq-callout-danger-bg: #fbeaea;
  --mq-callout-danger-border: #c82a2a;
  --mq-callout-danger-text: #5a1010;
  --mq-callout-ok-bg: #eaf4ee;
  --mq-callout-ok-border: #2ac852;
  --mq-callout-ok-text: #0e4020;

  /* Layout And Typography */
  --mq-radius: 8px;
  --mq-max-width: 860px;
  --mq-page-gutter: clamp(1rem, 3vw, 2rem);
  --mq-block-gap: clamp(1rem, 2vw, 1.5rem);
  --mq-font-sans: 'DM Sans', system-ui, sans-serif;
  --mq-font-serif: 'Fraunces', Georgia, serif;
  --mq-font-mono: 'IBM Plex Mono', monospace;

  /* Compatibility Aliases */
  --bg: var(--mq-background);
  --surface: var(--mq-surface);
  --surface2: var(--mq-surface-alt);
  --text: var(--mq-text);
  --muted: var(--mq-muted);
  --accent: var(--mq-primary);
  --accent2: var(--mq-secondary);
  --border: var(--mq-border);
  --radius: var(--mq-radius);
  --max-w: var(--mq-max-width);
  --font-sans: var(--mq-font-sans);
  --font-serif: var(--mq-font-serif);
  --font-mono: var(--mq-font-mono);
}

/* Base Theme Structure */
/* Shared typography, layout, navigation, utilities, and non-directive component styles copied from the reference theme. */

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  font-family: var(--mq-font-sans);
  background: var(--mq-background);
  color: var(--mq-text);
  font-size: 16px;
  line-height: 1.65;
}

.primary {
  --mq-tone: var(--mq-primary);
}

.secondary {
  --mq-tone: var(--mq-secondary);
}

.tertiary {
  --mq-tone: var(--mq-tertiary);
}

.mq-nav {
  background: var(--mq-nav-bg);
  border-bottom: 1px solid var(--mq-nav-border);
}

.mq-nav-brand {
  font-family: var(--mq-font-serif);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--mq-nav-text);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.mq-nav-links a,
.mq-nav-group > .mq-nav-group-trigger {
  font-size: 0.875rem;
  color: var(--mq-muted);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.mq-nav-links a:hover,
.mq-nav-group > .mq-nav-group-trigger:hover {
  color: var(--mq-nav-active-text);
  border-color: var(--mq-nav-border);
}

.mq-nav-links a.active,
.mq-nav-group > .mq-nav-group-trigger.active {
  color: var(--mq-nav-active-text);
  border-color: var(--mq-nav-border);
  background: var(--mq-nav-active-bg);
}

.mq-nav-submenu {
  background: var(--mq-nav-bg);
  border: 1px solid var(--mq-nav-border);
}

.mq-nav-heading {
  padding: 0.7rem 0.8rem 0.25rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mq-muted);
}

.mq-nav-divider {
  height: 1px;
  margin: 0.45rem 0;
  background: var(--mq-nav-border);
}

.mq-footer {
  font-size: 0.8rem;
  color: var(--mq-muted);
  border-top: 1px solid var(--mq-border);
}

.mq-footer a {
  color: var(--mq-muted);
}

.mq-main h1 {
  font-family: var(--mq-font-serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.mq-main h2 {
  font-family: var(--mq-font-serif);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
  line-height: 1.25;
}

.mq-main h3 {
  font-family: var(--mq-font-sans);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
}

.mq-main p {
  margin-bottom: 1rem; color: var(--mq-muted); font-size: 0.95rem;
}

.mq-main a {
  color: var(--mq-secondary); text-decoration: none;
}

.mq-main a:hover {
  text-decoration: underline;
}

.mq-main hr {
  border: none; border-top: 1px solid var(--mq-border); margin: 2.5rem 0;
}

.mq-main ul, .mq-main ol {
  padding-left: 1.5rem; margin-bottom: 1rem; color: var(--mq-muted); font-size: 0.95rem;
}

.mq-main li {
  margin-bottom: 0.3rem;
}

.mq-main code {
  font-family: var(--mq-font-mono); font-size: 0.84em; background: var(--mq-surface-alt); padding: 2px 6px; border-radius: 3px;
}

.mq-main pre {
  background: var(--mq-code-bg); color: var(--mq-code-text); border: 1px solid var(--mq-code-border); padding: 1.25rem; border-radius: var(--mq-radius); overflow-x: auto; margin-bottom: 1rem; font-family: var(--mq-font-mono); font-size: 0.85rem; line-height: 1.7;
}

.mq-main pre code {
  background: none; padding: 0; font-size: inherit; color: inherit;
}

.mq-main blockquote {
  border-left: 3px solid var(--mq-primary); padding-left: 1rem; margin: 1rem 0; color: var(--mq-muted); font-style: italic;
}

.mq-main strong {
  font-weight: 500; color: var(--mq-text);
}

.mq-main :where(h1, h2, h3, p, li, blockquote) {
  overflow-wrap: anywhere;
}

.mq-main :where(h1, h2, h3, h4, h5, h6)[id] {
  scroll-margin-top: 5rem;
}

a.mq-btn {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--mq-border);
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none !important;
  color: var(--mq-text);
  text-align: center;
  white-space: normal;
  transition: background 0.15s;
}

a.mq-btn:hover {
  background: var(--mq-surface-alt);
}

a.mq-btn.primary {
  background: var(--mq-primary); border-color: var(--mq-primary); color: #fff;
}

a.mq-btn.secondary,
a.mq-btn.blue {
  background: var(--mq-secondary); border-color: var(--mq-secondary); color: #fff;
}

a.mq-btn.tertiary {
  background: var(--mq-tertiary); border-color: var(--mq-tertiary); color: #fff;
}

a.mq-btn.primary:hover,
a.mq-btn.secondary:hover,
a.mq-btn.blue:hover,
a.mq-btn.tertiary:hover {
  filter: brightness(0.92);
}

.mq-badge {
  display: inline-block;
  font-family: var(--mq-font-mono);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--mq-surface-alt);
  color: var(--mq-muted);
  letter-spacing: 0.03em;
  vertical-align: middle;
}

.mq-badge.primary,
.mq-badge.accent {
  background: #fdf0eb; color: var(--mq-primary);
}

.mq-badge.secondary,
.mq-badge.blue {
  background: #eef3fb; color: var(--mq-secondary);
}

.mq-badge.tertiary {
  background: #eaf4ee; color: var(--mq-tertiary);
}

img {
  max-width: 100%;
  height: auto;
  border-radius: clamp(14px, 3vw, 20px);
  border: 1px solid #eeece7;
}

/* Shared Directive Blocks: @hero, @spotlight */
.mq-spotlight,
.mq-hero {
  padding: clamp(1.4rem, 4vw, 2.2rem) clamp(1rem, 4vw, 1.3rem);
  margin: 0 0 clamp(1.5rem, 4vw, 2rem);
  border: 1px solid var(--mq-border);
  border-radius: var(--mq-radius);
  background: var(--mq-surface-alt);
}

.mq-spotlight.center,
.mq-hero.center {
  text-align: center;
}

/* @divider (inline) */
/* selectors: .mq-divider */
.mq-divider {
  width: 36px;
  height: 3px;
  background: var(--mq-primary);
  margin: 0.75rem 0 1rem;
  border-radius: 2px;
}

/* @container (block) */
/* selectors: none discovered from render output */
/* No wrapper selectors. This directive changes rendering flow rather than emitting a themed element. */

/* @row (block) */
/* selectors: .mq-row */
.mq-row {
  display: grid;
  gap: var(--mq-block-gap);
  margin: 1.75rem 0;
  align-items: stretch;
}

@media (max-width: 640px) {
  .mq-row { grid-template-columns: 1fr !important; }
}

/* @column (block) */
/* selectors: .mq-column */
.mq-column {
  display: grid;
  gap: var(--mq-block-gap);
  align-content: start;
}

/* @section (block) */
/* selectors: .mq-section */
.mq-section {
  /* Add section-specific theming here. */
}

/* @hero (block) */
/* selectors: .mq-hero */
/* Shared baseline for this directive lives in the shared directive section above. Add directive-specific selectors here only if this theme needs extra treatment. */

/* @card (block) */
/* selectors: .mq-card */
.mq-card {
  background: var(--mq-card-bg);
  border: 1px solid var(--mq-card-border);
  border-radius: var(--mq-card-radius);
  box-shadow: var(--mq-card-shadow);
  padding: 1.5rem;
  height: 100%;
}

.mq-card.primary,
.mq-card.accent {
  border-top: 3px solid var(--mq-primary);
}

.mq-card.secondary,
.mq-card.accent2 {
  border-top: 3px solid var(--mq-secondary);
}

.mq-card.tertiary {
  border-top: 3px solid var(--mq-tertiary);
}

.mq-card.ghost {
  background: transparent;
}

.mq-card.dark {
  background: var(--mq-text); border-color: transparent;
}

.mq-card.dark h2,
.mq-card.dark h3 {
  color: var(--mq-background);
}

.mq-card.dark p {
  color: rgba(247,245,240,0.6);
}

.mq-card.dark .mq-btn {
  border-color: rgba(255,255,255,0.2); color: var(--mq-background);
}

/* @callout (block) */
/* selectors: .mq-callout */
.mq-callout {
  padding: 1rem 1.25rem;
  border-radius: var(--mq-radius);
  margin: 0.75rem 0 1rem;
  border-left: 3px solid;
}

.mq-callout p {
  margin: 0;
}

.mq-callout > :first-child {
  margin-top: 0;
}

.mq-callout > :last-child {
  margin-bottom: 0;
}

.mq-callout.info,
.mq-callout.secondary {
  background: var(--mq-callout-info-bg); border-color: var(--mq-callout-info-border);
}

.mq-callout.info p,
.mq-callout.secondary p {
  color: var(--mq-callout-info-text);
}

.mq-callout.warn,
.mq-callout.primary {
  background: var(--mq-callout-warn-bg); border-color: var(--mq-callout-warn-border);
}

.mq-callout.warn p,
.mq-callout.primary p {
  color: var(--mq-callout-warn-text);
}

.mq-callout.danger {
  background: var(--mq-callout-danger-bg); border-color: var(--mq-callout-danger-border);
}

.mq-callout.danger p {
  color: var(--mq-callout-danger-text);
}

.mq-callout.ok,
.mq-callout.tertiary {
  background: var(--mq-callout-ok-bg); border-color: var(--mq-callout-ok-border);
}

.mq-callout.ok p,
.mq-callout.tertiary p {
  color: var(--mq-callout-ok-text);
}

/* @stat (block) */
/* selectors: .mq-stat, .mq-stat-label, .mq-stat-value */
.mq-stat {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.25rem;
  background: var(--mq-surface);
  border: 1px solid var(--mq-border);
  border-radius: var(--mq-radius);
}

.mq-stat-value {
  font-family: var(--mq-font-serif);
  font-size: clamp(2rem, 6vw, 2.6rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
}

.mq-stat-label {
  font-size: 0.78rem;
  color: var(--mq-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* @step (block) */
/* selectors: .mq-step, .mq-step-body, .mq-step-num */
.mq-step {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.7rem;
  margin-bottom: 0.95rem;
  align-items: start;
}

.mq-step-body > :first-child {
  margin-top: 0;
}

.mq-step-body > :last-child {
  margin-bottom: 0;
}

.mq-step-num {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--mq-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mq-font-mono);
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
  color: var(--mq-muted);
}

.mq-step-num::before {
  content: attr(data-step);
}

/* @dropdown (block) */
/* selectors: .mq-dropdown, .mq-dropdown-content */
.mq-dropdown {
  border: 1px solid var(--mq-border);
  border-radius: var(--mq-radius);
  background: var(--mq-surface);
  margin: 1rem 0;
  overflow: clip;
}

.mq-dropdown > summary {
  cursor: pointer;
  padding: 0.8rem 1rem;
  font-weight: 600;
  list-style: none;
}

.mq-dropdown > summary::-webkit-details-marker {
  display: none;
}

.mq-dropdown > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 0.5rem;
  transition: transform 0.2s ease;
}

.mq-dropdown[open] > summary::before {
  transform: rotate(90deg);
}

.mq-dropdown-content {
  border-top: 1px solid var(--mq-border);
  padding: 0.9rem 1rem 1rem;
}

.mq-dropdown-content > :first-child {
  margin-top: 0;
}

.mq-dropdown-content > :last-child {
  margin-bottom: 0;
}

/* @product-card (block) */
/* selectors: product-card */
product-card {
  display: block;
  min-width: 0;
  border: 1px solid var(--mq-border);
  background: var(--mq-surface);
  border-radius: var(--mq-radius);
  padding: 1rem;
}

product-card[variant="featured"] {
  border-color: var(--mq-primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mq-primary) 25%, transparent);
}

product-card > :first-child {
  margin-top: 0;
}

product-card > :last-child {
  margin-bottom: 0;
}

/* @sparkle (inline) */
/* selectors: .mq-sparkle */
.mq-sparkle {
  display: inline-block;
  animation: sparkle 1.5s infinite;
  color: var(--mq-primary);
}

@keyframes sparkle {
  0%, 100% { opacity: 0.5; transform: scale(0.5) rotate(30deg); }
  50% { opacity: 1; transform: scale(1); }
}

/* @spotlight (inline) */
/* selectors: .mq-spotlight */
/* Shared baseline for this directive lives in the shared directive section above. Add directive-specific selectors here only if this theme needs extra treatment. */

@container mq-main (max-width: 960px) {
  .mq-row {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
  }

  .mq-main h1 {
    margin-bottom: 0.85rem;
  }

  .mq-card,
  .mq-callout,
  .mq-stat,
  product-card {
    padding: 1.1rem;
  }

  .mq-dropdown > summary,
  .mq-dropdown-content {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 15px;
  }
}

@container mq-main (max-width: 640px) {
  .mq-main h2 {
    font-size: 1.25rem;
  }

  .mq-main h3 {
    font-size: 0.95rem;
  }

  .mq-card,
  .mq-callout,
  .mq-stat,
  product-card {
    padding: 1rem;
  }

  .mq-step {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .mq-step-num {
    justify-self: start;
  }
}


/* directive-style: @dropdown */
.mq-dropdown {
  border: 1px solid var(--mq-border);
  border-radius: var(--mq-radius);
  background: var(--mq-surface);
  margin: 1rem 0;
  overflow: clip;
}

.mq-dropdown > summary {
  cursor: pointer;
  padding: 0.8rem 1rem;
  font-weight: 600;
  list-style: none;
}

.mq-dropdown > summary::-webkit-details-marker {
  display: none;
}

.mq-dropdown > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 0.5rem;
  transition: transform 0.2s ease;
}

.mq-dropdown[open] > summary::before {
  transform: rotate(90deg);
}

.mq-dropdown-content {
  border-top: 1px solid var(--mq-border);
  padding: 0.9rem 1rem 1rem;
}

.mq-dropdown-content > :first-child {
  margin-top: 0;
}

.mq-dropdown-content > :last-child {
  margin-bottom: 0;
}
/* end directive-style: @dropdown */
/* directive-style: @product-card */
product-card {
  display: block;
  border: 1px solid var(--mq-border);
  background: var(--mq-surface);
  border-radius: var(--mq-radius);
  padding: 1rem;
}

product-card[variant="featured"] {
  border-color: var(--mq-primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mq-primary) 25%, transparent);
}

product-card > :first-child {
  margin-top: 0;
}

product-card > :last-child {
  margin-bottom: 0;
}
/* end directive-style: @product-card */
/* directive-style: @sparkle */
.mq-sparkle {
  display: inline-block;
  animation: sparkle 1.5s infinite;
  color: var(--mq-primary);
}

@keyframes sparkle {
  0%, 100% { opacity: 0.5; transform: scale(0.5) rotate(30deg); }
  50% { opacity: 1; transform: scale(1); }
}
/* end directive-style: @sparkle */