/*
 * base.css - GeneratePress container resets and the global type scale.
 * Depends on tokens.css.
 */

/* ==========================================================================
   LAYOUT RESETS
   ========================================================================== */
#page,
#page.site,
#page.grid-container,
#page.site.grid-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.site-main,
#primary .site-main,
main#primary {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    outline: none !important;
}

/* ==========================================================================
   TYPOGRAPHY  (fluid scale: readable on mobile -> the manual's desktop sizes)
   --------------------------------------------------------------------------
   The manual sets H1 60px / H2 52px / H3 32px / H4 18px and a 16-22px body
   for desktop. clamp() reaches those values on a wide screen and steps down
   continuously on mobile, with no media queries needed.
   ========================================================================== */
body, p, .entry-content, .entry-content p, .wp-block-paragraph, .wp-block-group {
    font-family: var(--cn-primary-font);
    font-size: 16px;
    line-height: 22px;
    color: var(--cn-text-color);
    font-weight: 400;
}

h1, .entry-content h1 {
    font-family: var(--cn-primary-font);
    font-size: clamp(32px, 7vw, 60px);
    line-height: 1.1;
    margin-bottom: clamp(20px, 3vw, 50px);
    color: var(--cn-text-color);
    font-weight: 700;
}

h2, .entry-content h2 {
    font-family: var(--cn-primary-font);
    font-size: clamp(26px, 5vw, 35px);
    line-height: 1.15;
    margin-bottom: 25px;
    color: var(--cn-text-color);
    font-weight: 600;
}

h3, .entry-content h3 {
    font-family: var(--cn-primary-font);
    font-size: clamp(20px, 3vw, 28px);
    line-height: 1.25;
    margin-bottom: 25px;
    color: var(--cn-text-color);
    font-weight: 600;
}

h4, .entry-content h4 {
    font-family: var(--cn-primary-font);
    font-size: 18px;
    line-height: 1.3;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--cn-text-color);
    font-weight: 700;
}

/* Hero: "Learn" and "now" bold, everything else regular, as in the mockup */
.cn-hero-title {
    font-weight: 400;
}

.cn-hero-title strong {
    font-weight: 700;
}

/* Hero subhead: the manual's black, one notch larger than body copy */
.cn-hero-subtitle {
    color: var(--cn-black);
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.5;
}

/* The manual's reading measure (45-75 characters per line) */
.cn-section p,
.entry-content p {
    max-width: var(--cn-measure);
    margin-left: auto;
    margin-right: auto;
}