/*
Theme Name: Penn CFNP
Theme URI: https://www.untuck.com
Author: Untuck
Author URI: https://www.untuck.com
Description: Theme for the Penn CFNP website
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
Version: 1.0.49
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: penn-cfnp
*/

/* Fix alignfull to truly extend edge-to-edge */
.alignfull,
.wp-block-group.alignfull {
    margin-left: calc(-1 * (50vw - 50%));
    margin-right: calc(-1 * (50vw - 50%));
    width: 100vw;
    max-width: 100vw;
}

/* If there's unwanted horizontal scrolling, you might also need: */
body {
    overflow-x: hidden;
}

/* Navigation block gap - responds to editor controls */
.wp-block-navigation ul.wp-block-navigation__container {
    gap: var(--wp--style--block-gap, var(--wp--preset--spacing--50));
    display: flex;
}

.entry-content {
    padding-left: var(--wp--preset--spacing--x-16);
    padding-right: var(--wp--preset--spacing--x-16);
}

@media (max-width: 782px) {
    .single-person .entry-content {
        padding-left: 0;
        padding-right: 0;
    }
}

.wp-block-group.container,
.container {
    max-width: 100rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--wp--preset--spacing--x-16);
    padding-right: var(--wp--preset--spacing--x-16);
    box-sizing: border-box;
}

/* .wp-block-group.alignfull > * {
    padding-left: var(--wp--preset--spacing--x-16);
    padding-right: var(--wp--preset--spacing--x-16);
} */

.wp-block-group.container-fluid {
    max-width: 100vw;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--wp--preset--spacing--x-16);
    padding-right: var(--wp--preset--spacing--x-16);
}

@media (max-width: 782px) {
    .wp-block-group.hide-on-mobile {
        display: none !important;
    }

    .wp-block-group.is-layout-grid {
        display: flex;
        flex-direction: column;
    }
}



.hidden {
    display: none !important;
}

/* Custom Button Styles */
/* Add FontAwesome arrow icon to all buttons */
.wp-block-button__link::after {
    font-family: "Font Awesome 6 Pro" !important;
    content: "\f061" !important;
    font-weight: 300 !important;
    font-style: normal !important;
    margin-left: 8px !important;
    display: inline-block !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
}

.wp-block-button.is-style-small .wp-block-button__link {
    height: 48px !important;
    padding: var(--wp--preset--spacing--x-12) !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    transition: background-color 0.3s ease !important;
    font-family: var(--wp--preset--font-family--mozaic-geo) !important;
    font-size: var(--wp--preset--font-size--base) !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    letter-spacing: 1.6px !important;
    text-transform: uppercase !important;
    border-radius: var(--wp--preset--spacing--x-4) !important;
    background: var(--wp--preset--color--red-500) !important;
}

.wp-block-button.is-style-small .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--red-600) !important;
}

.wp-block-button.is-style-small-outline .wp-block-button__link {
    height: 48px !important;
    padding: var(--wp--preset--spacing--x-12) !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    transition: all 0.3s ease !important;
    font-family: var(--wp--preset--font-family--mozaic-geo) !important;
    font-size: var(--wp--preset--font-size--base) !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    letter-spacing: 1.6px !important;
    text-transform: uppercase !important;
    border-radius: var(--wp--preset--spacing--x-4) !important;
    background: var(--wp--preset--color--white) !important;
    color: var(--wp--preset--color--red-500) !important;
    border: 2px solid var(--wp--preset--color--red-500) !important;
}

.wp-block-button.is-style-small-outline .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--red-500) !important;
    color: var(--wp--preset--color--white) !important;
}

/* Text Link Button Style */
.wp-block-button.is-style-text-link .wp-block-button__link {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    color: var(--wp--preset--color--navy-500);
    font-size: var(--wp--preset--font-size--lg);
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
    text-align: left;
}

.wp-block-button.is-style-text-link .wp-block-button__link::after {
    font-family: "Font Awesome 6 Pro" !important;
    content: "\f061" !important;
    font-weight: 300 !important;
    font-style: normal !important;
    display: inline-block !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    font-size: 1rem;
    transition: transform 0.2s ease;
    position: relative;
    top: 1.5px;
}

.wp-block-button.is-style-text-link .wp-block-button__link:hover {
    color: var(--wp--preset--color--red-500) !important;
    background: none !important;
}

.wp-block-button.is-style-text-link .wp-block-button__link::before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    width: 0;
    height: 1px;
    background-color: var(--wp--preset--color--red-500);
    transition: width 0.2s ease;
}

.wp-block-button.is-style-text-link .wp-block-button__link:hover::before {
    width: 100%;
}

.wp-block-button.is-style-text-link .wp-block-button__link:hover::after {
    transform: translateX(4px);
}

/* Group Block - Dividers Style (for Grid Layout) */
.wp-block-group.is-layout-grid.is-style-dividers {
    position: relative;
}

/* Create divider lines using calculated positions from JavaScript */
/* 2 columns - 1 divider */
.wp-block-group.is-layout-grid.is-style-dividers[data-columns="2"]::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--divider-1, 50%);
    width: 1px;
    background-color: var(--wp--preset--color--blue-300);
    pointer-events: none;
    z-index: 1;
}

/* 3 columns - 2 dividers */
.wp-block-group.is-layout-grid.is-style-dividers[data-columns="3"]::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--divider-1, 33.333%);
    width: 1px;
    background-color: var(--wp--preset--color--blue-300);
    pointer-events: none;
    z-index: 1;
}

.wp-block-group.is-layout-grid.is-style-dividers[data-columns="3"]::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--divider-2, 66.667%);
    width: 1px;
    background-color: var(--wp--preset--color--blue-300);
    pointer-events: none;
    z-index: 1;
}

/* 4 columns - 3 dividers using box-shadow */
.wp-block-group.is-layout-grid.is-style-dividers[data-columns="4"]::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--divider-1, 25%);
    width: 1px;
    background-color: var(--wp--preset--color--blue-300);
    pointer-events: none;
    z-index: 1;
    box-shadow: 
        calc(var(--divider-2, 50%) - var(--divider-1, 25%)) 0 0 0 var(--wp--preset--color--blue-300),
        calc(var(--divider-3, 75%) - var(--divider-1, 25%)) 0 0 0 var(--wp--preset--color--blue-300);
}

/* 5 columns - 4 dividers using box-shadow */
.wp-block-group.is-layout-grid.is-style-dividers[data-columns="5"]::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--divider-1, 20%);
    width: 1px;
    background-color: var(--wp--preset--color--blue-300);
    pointer-events: none;
    z-index: 1;
    box-shadow: 
        calc(var(--divider-2, 40%) - var(--divider-1, 20%)) 0 0 0 var(--wp--preset--color--blue-300),
        calc(var(--divider-3, 60%) - var(--divider-1, 20%)) 0 0 0 var(--wp--preset--color--blue-300),
        calc(var(--divider-4, 80%) - var(--divider-1, 20%)) 0 0 0 var(--wp--preset--color--blue-300);
}

/* 6 columns - 5 dividers using box-shadow */
.wp-block-group.is-layout-grid.is-style-dividers[data-columns="6"]::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--divider-1, 16.667%);
    width: 1px;
    background-color: var(--wp--preset--color--blue-300);
    pointer-events: none;
    z-index: 1;
    box-shadow: 
        calc(var(--divider-2, 33.333%) - var(--divider-1, 16.667%)) 0 0 0 var(--wp--preset--color--blue-300),
        calc(var(--divider-3, 50%) - var(--divider-1, 16.667%)) 0 0 0 var(--wp--preset--color--blue-300),
        calc(var(--divider-4, 66.667%) - var(--divider-1, 16.667%)) 0 0 0 var(--wp--preset--color--blue-300),
        calc(var(--divider-5, 83.333%) - var(--divider-1, 16.667%)) 0 0 0 var(--wp--preset--color--blue-300);
}

/* Hide dividers on mobile and force row gap */
@media (max-width: 782px) {
    .wp-block-group.is-layout-grid.is-style-dividers::before,
    .wp-block-group.is-layout-grid.is-style-dividers::after {
        display: none;
    }
    
    .wp-block-group.is-layout-grid.is-style-dividers {
        row-gap: var(--wp--preset--spacing--x-36) !important;
    }
}