/* ==========================================================================
   WORDPRESS ADDITIONS

   Everything WordPress needs that the original site never had: editor content
   styling, generic page sections, admin bar spacing.

   This file exists so the six original stylesheets stay untouched. If you need
   to style something new, add it here, not in main.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GENERIC PAGE SECTIONS
   Used by page.php, index.php and 404.php.
   -------------------------------------------------------------------------- */

.section-generic {
    background-color: var(--bg-cream);
}

.page-content {
    max-width: 760px;
    margin: 0 auto;
}

.page-content > * + * {
    margin-top: 24px;
}

.page-content h2 {
    font-size: 1.9rem;
    margin-top: 48px;
}

.page-content h3 {
    font-size: 1.4rem;
    margin-top: 36px;
}

.page-content p,
.page-content li {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--text-light);
}

.page-content ul,
.page-content ol {
    padding-left: 22px;
}

.page-content li + li {
    margin-top: 10px;
}

.page-content a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.page-content a:hover {
    color: var(--accent);
}

.page-content blockquote {
    border-left: 2px solid var(--accent);
    padding-left: 24px;
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-style: italic;
}

.page-content img {
    border-radius: 4px;
}

.page-content figcaption {
    font-size: 0.85rem;
    color: var(--text-light);
    text-align: center;
    margin-top: 10px;
}

/* --------------------------------------------------------------------------
   2. BLOCK EDITOR ALIGNMENTS
   -------------------------------------------------------------------------- */

.page-content .alignleft {
    float: left;
    margin: 6px 28px 22px 0;
}

.page-content .alignright {
    float: right;
    margin: 6px 0 22px 28px;
}

.page-content .aligncenter {
    margin-left: auto;
    margin-right: auto;
}

.page-content .alignwide {
    max-width: 1000px;
    margin-left: calc((760px - 1000px) / 2);
    margin-right: calc((760px - 1000px) / 2);
}

.page-content .alignfull {
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

@media (max-width: 1060px) {
    .page-content .alignwide,
    .page-content .alignfull {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/* --------------------------------------------------------------------------
   3. ADMIN BAR
   Stops the logged-in admin bar overlapping the fixed site header.
   -------------------------------------------------------------------------- */

.admin-bar header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar header {
        top: 46px;
    }
}

/* --------------------------------------------------------------------------
   4. INNER PAGE HEADINGS

   main.css sizes .section-header headings at 2.5rem and sets no line-height,
   so they inherit 1.6 from the body. Fine for a short heading like "Our Story
   & Values"; a longer keyword-led H1 wraps to two lines and the loose leading
   pushed the calls to action below the fold.

   DO NOT cut the top padding on the first section to claw space back. The
   site header is position: fixed with a 90px min-height and the body has no
   padding-top, so the 100px in `section { padding: 100px 0 }` is the only
   thing holding page content clear of it. Reducing it slides the H1 under
   the header on every inner page.

   Space is taken from the heading and the gap beneath it instead, which is
   safe because neither affects header clearance.
   -------------------------------------------------------------------------- */

body .section-header h1 {
    font-size: 2.2rem;
    line-height: 1.15;
}

/* Give a long H1 more room before it wraps, and tighten the gap below the
   heading block. Browsers without :has() keep the 700px default and wrap a
   little earlier - no breakage. */
.section-header:has(h1) {
    max-width: 820px;
    margin-bottom: 35px;
}

@media (max-width: 768px) {
    body .section-header h1 {
        font-size: 1.8rem;
    }
}

/* --------------------------------------------------------------------------
   5. SERVICE CARDS

   The services hub uses <h2> for card titles (there is no intervening heading
   level under the H1). services.css only styles .service-card h3, so this
   mirrors it rather than editing the original file.
   -------------------------------------------------------------------------- */

.service-card h2 {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

/* --------------------------------------------------------------------------
   6. SERVICE PAGE CALL TO ACTION

   Sits at the foot of each service page, above the cross-links. Rendered by
   page-templates/service.php so all three stay consistent.
   -------------------------------------------------------------------------- */

.service-cta {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 55px;
}

/* --------------------------------------------------------------------------
   7. SERVICE CROSS-LINKS

   .services-grid is a 3-column grid. The cross-links at the foot of a service
   page only ever hold two cards, so they filled columns 1 and 2 and left a
   gap on the right, reading as left-aligned rather than deliberate.

   Two narrower cards, centred as a pair. The doubled class beats the
   single-class rules in services.css regardless of stylesheet load order,
   including inside its media queries.
   -------------------------------------------------------------------------- */

.services-grid.service-crosslinks {
    grid-template-columns: repeat(2, minmax(0, 360px));
    justify-content: center;
}

@media (max-width: 768px) {
    .services-grid.service-crosslinks {
        grid-template-columns: minmax(0, 360px);
    }
}

/* --------------------------------------------------------------------------
   8. CASE STUDY CARDS

   The archive renders .portfolio-item as an <a> rather than a <div> so each
   card links to its own page. Anchors are inline by default, so the height
   and overflow rules in portfolio.css need a block box to act on.
   -------------------------------------------------------------------------- */

a.portfolio-item {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   9. PAGINATION
   -------------------------------------------------------------------------- */

.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 60px;
}

.pagination .page-numbers {
    padding: 10px 16px;
    border: 1px solid var(--primary);
    border-radius: 2px;
    font-size: 0.9rem;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
    background-color: var(--primary);
    color: var(--bg-white);
}

/* --------------------------------------------------------------------------
   10. PASSWORD-PROTECTED PAGES

   Styles the replacement password form from functions.php. Input styling
   mirrors .form-group input in contact.css so the two look related.
   -------------------------------------------------------------------------- */

.post-password-form {
    max-width: 460px;
    margin: 0 auto;
    text-align: center;
}

.post-password-intro {
    font-size: 1.05rem;
    color: var(--text-light);
    margin-bottom: 28px;
}

.post-password-fields {
    display: flex;
    gap: 12px;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
}

.post-password-form input[type="password"] {
    flex: 1 1 220px;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--text-dark);
    background-color: var(--bg-white);
    outline: none;
    transition: border-color 0.3s ease;
}

.post-password-form input[type="password"]:focus {
    border-color: var(--accent);
}

.post-password-form .btn {
    flex: 0 0 auto;
    cursor: pointer;
}

.post-password-help {
    margin-top: 28px;
    font-size: 0.9rem;
    color: var(--text-light);
}

.post-password-help a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.post-password-help a:hover {
    color: var(--accent);
}

@media (max-width: 480px) {
    .post-password-fields {
        flex-direction: column;
    }
}

/* --------------------------------------------------------------------------
   11. SCREEN READER TEXT
   WordPress markup expects this class to exist.
   -------------------------------------------------------------------------- */

.screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: var(--bg-cream);
    clip-path: none;
    color: var(--primary);
    display: block;
    font-size: 0.9rem;
    height: auto;
    left: 5px;
    padding: 15px 23px;
    top: 5px;
    width: auto;
    z-index: 100000;
}