/*
Theme Name: Larson Mental Health
Theme URI: https://www.larsonmentalhealth.com
Description: Custom block theme for larsonmentalhealth.com. No parent theme.
    Design tokens in theme.json; layout in /templates/ and /parts/.
Author: Fruition
Author URI: https://fruition.net
Version: 1.1.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.2
License: GPL v2 or later
Text Domain: larson
Tags: full-site-editing, block-styles, block-patterns, healthcare
*/

/* =============================================================================
 * SITE-WIDE
 * ============================================================================= */

body {
    font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
    font-family: 'Montserrat', system-ui, sans-serif !important;
}

/* =============================================================================
 * HEADER
 * ============================================================================= */

.larson-site-header .wp-block-site-logo img {
    max-width: 220px;
    height: auto;
}

.larson-reach-out p {
    margin: 0;
    line-height: 1;
    white-space: nowrap;
}

.larson-reach-out p a {
    text-decoration: none;
}

.larson-header-actions {
    gap: 12px;
}

/* =============================================================================
 * PRIMARY NAVIGATION
 * ============================================================================= */

.larson-primary-nav {
    width: 100%;
    justify-content: center;
}

/* Top-level nav item color/spacing */
.larson-primary-nav .wp-block-navigation-item > .wp-block-navigation-item__content {
    color: var(--wp--preset--color--primary) !important;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    text-decoration: none;
}

.larson-primary-nav .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--secondary) !important;
}

/* Submenu chevron */
.larson-primary-nav .wp-block-navigation-submenu__toggle svg {
    fill: var(--wp--preset--color--primary);
    width: 12px;
    height: 12px;
}

/* Submenu dropdown panel */
.larson-primary-nav .wp-block-navigation__submenu-container {
    background-color: #ffffff !important;
    border: 1px solid var(--wp--preset--color--border);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    border-radius: 4px;
    padding: 0.5rem 0;
    min-width: 240px;
}

.larson-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    color: var(--wp--preset--color--text) !important;
    padding: 0.5rem 1.25rem;
    font-weight: 400;
    font-size: 0.9375rem;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.larson-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.larson-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
    background-color: var(--wp--preset--color--sky-blue) !important;
    color: var(--wp--preset--color--primary) !important;
}

/* Submenu open/close — rely on WP's own aria-expanded state for clicks,
   add explicit :hover for desktop. We DON'T set display:none on the closed
   state ourselves; WP block CSS already does that, and our overrides were
   conflicting with the :hover transition. */
.larson-primary-nav .wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container,
.larson-primary-nav .wp-block-navigation-submenu:focus-within > .wp-block-navigation__submenu-container,
.larson-primary-nav .wp-block-navigation-submenu[aria-expanded="true"] > .wp-block-navigation__submenu-container {
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-direction: column;
    /* Position immediately below the parent item */
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
}

/* Make sure parent item is positioning context */
.larson-primary-nav .wp-block-navigation-submenu {
    position: relative;
}

/* =============================================================================
 * HERO (homepage)
 * ============================================================================= */

.larson-hero .wp-block-columns {
    gap: 0 !important;
    margin: 0 !important;
}

.larson-hero .larson-hero-image {
    align-self: stretch;
    padding: 0 !important;
}

.larson-hero .larson-hero-image figure,
.larson-hero .larson-hero-image .larson-hero-img {
    margin: 0;
    height: 100%;
    min-height: 480px;
}

.larson-hero .larson-hero-image img {
    width: 100%;
    height: 100%;
    min-height: 480px;
    object-fit: cover;
    display: block;
}

/* Force white text inside the navy hero text column.
   Uses :where(body) for low specificity OVERRIDE of theme.json — must be
   ABOVE the cascade with !important because WP block stylesheets are
   loaded after theme styles. */
body .larson-hero .wp-block-column.has-primary-background-color,
body .larson-hero .wp-block-column.has-primary-background-color h1,
body .larson-hero .wp-block-column.has-primary-background-color h1.wp-block-heading,
body .larson-hero .wp-block-column.has-primary-background-color h2,
body .larson-hero .wp-block-column.has-primary-background-color h3,
body .larson-hero .wp-block-column.has-primary-background-color p,
body .larson-hero .wp-block-column.has-primary-background-color a,
body .larson-hero .wp-block-column.has-primary-background-color .has-text-color {
    color: #ffffff !important;
}

body .larson-hero .wp-block-column.has-primary-background-color .wp-block-button__link {
    color: #ffffff !important;
}

/* Schedule Now button (filled, light blue) in hero */
body .larson-hero .wp-block-button .has-secondary-background-color.wp-block-button__link {
    background-color: var(--wp--preset--color--secondary) !important;
    color: #ffffff !important;
    border: none !important;
}

/* Learn More button (outline, white) in hero */
body .larson-hero .wp-block-button:not(:first-child) .wp-block-button__link {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

/* =============================================================================
 * PAGE HEROES (inner pages: condition, service, location, team_member)
 * Same layout pattern as homepage hero — navy text column + image column.
 * ============================================================================= */

.larson-page-hero .wp-block-columns {
    gap: 0 !important;
    margin: 0 !important;
}

.larson-page-hero .larson-hero-image {
    align-self: stretch;
    padding: 0 !important;
}

.larson-page-hero .larson-hero-image figure,
.larson-page-hero .larson-hero-image .larson-hero-img {
    margin: 0;
    height: 100%;
    min-height: 360px;
}

.larson-page-hero .larson-hero-image img {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
    display: block;
}

/* White text inside navy hero column on inner pages */
body .larson-page-hero .wp-block-column.has-primary-background-color,
body .larson-page-hero .wp-block-column.has-primary-background-color h1,
body .larson-page-hero .wp-block-column.has-primary-background-color h1.wp-block-heading,
body .larson-page-hero .wp-block-column.has-primary-background-color h2,
body .larson-page-hero .wp-block-column.has-primary-background-color p {
    color: #ffffff !important;
}

body .larson-page-hero .wp-block-column.has-primary-background-color .wp-block-button__link {
    color: #ffffff !important;
}

/* =============================================================================
 * TEAM HEADSHOT
 * ============================================================================= */

.larson-team-headshot img {
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    aspect-ratio: 3/4;
    object-fit: cover;
    width: 100%;
    height: auto;
}

.larson-team-hero h1 {
    color: var(--wp--preset--color--primary) !important;
}

/* =============================================================================
 * BLOCK CONTENT — constrain inner body width
 * ============================================================================= */

.wp-block-post-content > .wp-block-group:not(.alignfull):not(.alignwide) {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

main h2.wp-block-heading {
    color: var(--wp--preset--color--secondary);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

/* =============================================================================
 * STATIC PAGE TITLE STRIP (About, Contact, Insurance, etc.)
 * ============================================================================= */

.larson-page-title-strip h1 {
    color: var(--wp--preset--color--primary) !important;
    line-height: 1.15;
    margin: 0;
}

/* =============================================================================
 * ARCHIVE CARDS (location, condition, service, team archives)
 * ============================================================================= */

.larson-archive-card {
    transition: box-shadow .2s ease, transform .2s ease;
    overflow: hidden;
}

.larson-archive-card:hover {
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

.larson-archive-card .wp-block-post-featured-image {
    margin: 0 !important;
}

.larson-archive-card .wp-block-post-featured-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.larson-archive-card .wp-block-post-title a {
    color: var(--wp--preset--color--primary) !important;
    text-decoration: none;
}

.larson-archive-card .wp-block-post-title a:hover {
    color: var(--wp--preset--color--secondary) !important;
}

.larson-archive-card .wp-block-post-excerpt__excerpt {
    margin-top: 0.5rem;
    font-size: 0.9375rem;
}

/* Constrain images that follow the title strip on static pages */
main > .wp-block-group:not(.alignfull) .wp-block-post-featured-image img {
    max-height: 320px;
    object-fit: cover;
    border-radius: 8px;
}

/* =============================================================================
 * CTA BLOCKS (bottom of every CPT page)
 * ============================================================================= */

/* Ensure CTA button text is visible (white on filled bg, brand color on outline) */
body .has-primary-background-color .wp-block-button__link,
body .wp-block-button .wp-block-button__link.has-primary-background-color {
    color: #ffffff !important;
}

body .has-secondary-background-color .wp-block-button__link,
body .wp-block-button .wp-block-button__link.has-secondary-background-color {
    color: #ffffff !important;
}

/* Default WP element.button rules — make sure our buttons inherit visible color */
.wp-element-button {
    color: #ffffff !important;
}

/* Outline-style buttons keep their text color */
.wp-block-button.is-style-outline .wp-block-button__link {
    color: var(--wp--preset--color--primary) !important;
    background-color: transparent !important;
}

/* =============================================================================
 * FOOTER — navy background, EVERYTHING white/cream text
 *
 * theme.json's styles.color.text wins over has-surface-color when inherited
 * via cascade, so we force white at the footer scope.
 * ============================================================================= */

body .larson-site-footer,
body .larson-site-footer h1,
body .larson-site-footer h2,
body .larson-site-footer h3,
body .larson-site-footer h4,
body .larson-site-footer h5,
body .larson-site-footer h6,
body .larson-site-footer p,
body .larson-site-footer li,
body .larson-site-footer a,
body .larson-site-footer span,
body .larson-site-footer strong,
body .larson-site-footer em {
    color: #ffffff !important;
}

body .larson-site-footer a:hover {
    color: var(--wp--preset--color--sky-blue) !important;
    text-decoration: underline;
}

.larson-site-footer ul {
    list-style: none;
    padding-left: 0;
}

.larson-site-footer ul li {
    padding: 0.25rem 0;
}

.larson-site-footer h2 {
    text-align: center;
    font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
    margin-bottom: 1.5rem;
}

.larson-site-footer h4 {
    color: var(--wp--preset--color--secondary) !important;
    font-size: 1.0625rem !important;
    margin-bottom: 0.5rem;
}

.larson-site-footer .has-small-font-size {
    color: #e1f3f7 !important;
}

/* =============================================================================
 * RESPONSIVE
 * ============================================================================= */

@media (max-width: 900px) {
    .larson-site-header > .wp-block-group {
        flex-wrap: wrap !important;
    }
    .larson-hero .wp-block-columns,
    .larson-page-hero .wp-block-columns {
        flex-direction: column !important;
    }
    .larson-hero .wp-block-column,
    .larson-page-hero .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }
    /* Reduce hero text padding on mobile so headlines don't overflow */
    .larson-hero .wp-block-column.has-primary-background-color,
    .larson-page-hero .wp-block-column.has-primary-background-color {
        padding: 2.5rem 1.5rem !important;
    }
    .larson-hero h1,
    .larson-page-hero h1 {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    /* Footer location columns stack 2-up instead of 6-across */
    .larson-site-footer .wp-block-columns {
        flex-direction: column !important;
    }
    .larson-site-footer .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }
}