/* CASCADE-LAYER: intentionally-unlayered — page composition. See .planning/phases/01-foundation-activation/01-CONTEXT.md D-01. */
/* stylelint-disable media-feature-name-disallowed-list -- Phase 6: max-width media queries retained; mobile-first conversion deferred (D-08). Strict-value/!important/order cleaned. */

/*
 * Generic Page Template Styles
 *
 * Styles for the default page template including content areas,
 * featured images, typography, and mobile responsiveness.
 * Includes contact form styles and overflow prevention.
 *
 * @package RhuarcsPetSupplies
 * @since 1.0.0
 */

/* CRITICAL: PAGE TEMPLATE HORIZONTAL OVERFLOW PREVENTION */
.page-content,
.page-article,
.page-content-area,
.featured-image {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.page-content * {
    max-width: 100%;
    box-sizing: border-box;
}

.page-content {
    padding: var(--space-16) 0;
    background: var(--neutral-50);
}

.page-article {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    margin-bottom: var(--space-8);
}

/* Note: Page header styles moved to unified page-header.css */

.featured-image {
    overflow: hidden;
}

.featured-image img {
    display: block;
    width: 100%;
    height: auto;
}

.page-content-area {
    padding: var(--space-12) var(--space-8);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- type-scale extension; 1.1rem has no canonical --text-* token */
    font-size: 1.1rem;
    line-height: var(--leading-loose);
    overflow-wrap: break-word;
    hyphens: auto;
}

.page-content-area h2,
.page-content-area h3,
.page-content-area h4 {
    margin: var(--space-10) 0 var(--space-6);
    color: var(--purple-700);
}

.page-content-area h2 {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- type-scale extension; 2.2rem has no canonical --text-* token */
    font-size: 2.2rem;
    border-bottom: 3px solid var(--purple-700);
    padding-bottom: var(--space-2);
}

.page-content-area h3 {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- type-scale extension; 1.8rem has no canonical --text-* token */
    font-size: 1.8rem;
}

.page-content-area h4 {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- type-scale extension; 1.4rem has no canonical --text-* token */
    font-size: 1.4rem;
}

.page-content-area p {
    margin-bottom: var(--space-6);
}

.page-content-area ul,
.page-content-area ol {
    margin: var(--space-6) 0;
    padding-left: var(--space-8);
}

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

.page-content-area blockquote {
    padding: var(--space-6);
    margin: var(--space-8) 0;
    background: var(--neutral-50);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    border-left: 4px solid var(--purple-700);
    font-style: italic;
}

.page-content-area img {
    max-width: 100%;
    height: auto;
    margin: var(--space-4) 0;
    border-radius: var(--radius-md);
    box-sizing: border-box;
}

.page-content-area table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin: var(--space-8) 0;
    background: white;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    table-layout: fixed;
    overflow-wrap: break-word;
}

.page-content-area th,
.page-content-area td {
    padding: var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--border-light);
}

.page-content-area th {
    font-weight: var(--font-semibold);
    color: var(--text-on-purple);
    background: var(--purple-700);
}

.page-content-area tr:hover {
    background: var(--neutral-50);
}

.page-links {
    margin: var(--space-8) 0;
    text-align: center;
}

.page-links span {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- off-grid 0.2rem page-link gutter; no --space-* token is byte-identical */
    margin: 0 0.2rem;
    color: var(--text-on-purple);
    background: var(--purple-700);
    border-radius: var(--radius-sm);
    text-decoration: none;
}

.no-content {
    text-align: center;
    padding: var(--space-16) var(--space-8);
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.no-content h2 {
    color: var(--purple-700);
    margin-bottom: var(--space-4);
}

/* Special styling for contact page */
.page-template-contact .page-content-area {
    padding: var(--space-8);
}

.contact-form {
    padding: var(--space-8);
    margin: var(--space-8) 0;
    background: var(--neutral-50);
    border-radius: var(--radius-lg);
}

.contact-form .form-group {
    margin-bottom: var(--space-6);
}

.contact-form label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: var(--font-semibold);
    color: var(--purple-700);
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: var(--space-4);
    font-size: var(--text-base);
    border: 2px solid var(--border-medium);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-base);
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--purple-700);
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- bespoke 3px focus inset ring; no byte-exact --shadow-* token */
    box-shadow: 0 0 0 3px var(--purple-100);
}

.contact-form button {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-on-purple);
    background: var(--purple-700);
    border: none;
    border-radius: var(--radius-full);
    transition: all var(--transition-base);
    cursor: pointer;
}

.contact-form button:hover {
    background: var(--purple-600);
    transform: translateY(-2px);
}

/* CONS-05: divergent 2px focus outline removed — canonical base.css :focus-visible (3px purple-500) now applies. */

@media (width <= 768px) {
    /* CRITICAL MOBILE CONTAINER FIXES */

    /* Container styles moved to utilities.css for consistency */

    .page-content,
    .page-article,
    .page-content-area {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .page-content-area {
        padding: var(--space-8) var(--space-6);
    }

    .page-content-area h2 {
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- type-scale extension; 1.8rem has no canonical --text-* token */
        font-size: 1.8rem;
    }

    .contact-form {
        padding: var(--space-6);
    }
}

@media (width <= 480px) {
    /* CRITICAL SMALL MOBILE CONTAINER FIXES */

    /* Container styles moved to utilities.css for consistency */

    .page-content-area {
        padding: var(--space-6) var(--space-4);
    }

    .page-content-area h2 {
        /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- type-scale extension; 1.6rem has no canonical --text-* token */
        font-size: 1.6rem;
        overflow-wrap: break-word;
    }
}