/* =============================================================================
   Geoxphere Base Theme CSS
   Custom styles beyond what theme.json provides.
   Swoosh device, eyebrow labels, component utilities.
   ============================================================================= */

/* --- Base resets --- */
.wp-site-blocks {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.wp-block-post-content {
    margin-top: 0;
    margin-bottom: 0;
}

main.wp-block-group {
    margin-top: 0;
    margin-bottom: 0;
}


.wp-site-blocks > * + * {
    margin-block-start: 0;
}

.wp-site-blocks {
    --wp--style--block-gap: 0 !important;
}

.wp-site-blocks > * {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}




*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

/* --- Swoosh device ---
   Apply class geo-has-swoosh to any Group block.
   The diagonal band uses the accent colour via CSS variable.
   Two variants: steep (hero) and shallow (section divider).
   ---------------------------------------------------------------- */
.geo-has-swoosh {
    position: relative;
    overflow: hidden;
}

.geo-has-swoosh::before {
    content: '';
    position: absolute;
    right: -80px;
    top: -40px;
    width: 400px;
    height: 280px;
    background: var(--wp--preset--color--accent);
    transform: skewY(-12deg);
    opacity: 0.08;
    border-radius: 4px;
    pointer-events: none;
    z-index: 0;
}

.geo-has-swoosh::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: -20px;
    right: 0;
    height: 60px;
    background: #ffffff;
    transform: skewY(-2deg);
    opacity: 0.75;
    pointer-events: none;
    z-index: 0;
}

/* Ensure content sits above swoosh pseudo-elements */
.geo-has-swoosh > * {
    position: relative;
    z-index: 1;
}

/* --- Accent bar ---
   A 4px horizontal bar in the accent colour.
   Used below the nav header on all sites.
   ---------------------------------------------------------------- */
.geo-accent-bar {
    height: 4px;
    background: var(--wp--preset--color--accent);
    width: 100%;
}

/* --- Eyebrow label ---
   Small uppercase label above headings.
   ---------------------------------------------------------------- */
.geo-eyebrow {
    font-size: 0.6875rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    opacity: 0.6;
    margin-bottom: 0.75rem !important;
}

/* --- Navigation --- */
.wp-block-navigation {
    font-size: var(--wp--preset--font-size--small);
    font-weight: 500;
}

/* --- Buttons --- */
.wp-block-button__link {
    font-weight: 500;
    font-size: var(--wp--preset--font-size--small);
    padding: 0.7em 1.4em;
    border-radius: 4px;
    letter-spacing: 0.02em;
    transition: opacity 0.15s ease;
}

.wp-block-button__link:hover {
    opacity: 0.85;
}

.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent !important;
    border: 2px solid currentColor;
}

/* --- Testimonial block --- */
.geo-testimonial {
    border-left: 4px solid var(--wp--preset--color--accent);
    padding-left: 1.5rem;
    font-style: italic;
}

.geo-testimonial cite {
    display: block;
    font-style: normal;
    font-size: var(--wp--preset--font-size--small);
    opacity: 0.6;
    margin-top: 0.75rem;
    font-weight: 500;
}

/* --- Feature icon placeholder ---
   Used in feature row pattern.
   ---------------------------------------------------------------- */
.geo-feature-icon {
    width: 40px;
    height: 40px;
    background: var(--wp--preset--color--accent);
    border-radius: 8px;
    margin-bottom: 1rem;
    opacity: 0.8;
}

/* --- Pricing table --- */
.geo-pricing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--wp--preset--font-size--small);
    margin: 1.5rem 0;
}

.geo-pricing-table th {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
    padding: 12px 16px;
    text-align: left;
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.geo-pricing-table th.geo-tier-highlight {
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--primary);
}

.geo-pricing-table td {
    padding: 10px 16px;
    border-bottom: 1px solid #e8e8e8;
    color: #555;
    vertical-align: middle;
}

.geo-pricing-table tr:last-child td { border-bottom: none; }

.geo-pricing-table td.geo-check::before {
    content: '✓';
    color: var(--wp--preset--color--primary);
    font-weight: 700;
}

.geo-pricing-table td.geo-cross::before {
    content: '—';
    color: #ccc;
}

.geo-pricing-table tr:nth-child(even) td {
    background: var(--wp--preset--color--off-white);
}

/* --- Website gallery --- */
.geo-website-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin: 1.5rem 0;
}

.geo-website-tile {
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.geo-website-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.geo-website-tile img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    object-position: top;
}

.geo-website-tile-label {
    padding: 10px 12px;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 500;
    background: var(--wp--preset--color--off-white);
    border-top: 1px solid #e0e0e0;
}

/* --- News feed grid --- */
.geo-news-grid .wp-block-post-template {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.geo-news-grid .wp-block-post {
    background: var(--wp--preset--color--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
}

.geo-news-grid .wp-block-post-featured-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.geo-news-grid .geo-post-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.geo-news-grid .wp-block-post-title a {
    font-size: var(--wp--preset--font-size--large);
    font-weight: 700;
    color: var(--wp--preset--color--primary);
    text-decoration: none;
    line-height: 1.3;
}

.geo-news-grid .wp-block-post-excerpt p {
    font-size: var(--wp--preset--font-size--small);
    color: #666;
    margin-top: 8px;
    flex: 1;
}

/* --- Section header utility --- */
.geo-section-header {
    margin-bottom: 2rem;
}


/* --- Responsive --- */
@media (max-width: 768px) {
    .geo-has-swoosh::before {
        width: 240px;
        height: 180px;
        right: -40px;
    }
    .geo-website-gallery {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

/* --- Navigation spacing and size --- */
.wp-block-navigation .wp-block-navigation-item {
    padding: 0 0.75rem !important;
}

.wp-block-navigation .wp-block-navigation-item__content {
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    padding: 0.5rem 0 !important;
}

/* --- Mobile navigation overlay --- */
.wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--white) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    color: var(--wp--preset--color--white) !important;
    font-size: 1.25rem !important;
    padding: 0.75rem 0 !important;
}

.wp-block-navigation__responsive-container-content {
    padding: 2rem !important;
}

.wp-block-navigation__responsive-close {
    color: var(--wp--preset--color--white) !important;
}

/* --- Navigation hover states --- */
.wp-block-navigation .wp-block-navigation-item__content {
    transition: opacity 0.15s ease;
    text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
    opacity: 1;
    color: var(--wp--preset--color--accent) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--wp--preset--color--accent);
}

/* --- GOV.UK style focus indicators ---
   Applies to all interactive elements sitewide.
   Yellow halo with dark offset, meets WCAG 2.2 Focus Visible.
   ---------------------------------------------------------------- */
:focus {
    outline: 3px solid transparent;
}

:focus-visible {
    outline: 3px solid #ffdd00;
    outline-offset: 0px;
    box-shadow: 0 0 0 6px #0b0c0c;
    text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-navigation-item__content:focus-visible,
.wp-block-button__link:focus-visible {
    outline: 3px solid #ffdd00;
    outline-offset: 0px;
    box-shadow: 0 0 0 6px #0b0c0c;
    background-color: #ffdd00;
    color: #0b0c0c !important;
}

/* Override for dark backgrounds - same yellow but ensures contrast */
.has-primary-background-color a:focus-visible,
.geo-site-header a:focus-visible,
.wp-block-navigation a:focus-visible {
    outline: 3px solid #ffdd00;
    box-shadow: 0 0 0 6px #0b0c0c;
    background-color: #ffdd00;
    color: #0b0c0c !important;
}

/* --- Footer column headings --- */
footer .wp-block-heading {
    margin-bottom: 1rem !important;
}

/* --- Sticky header --- */
header.wp-block-group.geo-site-header,
.wp-site-blocks > header,
header.wp-block-template-part {
    position: sticky;
    top: 0;
    z-index: 100;
}

.geo-site-header {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 56px;
}

/* --- Swoosh on coloured content blocks --- */
.wp-block-group.has-primary-background-color.geo-has-swoosh::before,
.wp-block-group.has-background.geo-has-swoosh::before {
    opacity: 0.1;
}

/* --- Footer internal spacing --- */
footer.wp-block-group .wp-block-columns {
    margin-bottom: var(--wp--preset--spacing--50) !important;
}

/* --- Column order for Content with Image blocks ---
   Consistent order on all non-desktop screens: image first, then heading/text/button
   Applies from 781px down to cover both tablet and mobile breakpoints
   ---------------------------------------------------------------- */
@media (max-width: 781px) {

    .wp-block-columns.are-vertically-aligned-center {
        display: flex !important;
        flex-direction: column !important;
    }

    .wp-block-columns.are-vertically-aligned-center .wp-block-column {
        width: 100% !important;
        flex-basis: 100% !important;
    }

    /* Text column (first in markup) goes below image on small screens */
    .wp-block-columns.are-vertically-aligned-center .wp-block-column:first-child {
        order: 2 !important;
    }

    /* Image column (second in markup) goes above text on small screens */
    .wp-block-columns.are-vertically-aligned-center .wp-block-column:last-child {
        order: 1 !important;
    }
}

@media (max-width: 781px) {
    .wp-block-columns.are-vertically-aligned-center {
        flex-wrap: wrap !important;
        flex-direction: column !important;
    }
}

/* --- Content with image column gap --- */
.wp-block-columns.are-vertically-aligned-center {
    gap: 0 var(--wp--preset--spacing--60);
}

/* --- Override WordPress inline column flex-wrap at tablet/mobile ---
   Targets the specific container hash WordPress generates for content-with-image columns.
   Overrides inline flex-wrap: nowrap so our column reorder can take effect.
   ---------------------------------------------------------------- */
@media (max-width: 781px) {
    .wp-container-core-columns-is-layout-1653e3f1 {
        flex-wrap: wrap !important;
        flex-direction: column !important;
    }

    .wp-container-core-columns-is-layout-1653e3f1 > .wp-block-column:first-child {
        order: 2 !important;
        flex-basis: 100% !important;
    }

    .wp-container-core-columns-is-layout-1653e3f1 > .wp-block-column:last-child {
        order: 1 !important;
        flex-basis: 100% !important;
    }
}

/* --- Mobile spacing between content and image in columns --- */
@media (max-width: 781px) {
    .wp-block-columns.are-vertically-aligned-center .wp-block-column:first-child {
        padding-top: var(--wp--preset--spacing--30) !important;
    }
}

/* --- Footer navigation link padding --- */
footer .wp-block-navigation .wp-block-navigation-item {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

footer .wp-block-navigation .wp-block-navigation-item__content {
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-size: 0.8125rem !important;
}

/* --- Text content page typography spacing --- */
.wp-block-group .wp-block-heading + p,
.wp-block-group p + p {
    margin-top: 0.75rem !important;
}

.wp-block-group h2.wp-block-heading,
.wp-block-group h3.wp-block-heading {
    margin-top: 2.5rem !important;
    margin-bottom: 0.75rem !important;
}

.wp-block-group h1.wp-block-heading {
    margin-bottom: 0.5rem !important;
}

/* --- News single hero padding --- */
.single-geo_news .geo-has-swoosh {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
    padding-left: var(--wp--preset--spacing--30) !important;
    padding-right: var(--wp--preset--spacing--30) !important;
}

/* --- News single hero taxonomy terms --- */
.single-geo_news .geo-has-swoosh .taxonomy-news-sector,
.single-geo_news .geo-has-swoosh .taxonomy-news-sector a,
.single-geo_news .geo-has-swoosh .taxonomy-news-site,
.single-geo_news .geo-has-swoosh .taxonomy-news-site a {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* --- Team feed grid --- */
.wp-block-post-template.is-layout-grid .wp-block-post {
    padding-bottom: var(--wp--preset--spacing--50) !important;
}

.wp-block-query .wp-block-post-excerpt {
    margin-top: 0.1rem !important;
    text-align: center !important;
}

.wp-block-query .wp-block-post-title {
    margin-bottom: 0.1rem !important;
    text-align: center !important;
}

/* --- FAQ accordion --- */
.geo-faq {
    margin-top: 1rem;
}

.geo-faq-item {
    border-bottom: 1px solid var(--wp--preset--color--rule, #e0e0e0);
    padding: 0;
}

.geo-faq-item:first-child {
    border-top: 1px solid var(--wp--preset--color--rule, #e0e0e0);
}

.geo-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 0;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
    color: var(--wp--preset--color--primary);
    gap: 1rem;
}

.geo-faq-question::-webkit-details-marker {
    display: none;
}

.geo-faq-question::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 300;
    flex-shrink: 0;
    color: var(--wp--preset--color--accent);
    transition: transform 0.2s ease;
}

.geo-faq-item[open] .geo-faq-question::after {
    transform: rotate(45deg);
}

.geo-faq-answer {
    padding: 0 0 1.25rem 0;
    font-size: 0.9375rem;
    color: #555;
    line-height: 1.7;
    max-width: 680px;
}

.geo-faq-answer p {
    margin-bottom: 0.75rem;
}

.geo-faq-answer p:last-child {
    margin-bottom: 0;
}

.geo-faq-question:focus-visible {
    outline: 3px solid #ffdd00;
    outline-offset: 2px;
}

/* --- FAQ accordion --- */
.geo-faq {
    margin-top: 1rem;
}

.geo-faq-item {
    border-bottom: 1px solid var(--wp--preset--color--rule, #e0e0e0);
    padding: 0;
}

.geo-faq-item:first-child {
    border-top: 1px solid var(--wp--preset--color--rule, #e0e0e0);
}

.geo-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 0;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
    color: var(--wp--preset--color--primary);
    gap: 1rem;
}

.geo-faq-question::-webkit-details-marker {
    display: none;
}

.geo-faq-question::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 300;
    flex-shrink: 0;
    color: var(--wp--preset--color--accent);
    transition: transform 0.2s ease;
}

.geo-faq-item[open] .geo-faq-question::after {
    transform: rotate(45deg);
}

.geo-faq-answer {
    padding: 0 0 1.25rem 0;
    font-size: 0.9375rem;
    color: #555;
    line-height: 1.7;
    max-width: 680px;
}

.geo-faq-answer p {
    margin-bottom: 0.75rem;
}

.geo-faq-answer p:last-child {
    margin-bottom: 0;
}

.geo-faq-question:focus-visible {
    outline: 3px solid #ffdd00;
    outline-offset: 2px;
}