/* ==========================================================================
   PMC Layout Repair
   Loaded last, so it wins without needing !important in most cases.

   Only contains fixes for problems confirmed against the live pages.
   Where a fix would require guessing at Elementor container IDs, a reusable
   utility class is provided instead — see "Utilities" at the bottom.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Section centring
   Guarantees every PMC section is a centred 1200px column, regardless of what
   the Elementor container is set to.
   -------------------------------------------------------------------------- */

.pmc-inner-section > .e-con-inner,
.pmc-inner-hero > .e-con-inner {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
}

/* --------------------------------------------------------------------------
   2. Notice cards
   pmc-inner-pages.css forces min-height:280px (260px in the base widget),
   which left a large empty band between the excerpt and the footer on cards
   with short content. Grid rows already equalise card heights, so the fixed
   minimum only ever caused the gap.
   -------------------------------------------------------------------------- */

.pmc-dynamic-notice,
.pmc-inner-page .pmc-dynamic-notice {
    min-height: 0;
}

.pmc-dynamic-notice__excerpt {
    margin-bottom: 18px;
}

/* Keep a floor so a single-line notice still reads as a card. */
.pmc-dynamic-notices__grid > .pmc-dynamic-notice {
    min-height: 190px;
}

/* --------------------------------------------------------------------------
   3. Curated posts list — badge placement
   The badge was pinned to the top-right corner, floating away from the title
   it describes. Centring it on the row keeps the association clear.
   -------------------------------------------------------------------------- */

.pmc-recent-post__badge {
    top: 50%;
    transform: translateY(-50%);
}

.pmc-recent-post__content {
    padding-right: 84px;
}

@media (max-width: 480px) {
    .pmc-recent-post__badge {
        top: auto;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   4. Button sizing
   Stacked calls to action rendered at three different widths because each
   button sized to its own label. A shared minimum lines them up.
   -------------------------------------------------------------------------- */

.pmc-inner-btn-primary .elementor-button,
.pmc-inner-btn-secondary .elementor-button {
    min-width: 220px;
    justify-content: center;
}

@media (max-width: 600px) {
    .pmc-inner-btn-primary .elementor-button,
    .pmc-inner-btn-secondary .elementor-button {
        min-width: 100%;
    }
}

/* Buttons sitting directly under one another read better as a row. */
.pmc-inner-actions {
    align-items: flex-start;
}

/* --------------------------------------------------------------------------
   5. Headings
   Stops short headings breaking one word onto their own line
   ("Before you contact / us", "Choose a / Service").
   -------------------------------------------------------------------------- */

.pmc-inner-section-title .elementor-heading-title,
.pmc-inner-hero-title .elementor-heading-title,
.pmc-inner-card .elementor-heading-title,
.pmc-inner-info-card .elementor-heading-title,
.pmc-inner-step .elementor-heading-title,
.pmc-inner-service-card__title,
.pmc-inner-news-card__title,
.pmc-dynamic-notice__title {
    text-wrap: balance;
}

/* --------------------------------------------------------------------------
   6. Card grids — fill the row
   When a grid has fewer items than columns the remaining cards should keep
   their column width rather than stretching across the gap.
   -------------------------------------------------------------------------- */

.pmc-inner-cards,
.pmc-inner-info-grid,
.pmc-inner-services__grid,
.pmc-inner-news__grid,
.pmc-dynamic-notices__grid {
    align-items: stretch;
}

.pmc-inner-service-card,
.pmc-inner-news-card,
.pmc-dynamic-notice {
    height: 100%;
}

/* --------------------------------------------------------------------------
   7. Accessibility — visible keyboard focus
   Astra and Elementor both suppress the default outline. A government site
   needs a visible focus state.
   -------------------------------------------------------------------------- */

.pmc-inner-service-card__title:focus-visible,
.pmc-inner-service-card__link:focus-visible,
.pmc-inner-news-card__title:focus-visible,
.pmc-inner-news-card__more:focus-visible,
.pmc-dynamic-notice__title:focus-visible,
.pmc-recent-post:focus-visible,
.pmc-inner-news__filters button:focus-visible,
.pmc-dynamic-notices__tabs button:focus-visible,
.pmc-inner-breadcrumb a:focus-visible,
.pmc-standard-copy a:focus-visible {
    outline: 3px solid #06894a;
    outline-offset: 3px;
    border-radius: 3px;
}

/* --------------------------------------------------------------------------
   8. Notice type tabs — active state contrast
   -------------------------------------------------------------------------- */

.pmc-dynamic-notices__tabs button {
    font-weight: 650;
}

.pmc-dynamic-notices__tabs button:hover {
    border-color: #06894a;
    color: #06894a;
}

.pmc-dynamic-notices__tabs button.is-active:hover {
    color: #fff;
}

/* --------------------------------------------------------------------------
   9. Notice-type tabs on the homepage
   These were inert <span> elements; they are now links into the notices
   directory, so they need the interactive styling the spans had.
   -------------------------------------------------------------------------- */

.pmc-tabs a {
    display: inline-block;
    padding: 13px 16px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    font-size: 14px;
    border-bottom: 3px solid transparent;
}

.pmc-notices .pmc-tabs a {
    color: #bdd0db;
}

.pmc-tabs a:hover,
.pmc-tabs a:focus-visible {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, .45);
}

.pmc-tabs a.is-active,
.pmc-notices .pmc-tabs a.is-active {
    color: #fff;
    border-bottom-color: #d7a33d;
}

.pmc-dynamic-notices__none {
    margin: 20px 0 0;
    padding: 24px;
    border: 1px solid #d7e1e8;
    border-left: 4px solid #06894a;
    border-radius: 7px;
    background: #f4f8fa;
    color: #063e63;
    font-weight: 650;
}

.pmc-dynamic-notices__none[hidden] {
    display: none;
}

/* --------------------------------------------------------------------------
   10. Homepage mayor portrait
   The portrait is now a real image rather than a grey placeholder block.
   -------------------------------------------------------------------------- */

.pmc-mayor .pmc-portrait {
    overflow: hidden;
    border-radius: 8px;
}

.pmc-mayor .pmc-portrait img {
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   Utilities

   Add these as a CSS class on any Elementor container
   (Advanced -> CSS Classes) to correct a layout without editing its settings.
   ========================================================================== */

/* Two equal columns that collapse to one on tablet. Use on a container whose
   children have stacked into a narrow column instead of sitting side by side. */
.pmc-two-col > .e-con-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
}

.pmc-two-col > .e-con-inner > .e-con,
.pmc-two-col > .e-con-inner > .elementor-widget {
    width: 100%;
    max-width: 100%;
}

/* Wider left column — good for a map or photo beside a short block of text. */
.pmc-two-col--wide-first > .e-con-inner {
    grid-template-columns: 1.35fr 1fr;
}

.pmc-two-col--wide-last > .e-con-inner {
    grid-template-columns: 1fr 1.35fr;
}

@media (max-width: 900px) {
    .pmc-two-col > .e-con-inner,
    .pmc-two-col--wide-first > .e-con-inner,
    .pmc-two-col--wide-last > .e-con-inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* Force a container's children to use the full available width. */
.pmc-full-width > .e-con-inner {
    width: 100%;
    max-width: 100%;
}

.pmc-full-width > .e-con-inner > .e-con,
.pmc-full-width > .e-con-inner > .elementor-widget {
    width: 100%;
    max-width: 100%;
}

/* Lay buttons out in a wrapping row instead of a stack. */
.pmc-button-row > .e-con-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 13px;
    align-items: center;
}

.pmc-button-row > .e-con-inner > .elementor-widget {
    width: auto;
}

/* Constrain an image so a portrait or square photo does not dominate. */
.pmc-media-frame img {
    width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 10px;
}

/* Use on a card image when the source is a logo or emblem rather than a photo,
   so it is letterboxed instead of cropped through the middle. */
.pmc-logo-image .pmc-inner-news-card__image img,
.pmc-logo-image img {
    object-fit: contain;
    padding: 14px;
    background: #f4f8fa;
}

/* --------------------------------------------------------------------------
   11. Primary inner-page split layouts
   Elementor's map widget and an unset image-widget width both default to
   100%, so percentage-based flex children wrapped onto a second row. These
   grids keep the original Elementor widgets editable while making the layout
   explicit at every breakpoint.
   -------------------------------------------------------------------------- */

.page-id-8 .elementor-element-c2565,
.page-id-8 .pmc-about-intro-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
    align-items: center;
    gap: 48px !important;
}

.page-id-9 .elementor-element-c25aa,
.page-id-9 .pmc-contact-visit-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr);
    align-items: stretch;
    gap: 35px !important;
}

.page-id-8 .elementor-element-c2565 > .elementor-widget,
.page-id-8 .elementor-element-c2565 > .e-con,
.page-id-9 .elementor-element-c25aa > .elementor-widget,
.page-id-9 .elementor-element-c25aa > .e-con {
    --width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
}

.page-id-9 .pmc-contact-visit-card,
.page-id-9 .elementor-element-c25a9 {
    justify-content: center;
    padding: clamp(28px, 4vw, 46px);
    border: 1px solid #d7e1e8;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(18, 48, 67, .07);
}

.page-id-9 .elementor-element-c25a8 {
    flex-direction: column !important;
    align-items: stretch;
}

.page-id-9 .elementor-element-c25a8 .elementor-widget-button,
.page-id-9 .elementor-element-c25a8 .elementor-button {
    width: 100%;
    min-width: 0;
}

.page-id-9 .elementor-element-w25a2,
.page-id-9 .elementor-element-w25a2 .elementor-widget-container,
.page-id-9 .elementor-element-w25a2 iframe {
    height: 100%;
    min-height: 430px;
}

/* The directory has four live notice types, so its four cards form one clean
   desktop row. This is page-scoped; the homepage notice layout is unchanged. */
.page-id-87 .elementor-element-w258q .pmc-dynamic-notices__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Keep the selected-stories list readable rather than stretching sparse rows
   across the full 1200px canvas. */
.page-id-15 .elementor-element-w259a {
    width: 100%;
    max-width: 880px;
    margin-inline: auto;
}

@media (max-width: 1100px) {
    .page-id-87 .elementor-element-w258q .pmc-dynamic-notices__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .page-id-8 .elementor-element-c2565,
    .page-id-8 .pmc-about-intro-grid,
    .page-id-9 .elementor-element-c25aa,
    .page-id-9 .pmc-contact-visit-grid {
        grid-template-columns: 1fr;
        gap: 30px !important;
    }

    .page-id-9 .elementor-element-c25a9,
    .page-id-9 .pmc-contact-visit-card {
        grid-row: 1;
    }

    .page-id-9 .elementor-element-w25a2 {
        grid-row: 2;
    }
}

@media (max-width: 640px) {
    .page-id-87 .elementor-element-w258q .pmc-dynamic-notices__grid {
        grid-template-columns: 1fr;
    }

    .page-id-9 .pmc-contact-visit-card,
    .page-id-9 .elementor-element-c25a9 {
        padding: 24px 20px;
    }
}

/* Language labels become real links automatically once Polylang languages are
   configured. Until then they remain non-clickable text, never fake # links. */
.pmc-language-switcher {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.pmc-language-switcher__separator {
    opacity: .58;
}

/* --------------------------------------------------------------------------
   12. About-page mayor teaser
   Uses the same native Elementor card language as the full Mayor & Council
   page, with a quiet green-tinted section to separate it from the overview.
   -------------------------------------------------------------------------- */

.page-id-8 .pmc-about-mayor-section {
    border-top: 1px solid #dce9e2;
    border-bottom: 1px solid #dce9e2;
    background: linear-gradient(135deg, #eef7f2 0%, #f7faf9 58%, #eef4f7 100%);
}

.page-id-8 .pmc-about-mayor-layout {
    margin-top: 8px;
}

.page-id-8 .pmc-about-mayor-copy {
    background: rgba(255, 255, 255, .92);
}

.page-id-8 .pmc-about-mayor-copy .elementor-widget-button {
    margin-top: 4px;
}

@media (max-width: 640px) {
    .page-id-8 .pmc-about-mayor-copy .elementor-button {
        width: 100%;
    }
}