/* ============================================================
   FULL-WIDTH ESCAPE  (the only approved use of !important)
   Lets .citant-block section backgrounds span the full viewport
   width while .container keeps the inner content at 1200px.
   ============================================================ */
.citant-block {
  width:        100vw !important;
  max-width:    100vw !important;
  margin-left:  calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
/* ============================================================
   CITANT.AI — base.css v1.1
   Global typography, interaction states, Gutenberg overrides.
   Depends on: reset.css, tokens.css
   Load order: reset → tokens → THIS FILE → layout → components
   ============================================================ */

/*
 * BREAKPOINTS (reference — media queries use min-width mobile-first):
 *   640px  — large phones and small tablets
 *   900px  — tablets and small laptops
 *  1100px  — standard desktops
 */

/* ============================================================
   FONT-FACE FALLBACK
   DM Sans metric-adjusted fallback reduces CLS during font swap.
   Must be declared before body to be available immediately.
   ============================================================ */

@font-face {
  font-family: 'DM Sans Fallback';
  src: local('Arial');
  ascent-override:   94%;
  descent-override:  24%;
  line-gap-override: 0%;
  size-adjust:       100%;
}

/* ============================================================
   GLOBAL TYPOGRAPHY
   ============================================================ */

body {
  font-family:              var(--font-body);  /* 'DM Sans', 'DM Sans Fallback', sans-serif */
  font-size:                var(--text-lg);    /* 15px global base */
  font-weight:              var(--weight-regular);
  color:                    var(--color-text);
  line-height:              var(--leading-normal);
  background-color:         var(--color-bg);
  -webkit-font-smoothing:   antialiased;
  -moz-osx-font-smoothing:  grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family:    var(--font-display);
  font-weight:    var(--weight-bold);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color:          var(--color-text);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); font-weight: var(--weight-semibold); }
h5 { font-size: var(--text-3xl); font-weight: var(--weight-semibold); }
h6 { font-size: var(--text-xl);  font-weight: var(--weight-semibold); }

p {
  font-size:   var(--text-lg);
  line-height: var(--leading-relaxed);
  color:       var(--color-text-secondary);
  max-width:   68ch;  /* prevents overly long lines — readability rule */
}

p + p { margin-top: var(--space-4); }

/* Form inputs: 16px minimum prevents iOS Safari zoom on focus */
input, textarea, select {
  font-size:   1rem;  /* 16px hard minimum — never go below this */
  font-family: var(--font-body);
}

/* ============================================================
   GLOBAL INTERACTION STATES
   Foundation for all interactive elements.
   Component-specific overrides go in components.css.
   Source: file 01 §3.3 + file 10 Component 0
   ============================================================ */

/* GLOBAL FOCUS RING — keyboard navigation only */
*:focus-visible {
  outline:        2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius:  2px;
}

/* On dark background sections: white focus ring */
.citant-section--dark *:focus-visible,
.citant-block--dark *:focus-visible {
  outline-color: rgba(255, 255, 255, 0.9);
}

/* Remove default browser focus ring for mouse users.
   Safe: :focus-visible is supported in all modern browsers.
   IE11 is not supported on this project. */
*:focus:not(:focus-visible) {
  outline: none;
}

/* LINKS — all four states */
a {
  color:                 var(--color-primary);
  text-decoration:       underline;
  text-underline-offset: 3px;
  transition:            color var(--transition-fast);
}
a:hover   { color: var(--color-primary-dark); }
a:active  { color: var(--color-primary-dark); opacity: 0.85; }
a:visited { color: var(--color-accent); }

/* Navigation links: suppress visited state (purple nav items = confusing) */
.nav a:visited,
.nav__link:visited { color: inherit; }

/* CTA buttons: suppress visited state */
.btn:visited { color: inherit; }

/* BUTTONS — shared active (press) state */
.btn:active {
  transform:           translateY(1px);
  transition-duration: 50ms;
}

/* FORM INPUTS — focus and hover */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline:      none;
  border-color: var(--color-primary);
  box-shadow:   0 0 0 3px var(--color-primary-light);
}
input:hover,
textarea:hover,
select:hover {
  border-color: var(--color-border-strong);
}

/* ============================================================
   GUTENBERG OVERRIDE SCOPE
   All rules here intentionally override Gutenberg defaults
   within .citant-block containers. Do not remove.
   Source: file 01 §8.2
   ============================================================ */

.citant-block *,
.citant-block *::before,
.citant-block *::after {
  box-sizing: border-box;
}

/* Gutenberg adds margin-block-start to all headings */
.citant-block h1,
.citant-block h2,
.citant-block h3,
.citant-block h4,
.citant-block h5,
.citant-block h6 {
  margin-block-start: 0;
  margin-block-end:   0;
}

/* Gutenberg adds margin-bottom to paragraphs */
.citant-block p {
  margin-block-end: 0;
}

/* Gutenberg adds padding-inline-start to lists */
.citant-block ul,
.citant-block ol {
  padding-inline-start: 0;
  margin-block:         0;
}

/* Gutenberg adds margin to figures */
.citant-block figure {
  margin:  0;
  padding: 0;
}