/* Styles intended only for the front.*/

body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

.wp-block-image {
    display: flex;
}

/* Custom Button Styles */
.wp-block-button__link {
    display: inline-flex !important;
    align-items: center;
    border-radius: 99px !important;
    padding: 0px 0px 0px 24px !important;
    transition: all 0.3s ease;
    text-decoration: none !important;
    background-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--white) !important;
}

.wp-block-button__link::after {
    content: "";
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--wp--preset--color--white);
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19' stroke='%230a5259' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 5L19 12L12 19' stroke='%230a5259' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: 20px;
}

.is-style-inverted .wp-block-button__link {
    background-color: var(--wp--preset--color--white) !important;
    color: var(--wp--preset--color--primary) !important;
}

.is-style-inverted .wp-block-button__link::after {
    background-color: var(--wp--preset--color--primary);
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 5L19 12L12 19' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.wp-block-button__link:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Custom List Styles */
.is-style-check-list {
    list-style: none;
    padding-left: 0;
}

.is-style-check-list li {
    position: relative;
    padding-left: 36px;
    margin-bottom: 12px;
}

.is-style-check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 24px;
    height: 24px;
    background-color: var(--wp--preset--color--primary);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM17.74 9.00601C18.1115 8.59736 18.0813 7.96491 17.6727 7.5934C17.264 7.22189 16.6316 7.25201 16.2601 7.66067L10.3445 14.1678L7.74985 11.2273C7.38445 10.8132 6.75251 10.7737 6.33839 11.1391C5.92427 11.5045 5.88477 12.1364 6.25017 12.5505L9.38652 16.105C9.88579 16.6709 10.766 16.6774 11.2736 16.119L17.74 9.00601Z' fill='%23000000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM17.74 9.00601C18.1115 8.59736 18.0813 7.96491 17.6727 7.5934C17.264 7.22189 16.6316 7.25201 16.2601 7.66067L10.3445 14.1678L7.74985 11.2273C7.38445 10.8132 6.75251 10.7737 6.33839 11.1391C5.92427 11.5045 5.88477 12.1364 6.25017 12.5505L9.38652 16.105C9.88579 16.6709 10.766 16.6774 11.2736 16.119L17.74 9.00601Z' fill='%23000000'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Navigation Styles */
header {
    position: sticky;
    top: 20px;
    z-index: 1000;
    width: calc(100% - 40px);
    max-width: 1265px;
    margin: 20px auto 0;
    border-radius: 36px;
    background-color: var(--wp--preset--color--white);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: top 0.3s ease, box-shadow 0.3s ease;
}

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

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

@media (max-width: 600px) {
    .admin-bar header {
        top: 20px;
    }
}

header .custom-logo,
header .wp-block-site-logo img {
    max-height: 44px;
    width: auto;
    object-fit: contain;
}

body.has-modal-open header,
html.has-modal-open header {
    box-shadow: none !important;
}

.sticky-header {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Front page hero section tucks under the sticky header */
body.home main > .wp-block-group:first-child,
body.home #home {
    margin-top: -108px;
}

.wp-block-navigation a.active {
    color: var(--wp--preset--color--primary) !important;
    font-weight: 600;
}


/* Mobile Menu Drawer Professional Redesign (Left-aligned with Clean Dividers) */
.wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: var(--wp--preset--color--white, #ffffff) !important;
    z-index: 999999 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.has-modal-open .admin-bar .is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-dialog,
.admin-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.has-modal-open .wp-block-navigation__responsive-dialog {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 28px !important;
    position: relative !important;
    margin: 0 !important;
    margin-top: 0 !important;
}

/* Header Top Bar inside Mobile Overlay */
.is-menu-open .cloned-logo {
    display: flex !important;
    align-items: center !important;
    position: absolute !important;
    top: 29px !important;
    left: 28px !important;
    z-index: 10 !important;
    margin: 0 !important;
}

.cloned-logo img {
    max-width: 130px !important;
    height: auto !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    position: absolute !important;
    top: 24px !important;
    right: 28px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background-color: var(--wp--preset--color--base, #f6f5fa) !important;
    border: none !important;
    color: var(--wp--preset--color--contrast, #2a393c) !important;
    font-size: 0 !important;
    cursor: pointer !important;
    z-index: 10 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
    width: 20px !important;
    height: 20px !important;
    fill: currentColor !important;
}

/* Left-Aligned Navigation Content */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding-top: 80px !important;
    padding-bottom: 24px !important;
    box-sizing: border-box !important;
}

.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    width: 100% !important;
    text-align: left !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(42, 57, 60, 0.08) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    font-size: 1.15rem !important;
    font-weight: 500 !important;
    color: var(--wp--preset--color--contrast, #2a393c) !important;
    text-decoration: none !important;
    display: block !important;
    padding: 16px 0 !important;
    width: 100% !important;
    text-align: left !important;
    transition: color 0.2s ease, padding-left 0.2s ease !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.active {
    color: var(--wp--preset--color--primary, #0a5259) !important;
    padding-left: 8px !important;
}

.cloned-logo,
.cloned-buttons {
    display: none;
}

.is-menu-open .cloned-buttons {
    margin-top: 32px !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
}

.cloned-buttons .wp-block-button__link {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
}

@media (max-width: 781px) {
    header .wp-block-buttons:not(.cloned-buttons) {
        display: none !important;
    }
}

.glass-effect {
    background: rgba(255, 255, 255, 0.28);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5.5px);
    -webkit-backdrop-filter: blur(5.5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.grid-3-box {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.grid-3-box>.wp-block-group,
.grid-4-box>.wp-block-group {
    height: 100% !important;
}

.grid-4-box {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width:1024px) {

    .grid-3-box,
    .grid-4-box {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:600px) {

    .grid-3-box,
    .grid-4-box {
        grid-template-columns: 1fr;
    }
}

.wp-block-navigation .wp-block-navigation-item__content {
    font-size: var(--wp--preset--font-size--medium) !important;
}

/* Custom Font Family Classes for Inline Text */
.has-system-font-family {
    font-family: var(--wp--preset--font-family--system) !important;
}

.has-crimson-pro-font-family {
    font-family: var(--wp--preset--font-family--crimson-pro) !important;
}

.has-dm-sans-font-family {
    font-family: var(--wp--preset--font-family--dm-sans) !important;
}

.has-ubuntu-font-family {
    font-family: var(--wp--preset--font-family--ubuntu) !important;
}

.has-serif-font-family {
    font-family: var(--wp--preset--font-family--serif) !important;
}

.has-monospace-font-family {
    font-family: var(--wp--preset--font-family--monospace) !important;
}

footer {
    margin-top: 0px !important;
}

/* Responsive Content Wrapping (Theme Unit Test Data) */
.wp-block-post-title,
.wp-block-post-content,
.wp-block-post-excerpt,
.wp-block-comment-content,
.entry-content,
.site-title {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Keyboard Accessibility Focus Highlighting */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.wp-block-button__link:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary, #0a5259);
    outline-offset: 2px;
}