/**
 * ============================================================================
 * NETT CUSTOM CSS — SINGLE PAGE
 * ============================================================================
 *
 * Applies to: single static pages (is_page())
 * Depends on: _master-variables.css or _master-variables-[project-id].css
 *
 * PRIORITY: Font families & color palette are the most critical declarations.
 * ============================================================================
 */

/* ============================================================
 * BASE TYPOGRAPHY — highest priority for font rendering
 * ============================================================ */
.page:not(.error404),
.page:not(.error404) body {
    font-family: var(--nett-font-body);
    font-size: var(--nett-body-size);
    font-weight: var(--nett-body-weight);
    line-height: var(--nett-body-line-height);
    letter-spacing: var(--nett-body-tracking);
    color: var(--nett-body-color);
    background-color: var(--nett-bg-primary);
}

/* ============================================================
 * PAGE HEADER / TITLE AREA
 * ============================================================ */
.page .entry-header,
.page .page-header {
    margin-bottom: var(--nett-space-8);
    padding-bottom: var(--nett-space-6);
}

/* Page Title */
.page .entry-title,
.page .page-title,
.page h1.title {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-h1-size);
    font-weight: var(--nett-h1-weight);
    line-height: var(--nett-h1-line-height);
    letter-spacing: var(--nett-h1-tracking);
    color: var(--nett-h1-color);
    margin-top: 0;
    margin-bottom: var(--nett-space-4);
}

/* Breadcrumb */
.page .breadcrumb,
.page .breadcrumbs {
    font-family: var(--nett-font-meta);
    font-size: var(--nett-meta-size);
    color: var(--nett-meta-color);
    display: flex;
    flex-wrap: wrap;
    gap: var(--nett-space-1);
    align-items: center;
    margin-bottom: var(--nett-space-4);
}

.page .breadcrumb a,
.page .breadcrumbs a {
    color: var(--nett-text-link);
    text-decoration: none;
    transition: var(--nett-transition-colors);
}

.page .breadcrumb a:hover,
.page .breadcrumbs a:hover {
    color: var(--nett-text-link-hover);
    text-decoration: underline;
}

.page .breadcrumb .separator,
.page .breadcrumbs .separator {
    color: var(--nett-text-muted);
    margin: 0 var(--nett-space-1);
}

/* Page Hero / Featured Image Banner */
.page .page-hero,
.page .entry-hero {
    position: relative;
    min-height: var(--nett-hero-min-height);
    background-color: var(--nett-bg-dark);
    border-radius: var(--nett-radius-2xl);
    overflow: hidden;
    margin-bottom: var(--nett-space-10);
    display: flex;
    align-items: center;
    justify-content: center;
}

.page .page-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background-color: var(--nett-hero-overlay-color);
    z-index: 1;
}

.page .page-hero .hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: var(--nett-space-10) var(--nett-space-6);
}

.page .page-hero .hero-content h1 {
    font-family: var(--nett-font-display);
    font-size: var(--nett-hero-title-size);
    font-weight: var(--nett-display-weight);
    line-height: var(--nett-display-line-height);
    letter-spacing: var(--nett-display-tracking);
    color: var(--nett-white);
    margin-bottom: var(--nett-space-4);
}

.page .page-hero .hero-content p {
    font-family: var(--nett-font-lead);
    font-size: var(--nett-hero-desc-size);
    font-weight: var(--nett-lead-weight);
    line-height: var(--nett-lead-line-height);
    color: rgba(255, 255, 255, 0.9);
}

/* ============================================================
 * PAGE CONTENT — BODY TYPOGRAPHY (HIGHEST PRIORITY)
 * ============================================================ */
.page .entry-content,
.page .page-content {
    font-family: var(--nett-font-body);
    font-size: var(--nett-body-size);
    font-weight: var(--nett-body-weight);
    line-height: var(--nett-body-line-height);
    color: var(--nett-body-color);
}

/* Headings inside content */
.page .entry-content h1,
.page .page-content h1 {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-h1-size);
    font-weight: var(--nett-h1-weight);
    line-height: var(--nett-h1-line-height);
    letter-spacing: var(--nett-h1-tracking);
    color: var(--nett-h1-color);
    margin: var(--nett-space-10) 0 var(--nett-space-4);
}

.page .entry-content h2,
.page .page-content h2 {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-h2-size);
    font-weight: var(--nett-h2-weight);
    line-height: var(--nett-h2-line-height);
    letter-spacing: var(--nett-h2-tracking);
    color: var(--nett-h2-color);
    margin: var(--nett-space-8) 0 var(--nett-space-4);
    padding-bottom: var(--nett-space-2);
    border-bottom: var(--nett-border-2) solid var(--nett-primary-100);
}

.page .entry-content h3,
.page .page-content h3 {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-h3-size);
    font-weight: var(--nett-h3-weight);
    line-height: var(--nett-h3-line-height);
    letter-spacing: var(--nett-h3-tracking);
    color: var(--nett-h3-color);
    margin: var(--nett-space-6) 0 var(--nett-space-3);
}

.page .entry-content h4,
.page .page-content h4 {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-h4-size);
    font-weight: var(--nett-h4-weight);
    line-height: var(--nett-h4-line-height);
    color: var(--nett-h4-color);
    margin: var(--nett-space-5) 0 var(--nett-space-2);
}

.page .entry-content h5,
.page .page-content h5 {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-h5-size);
    font-weight: var(--nett-h5-weight);
    color: var(--nett-h5-color);
    margin: var(--nett-space-4) 0 var(--nett-space-2);
}

.page .entry-content h6,
.page .page-content h6 {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-h6-size);
    font-weight: var(--nett-h6-weight);
    color: var(--nett-h6-color);
    margin: var(--nett-space-4) 0 var(--nett-space-2);
}

/* Paragraphs */
.page .entry-content p,
.page .page-content p {
    font-family: var(--nett-font-body);
    font-size: var(--nett-body-size);
    line-height: var(--nett-body-line-height);
    color: var(--nett-body-color);
    margin-bottom: var(--nett-space-5);
}

/* Lead paragraph */
.page .entry-content .lead {
    font-family: var(--nett-font-lead);
    font-size: var(--nett-lead-size);
    font-weight: var(--nett-lead-weight);
    line-height: var(--nett-lead-line-height);
    color: var(--nett-lead-color);
}

/* Overline label */
.page .entry-content .overline,
.page .page-content .overline {
    font-family: var(--nett-font-overline);
    font-size: var(--nett-overline-size);
    font-weight: var(--nett-overline-weight);
    letter-spacing: var(--nett-overline-tracking);
    text-transform: var(--nett-overline-transform);
    color: var(--nett-overline-color);
    display: block;
    margin-bottom: var(--nett-space-2);
}

/* Links */
.page .entry-content a,
.page .page-content a {
    color: var(--nett-text-link);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: var(--nett-transition-colors);
}

.page .entry-content a:hover,
.page .page-content a:hover {
    color: var(--nett-text-link-hover);
}

/* Lists */
.page .entry-content ul,
.page .entry-content ol,
.page .page-content ul,
.page .page-content ol {
    font-family: var(--nett-font-body);
    font-size: var(--nett-body-size);
    line-height: var(--nett-body-line-height);
    color: var(--nett-body-color);
    padding-left: var(--nett-space-6);
    margin-bottom: var(--nett-space-5);
}

.page .entry-content li,
.page .page-content li {
    margin-bottom: var(--nett-space-2);
}

/* Blockquote */
.page .entry-content blockquote,
.page .page-content blockquote {
    font-family: var(--nett-font-quote);
    font-size: var(--nett-quote-size);
    font-weight: var(--nett-quote-weight);
    font-style: var(--nett-quote-style);
    line-height: var(--nett-quote-line-height);
    color: var(--nett-quote-color);
    border-left: var(--nett-quote-border-width) solid var(--nett-quote-border-color);
    padding: var(--nett-space-4) var(--nett-space-6);
    margin: var(--nett-space-6) 0;
    background-color: var(--nett-primary-50);
    border-radius: 0 var(--nett-radius-md) var(--nett-radius-md) 0;
}

/* Code */
.page .entry-content code,
.page .page-content code {
    font-family: var(--nett-font-mono);
    font-size: var(--nett-code-size);
    color: var(--nett-code-color);
    background-color: var(--nett-code-bg);
    padding: var(--nett-code-padding);
    border-radius: var(--nett-code-radius);
}

.page .entry-content pre,
.page .page-content pre {
    font-family: var(--nett-font-mono);
    font-size: var(--nett-text-sm);
    background-color: var(--nett-bg-dark);
    color: var(--nett-gray-100);
    padding: var(--nett-space-5);
    border-radius: var(--nett-radius-lg);
    overflow-x: auto;
    margin: var(--nett-space-6) 0;
}

/* Tables */
.page .entry-content table,
.page .page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--nett-space-6) 0;
    font-family: var(--nett-font-body);
    font-size: var(--nett-text-sm);
}

.page .entry-content thead tr,
.page .page-content thead tr {
    background-color: var(--nett-primary);
    color: var(--nett-white);
}

.page .entry-content th,
.page .page-content th {
    font-family: var(--nett-font-label);
    font-weight: var(--nett-font-semibold);
    padding: var(--nett-space-3) var(--nett-space-4);
    text-align: left;
}

.page .entry-content td,
.page .page-content td {
    padding: var(--nett-space-3) var(--nett-space-4);
    border-bottom: var(--nett-border-1) solid var(--nett-border-color);
}

.page .entry-content tbody tr:nth-child(even),
.page .page-content tbody tr:nth-child(even) {
    background-color: var(--nett-bg-secondary);
}

/* Images */
.page .entry-content img,
.page .page-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--nett-radius-lg);
}

.page .entry-content figure,
.page .page-content figure {
    margin: var(--nett-space-6) 0;
}

.page .entry-content figcaption,
.page .page-content figcaption {
    font-family: var(--nett-font-caption);
    font-size: var(--nett-caption-size);
    color: var(--nett-caption-color);
    text-align: center;
    margin-top: var(--nett-space-2);
}

/* HR */
.page .entry-content hr,
.page .page-content hr {
    border: 0;
    border-top: var(--nett-border-1) solid var(--nett-border-color);
    margin: var(--nett-space-8) 0;
}

/* ============================================================
 * CONTACT / FORM PAGES
 * ============================================================ */
.page .page-form-wrap label {
    font-family: var(--nett-font-label);
    font-size: var(--nett-label-size);
    font-weight: var(--nett-label-weight);
    color: var(--nett-label-color);
    letter-spacing: var(--nett-label-tracking);
    display: block;
    margin-bottom: var(--nett-space-1);
}

.page input[type="text"],
.page input[type="email"],
.page input[type="tel"],
.page input[type="url"],
.page input[type="search"],
.page select,
.page textarea {
    width: 100%;
    background-color: var(--nett-input-bg);
    border: var(--nett-border-1) solid var(--nett-input-border);
    border-radius: var(--nett-input-radius);
    padding: var(--nett-input-padding);
    font-family: var(--nett-font-body);
    font-size: var(--nett-input-font-size);
    color: var(--nett-text-primary);
    transition: border-color var(--nett-duration) var(--nett-ease);
    outline: none;
}

.page input[type="text"]:focus,
.page input[type="email"]:focus,
.page textarea:focus,
.page select:focus {
    border-color: var(--nett-input-border-focus);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.page input[type="submit"],
.page button[type="submit"],
.page .btn,
.page .button {
    font-family: var(--nett-font-btn);
    font-size: var(--nett-btn-font-size);
    font-weight: var(--nett-btn-font-weight);
    background-color: var(--nett-btn-primary-bg);
    color: var(--nett-btn-primary-text);
    border: none;
    border-radius: var(--nett-btn-radius);
    padding: var(--nett-btn-padding-y) var(--nett-btn-padding-x);
    cursor: pointer;
    transition: var(--nett-transition-colors);
    display: inline-flex;
    align-items: center;
    gap: var(--nett-space-2);
    text-decoration: none;
}

.page input[type="submit"]:hover,
.page button[type="submit"]:hover,
.page .btn:hover,
.page .button:hover {
    background-color: var(--nett-btn-primary-hover-bg);
}

/* ============================================================
 * SECTION DIVIDERS
 * ============================================================ */
.page .section-heading {
    text-align: center;
    margin-bottom: var(--nett-space-10);
}

.page .section-heading .overline {
    font-family: var(--nett-font-overline);
    font-size: var(--nett-overline-size);
    font-weight: var(--nett-overline-weight);
    letter-spacing: var(--nett-overline-tracking);
    text-transform: var(--nett-overline-transform);
    color: var(--nett-overline-color);
    display: block;
    margin-bottom: var(--nett-space-3);
}

.page .section-heading h2 {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-h2-size);
    font-weight: var(--nett-h2-weight);
    color: var(--nett-h2-color);
    margin-bottom: var(--nett-space-4);
    border: none;
}

.page .section-heading .lead {
    font-family: var(--nett-font-lead);
    font-size: var(--nett-lead-size);
    color: var(--nett-lead-color);
    max-width: 60ch;
    margin: 0 auto;
}

/* ============================================================
 * WIDGET AREAS — SIDEBAR
 * ============================================================ */
.page .widget-title {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-h5-size);
    font-weight: var(--nett-h5-weight);
    color: var(--nett-text-primary);
    margin-bottom: var(--nett-space-4);
    padding-bottom: var(--nett-space-2);
    border-bottom: var(--nett-border-2) solid var(--nett-primary);
}

/* ============================================================
 * RESPONSIVE OVERRIDES
 * ============================================================ */
@media (max-width: 768px) {
    .page .entry-content,
    .page .page-content {
        padding: 0;
    }
}