/*
Theme Name: Serving Europe
Theme URI: https://servingeurope.com
Description: Child theme for PB Boilerplate — Serving Europe website.
Author: Publishing Bureau
Author URI: https://publishingbureau.co.uk
Template: pb-boilerplate
Version: 1.0.7
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: servingeurope
*/

/* ==========================================================================
   CSS Variables - Customise for Your Project
   Override parent theme defaults here to match your design
   ========================================================================== */

:root {
    /* Layout - Customise dimensions and spacing */
    --header-height: 117px;
    --header--nav--font-size: 14px;
    /* --content-width: 1200px; */
    /* --content-padding: 20px; */

    /* Typography - Define fonts in theme.json
       To customize fonts for your project, edit the child theme's theme.json file:
       settings.custom.typography.heading.fontFamily
       settings.custom.typography.body.fontFamily
    */
    /* --line-height-base: 1.6; */
    /* --line-height-heading: 1.2; */
    /* --font-weight-normal: 400; */
    /* --font-weight-bold: 600; */

    /* Font Sizes - Customise heading and text sizes
       Use theme.json for font sizes - it applies to both front end and editor */

    /* Spacing - Customise spacing scale */
    /* --spacing-xs: 0.5em; */
    /* --spacing-sm: 1em; */
    /* --spacing-md: 1.5em; */
    /* --spacing-lg: 2em; */
    /* --spacing-xl: 3em; */

    /* Border Radius - Customise corner roundness */
    /* --border-radius-sm: 3px; */
    /* --border-radius-md: 4px; */

    /* Transitions - Customise animation speed */
    /* --transition-speed: 0.2s; */

    /* Social Media Links - Defined in theme.json
       To customise social link appearance, edit the child theme's theme.json file:
       settings.custom.socialLinks

       Available options:
       - iconSize: Size of the icon SVG (default: 20px)
       - circleSize: Size of the circular button (default: 40px)
       - background: Background colour of the circle (default: #2C3E50)
       - iconColor: Colour of the icon (default: #FFFFFF)
       - backgroundHover: Background colour on hover (default: #3498DB)
       - iconColorHover: Icon colour on hover (default: #FFFFFF)
    */
}

/* ==========================================================================
   Child Theme Custom Styles
   Add your additional CSS below
   ========================================================================== */

/* Utility: side-by-side on mobile, stacked on desktop.
   Uses !important to override WordPress core inline layout styles. */
.mobile-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 1rem;
}

.mobile-row.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: unset !important;
}

@media (min-width: 769px) {
    .mobile-row {
        flex-direction: column !important;
    }
}

/* Text selection */
::selection {
    background-color: var(--wp--preset--color--pink);
    color: var(--wp--preset--color--white);
}

/* ==========================================================================
   Header — Two-Row Navigation Layout
   ========================================================================== */

/* Logo — overflows below the header */
.site-branding {
    position: relative;
    z-index: 2;
}

.site-branding .custom-logo {
    width: 200px;
    height: auto;
}

/* Navigation area — mobile first (single row with hamburger) */
.header-navigation-area {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.header-social-row {
    display: none;
}

/* Remove parent's margin-left: auto — the wrapper handles alignment */
.main-navigation {
    margin-left: 0;
}

/* Bold nav links */
.main-navigation a {
    font-weight: 700;
}

/* Active/ancestor items in rose */
.main-navigation .current-menu-item > a,
.main-navigation .current-page-ancestor > a {
    color: var(--wp--preset--color--rose);
}

/* Align search button flush right with social icons */
.nav-search__toggle {
    padding-right: 0;
}

/* Hide chevron on parent items */
.main-navigation .menu-item-has-children > a::after {
    display: none;
}

/* Hover/focus parent turns rose */
.main-navigation .menu-item-has-children:hover > a,
.main-navigation .menu-item-has-children:focus-within > a {
    color: var(--wp--preset--color--rose);
}

/* Dropdown overrides */
.main-navigation .sub-menu {
    border: none;
    box-shadow: none;
    padding-top: calc(var(--content-padding) + 2px);
}

/* Rose top border — shorter than dropdown width */
.main-navigation .sub-menu::before {
    content: "";
    position: absolute;
    top: var(--content-padding);
    left: 10px;
    right: 10px;
    height: 2px;
    background-color: var(--wp--preset--color--rose);
}

/* Remove borders between sub-menu items */
.main-navigation .sub-menu li {
    border-bottom: none;
}

/* Hide rose border in mobile toggled menu */
.main-navigation.toggled .sub-menu::before {
    display: none;
}

/* Social links inside the mobile menu — hidden by default */
.mobile-social-row {
    display: none;
}

.main-navigation.toggled .mobile-social-row {
    display: flex;
    position: fixed;
    top: var(--header-height, 80px);
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--header--background--colour, #FFF);
    padding: 16px 30px;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid var(--wp--preset--color--rose);
    box-sizing: border-box;
}

/* Push menu overlay down to make room for social row above */
.main-navigation.toggled > ul {
    top: calc(var(--header-height, 80px) + 51px);
    border-top: none;
}

/* ==========================================================================
   Header Social Links — Flat Icons (No Circle Background)
   ========================================================================== */

.header-social-links {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.header-social-links .social-link {
    width: auto;
    height: auto;
    border-radius: 0;
    background-color: transparent;
    color: var(--wp--preset--color--black);
}

.header-social-links .social-link:hover {
    transform: none;
    color: var(--wp--preset--color--rose);
}

.header-social-links .social-link svg {
    width: 18px;
    height: 18px;
}

/* ==========================================================================
   Header — Desktop Two-Row Layout
   ========================================================================== */

@media (min-width: 769px) {
    /* Stretch children to fill header height */
    .header-container {
        align-items: stretch;
    }

    /* Logo aligns to top so it overflows downward */
    .site-branding {
        display: flex;
        align-items: flex-start;
    }

    /* Show social row */
    .header-social-row {
        display: block;
    }

    /* Two-row column: social top, nav bottom */
    .header-navigation-area {
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        flex: 1;
    }

    /* Nav takes natural size, no flex grow */
    .main-navigation {
        flex: 0 0 auto;
    }
}

/* ==========================================================================
   Front Page — Full Width, No Top Spacing
   ========================================================================== */

.site-main {
    padding: 0;
}

.site-main--front-page {
    max-width: none;
}

/* Cover blocks fill viewport minus header */
.site-main--front-page .wp-block-cover {
    min-height: calc(100vh - var(--header-height));
}

/* Cover block H1 rendered as H2 */
.site-main--front-page .wp-block-cover h1 {
    font-size: clamp(42px, 1.45vw + 36.5px, 54px);
    font-weight: 300;
}

.site-main--front-page .wp-block-cover h1 strong {
    font-weight: 700;
}

/* ==========================================================================
   Tables
   ========================================================================== */

.wp-block-table,
.wp-block-table table,
.wp-block-table thead,
.wp-block-table tfoot,
.wp-block-table tbody,
.wp-block-table tr,
.wp-block-table th,
.wp-block-table td {
    border: none;
}

.wp-block-table thead th,
.wp-block-table thead td,
.wp-block-table tfoot th,
.wp-block-table tfoot td {
    background-color: var(--wp--preset--color--slate);
    color: var(--wp--preset--color--white);
    font-weight: 700;
}

.wp-block-table tbody tr:nth-child(odd) {
    background-color: var(--wp--preset--color--ice);
}

.wp-block-table tbody tr:nth-child(even) {
    background-color: var(--wp--preset--color--white);
}

/* ==========================================================================
   Pullquote
   ========================================================================== */

.wp-block-pullquote {
    text-align: left;
}

/* ==========================================================================
   Buttons — pill outline with SVG arrow
   ========================================================================== */

.wp-block-button__link {
    position: relative;
    padding-top: 0.5rem;
    padding-right: 3em;
    padding-bottom: 0.5rem;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wp-block-button__link:hover {
    background: transparent linear-gradient(180deg, var(--wp--preset--color--pink) 0%, var(--wp--preset--color--rose) 100%) 0% 0% no-repeat padding-box;
    text-decoration: none;
}

.wp-block-button__link::after {
    content: "";
    position: absolute;
    right: 1.2em;
    top: 50%;
    transform: translateY(-50%);
    width: 1em;
    height: 1em;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12h16m0 0l-6-6m6 6l-6 6' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12h16m0 0l-6-6m6 6l-6 6' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

/* ==========================================================================
   Latest News Cards — [latest-news] shortcode
   ========================================================================== */

.news-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.news-card {
    display: flex;
    flex-direction: column;
    background-color: var(--wp--preset--color--white);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease;
}

.news-card:hover {
    text-decoration: none;
}

.news-card__image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.news-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.news-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.25rem;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: 0 0 12px 12px;
}

.news-card:hover .news-card__body {
    background-color: var(--wp--preset--color--rose);
    color: var(--wp--preset--color--white);
}

.news-card__date {
    font-size: var(--wp--preset--font-size--small);
    margin-bottom: 0.25rem;
}

.news-card__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--wp--preset--color--black);
    margin: 0 0 auto;
    padding-bottom: 1.25rem;
}

.news-card:hover .news-card__title {
    color: var(--wp--preset--color--white);
}

.news-card__read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    color: var(--wp--preset--color--rose);
    transition: color 0.2s ease;
}

.news-card:hover .news-card__read-more {
    color: var(--wp--preset--color--white);
}

.news-card__read-more::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12h16m0 0l-6-6m6 6l-6 6' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12h16m0 0l-6-6m6 6l-6 6' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

@media (min-width: 769px) {
    .news-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   News Hero — single news article header
   ========================================================================== */

.news-hero {
    position: relative;
    min-height: 430px;
    display: flex;
    align-items: center;
    background-color: var(--wp--preset--color--emerald);
    background-size: cover;
    background-position: center;
    padding: 40px var(--content-padding, 20px);
}

.news-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 70%);
}

.news-hero__title {
    position: relative;
    max-width: var(--wp--style--global--content-size, 1200px);
    margin: 0 auto;
    width: 100%;
    color: var(--wp--preset--color--white);
    font-weight: 300;
}

/* Spacing above article content */
.single-news .entry-content {
    padding-top: var(--wp--preset--spacing--80);
}

/* ==========================================================================
   News List — [news-list] shortcode
   ========================================================================== */

.news-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.news-list-card {
    display: flex;
    border-radius: 20px;
    box-shadow: 0px 0px 10px #00000029;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: var(--wp--preset--color--white);
    transition: box-shadow 0.2s ease;
}

.news-list-card:hover {
    box-shadow: 0px 0px 20px #00000040;
    text-decoration: none;
}

.news-list-card__image {
    flex: 0 0 200px;
    width: 200px;
    min-height: 200px;
}

.news-list-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.news-list-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 32px;
    gap: 8px;
}

.news-list-card__date {
    font-size: 16px;
    color: var(--wp--preset--color--black);
    font-weight: 400;
}

.news-list-card__title {
    font-size: 22px;
    color: var(--wp--preset--color--black);
    font-weight: 800;
    margin: 0;
}

.news-list-card__read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: 16px;
    font-weight: 700;
    color: var(--wp--preset--color--rose);
}

.news-list-card__read-more::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12h16m0 0l-6-6m6 6l-6 6' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12h16m0 0l-6-6m6 6l-6 6' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

/* Mobile: stack vertically */
@media (max-width: 480px) {
    .news-list-card {
        flex-direction: column;
    }

    .news-list-card__image {
        flex: none;
        width: 100%;
        height: 200px;
    }
}

/* ==========================================================================
   Members Grid — [members] shortcode
   ========================================================================== */

/* Shared card styles */
.member-logo,
.member-card {
    background-color: var(--wp--preset--color--white);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0px 0px 10px #00000029;
}

a.member-logo:hover,
a.member-card:hover {
    text-decoration: none;
}

/* ------ Logos display (6/4 cols, centred last row) ------ */

.members-grid--logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.members-grid--logos .member-logo {
    flex: 0 0 calc((100% - 3 * 1rem) / 4);
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    padding: 1rem;
}

.members-grid--logos .member-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (min-width: 769px) {
    .members-grid--logos .member-logo {
        flex: 0 0 calc((100% - 5 * 1rem) / 6);
    }
}

/* ------ Cards display (4/2 cols, with name) ------ */

.members-grid--cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.member-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.member-card__image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 1.5rem;
}

.member-card__image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.member-card__name {
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 700;
    color: var(--wp--preset--color--black);
    padding: 0 1rem 1.25rem;
    margin: 0;
}

@media (min-width: 769px) {
    .members-grid--cards {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */

:root {
    --footer--background--colour: var(--wp--preset--color--black);
}

.site-footer {
    color: var(--wp--preset--color--white);
    border-top: none;
}

.footer-content {
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

/* Contact column */
.footer-contact h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--wp--preset--color--white);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 1rem;
}

.footer-contact p {
    color: var(--wp--preset--color--white);
    font-size: 14px;
    margin-bottom: 0;
}

.footer-contact a {
    color: var(--wp--preset--color--white);
}

.footer-contact a:hover {
    text-decoration: underline;
}

/* Address — spacer after */
.footer-contact .contact-address {
    margin-bottom: 1.5rem;
}

/* Phone + email grouped together */
.footer-contact .contact-phone,
.footer-contact .contact-email {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.footer-contact .contact-phone {
    margin-bottom: 0.25rem;
}

/* Email — spacer after */
.footer-contact .contact-email {
    margin-bottom: 1.5rem;
}

.footer-contact .contact-phone svg,
.footer-contact .contact-email svg {
    flex-shrink: 0;
}

/* EU register — spacer after */
.footer-contact .contact-eu-register {
    font-size: 13px;
    opacity: 0.85;
    margin-bottom: 1.5rem;
}

.footer-copyright {
    font-size: 13px;
    opacity: 0.85;
}

.footer-credit {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 0;
}

.footer-credit a {
    color: var(--wp--preset--color--white);
    text-decoration: none;
}

.footer-credit a:hover {
    text-decoration: underline;
}

/* Navigation columns (2 & 3) */
.footer-nav-column h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--wp--preset--color--white);
    margin-bottom: 1rem;
}

.footer-nav-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-nav-column li {
    margin-bottom: 0.5rem;
}

.footer-nav-column a {
    color: var(--wp--preset--color--white);
    text-decoration: none;
    font-size: 14px;
}

.footer-nav-column a:hover {
    text-decoration: underline;
}

/* Column 4: Remaining pages */
.footer-remaining-pages ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-remaining-pages li {
    margin-bottom: 1.5rem;
}

.footer-remaining-pages a {
    color: var(--wp--preset--color--white);
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
}

.footer-remaining-pages a:hover {
    text-decoration: underline;
}

/* Column 4: Social */
.footer-social h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--wp--preset--color--white);
    text-transform: none;
    letter-spacing: 0;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.footer-social-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.footer-social-links .social-link {
    width: auto;
    height: auto;
    border-radius: 0;
    background-color: transparent;
    color: var(--wp--preset--color--white);
}

.footer-social-links .social-link:hover {
    transform: none;
    opacity: 0.7;
}

.footer-social-links .social-link svg {
    width: 20px;
    height: 20px;
}

/* Desktop: four-column grid */
@media (min-width: 769px) {
    .footer-content {
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
    }

    .footer-credit {
        grid-column: 1;
    }
}