/**
 * Opdee SEO Generator — Front-end Shortcode Styles
 *
 * Theme-aware: uses Kadence CSS custom properties when available.
 * Responsive: mobile-first with tablet/desktop breakpoints.
 * Accessible: focus-visible styles for keyboard navigation.
 */

/* Native service cards keep a single keyboard-accessible link per box. */
.opdee-service-card-link { text-decoration: none; }
.opdee-service-card-link:hover .kt-blocks-info-box-title,
.opdee-service-card-link:focus-visible .kt-blocks-info-box-title {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}
.opdee-service-card-link:focus-visible {
    outline: 3px solid var(--global-palette3, #15153f);
    outline-offset: 4px;
}

/* Base — inherit theme typography */
[class^="opdee-"],
[class*=" opdee-"] {
    font-family: inherit;
    color: inherit;
    line-height: inherit;
}

/* -----------------------------------------------------------------------
 * Focus-visible — keyboard navigation accessibility
 * ----------------------------------------------------------------------- */

[class^="opdee-"] a:focus-visible,
[class*=" opdee-"] a:focus-visible,
.opdee-collapse-toggle:focus-visible,
.opdee-nearby-card:focus-visible,
.opdee-related-card:focus-visible,
.opdee-featured-card:focus-visible,
.opdee-az-nav__letter:focus-visible,
.opdee-view-all-btn:focus-visible,
.opdee-location-search__input:focus-visible {
    outline: 2px solid var(--global-palette3, #0073aa);
    outline-offset: 2px;
    border-radius: 2px;
}

/* -----------------------------------------------------------------------
 * Section headings (shared by nearby, related, etc.)
 * ----------------------------------------------------------------------- */

.opdee-section-heading {
    font-weight: 600;
    margin-bottom: 0.5em;
    font-size: 1em;
}

/* -----------------------------------------------------------------------
 * Nearby areas — [opdee_nearby]
 * ----------------------------------------------------------------------- */

.opdee-nearby-areas {
    margin: 1.25em 0;
}

ul.opdee-nearby-areas {
    list-style: none;
    padding: 0;
}

ul.opdee-nearby-areas li {
    padding: 0.35em 0;
    border-bottom: 1px solid var(--global-palette6, rgba(0, 0, 0, 0.07));
}

ul.opdee-nearby-areas li:last-child {
    border-bottom: none;
}

ul.opdee-nearby-areas a,
span.opdee-nearby-areas a {
    color: var(--global-palette3, currentColor);
    text-decoration: none;
    transition: color 0.15s ease;
}

ul.opdee-nearby-areas a:hover,
span.opdee-nearby-areas a:hover {
    color: var(--global-palette4, currentColor);
    text-decoration: underline;
}

/* Nearby cards format */
.opdee-nearby-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 1.25em 0;
}

.opdee-nearby-card {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.5em 0.9em;
    border: 1px solid var(--global-palette6, #ddd);
    border-radius: 6px;
    text-decoration: none;
    color: var(--global-palette3, currentColor);
    background: var(--global-palette9, #fff);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.opdee-nearby-card:hover {
    border-color: var(--global-palette3, currentColor);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.opdee-nearby-card__icon {
    display: inline-flex;
    align-items: center;
    color: var(--global-palette3, #0073aa);
    flex-shrink: 0;
}

.opdee-nearby-card__icon svg {
    width: 14px;
    height: 14px;
}

.opdee-nearby-card__label {
    font-size: 0.9em;
}

/* -----------------------------------------------------------------------
 * Service areas — [opdee_service_areas]
 * ----------------------------------------------------------------------- */

.opdee-service-areas {
    margin: 1.5em 0;
    padding: 0;
    list-style: none;
}

.opdee-service-areas li {
    padding: 0.3em 0;
}

.opdee-service-areas a {
    color: var(--global-palette3, currentColor);
    text-decoration: none;
}

.opdee-service-areas a:hover {
    color: var(--global-palette4, currentColor);
    text-decoration: underline;
}

/* Grid format columns */
ul.opdee-service-areas[style*="column-count"] {
    column-gap: 2em;
}

ul.opdee-service-areas[style*="column-count"] li {
    break-inside: avoid;
    padding: 0.25em 0;
}

/* -----------------------------------------------------------------------
 * Related services — [opdee_related_services]
 * ----------------------------------------------------------------------- */

.opdee-related-services {
    margin: 1.25em 0;
}

ul.opdee-related-services {
    list-style: none;
    padding: 0;
}

ul.opdee-related-services li {
    padding: 0.35em 0;
    border-bottom: 1px solid var(--global-palette6, rgba(0, 0, 0, 0.07));
}

ul.opdee-related-services li:last-child {
    border-bottom: none;
}

ul.opdee-related-services a,
span.opdee-related-services a {
    color: var(--global-palette3, currentColor);
    text-decoration: none;
}

ul.opdee-related-services a:hover,
span.opdee-related-services a:hover {
    color: var(--global-palette4, currentColor);
    text-decoration: underline;
}

.opdee-related-heading {
    font-weight: 600;
    margin-bottom: 0.5em;
}

/* Cards format */
.opdee-related-services .opdee-related-card {
    display: inline-block;
    padding: 0.75em 1.25em;
    margin: 0.25em;
    border: 1px solid var(--global-palette6, #ddd);
    border-radius: 4px;
    text-decoration: none;
    color: var(--global-palette3, currentColor);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.opdee-related-services .opdee-related-card:hover {
    border-color: var(--global-palette3, currentColor);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* -----------------------------------------------------------------------
 * Cross-links block — [opdee_cross_links] / auto-injected
 * ----------------------------------------------------------------------- */

.opdee-cross-links {
    margin: 1.5em 0;
    padding: 1.25em;
    background: var(--global-palette7, #f7f7f7);
    border-radius: 4px;
}

.opdee-cross-links__nearby,
.opdee-cross-links__services {
    margin-bottom: 0.75em;
}

.opdee-cross-links__nearby:last-child,
.opdee-cross-links__services:last-child {
    margin-bottom: 0;
}

.opdee-cross-links strong {
    font-weight: 600;
}

.opdee-cross-links-block {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--global-content-width, 1290px);
    margin: 0 auto;
    padding: 2rem var(--global-content-edge-padding, 1.5rem);
}

.opdee-cross-links-block .opdee-cross-links {
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.opdee-cross-links-block .opdee-cross-links strong {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--global-palette3, #141638);
}

.opdee-cross-links-block .opdee-cross-links__nearby {
    margin-bottom: 1.5rem;
}

.opdee-cross-links-block .opdee-nearby-areas,
.opdee-cross-links-block .opdee-related-services {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    font-size: 0;
}

.opdee-cross-links-block .opdee-cross-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    max-width: 100%;
    padding: 0.625rem 1rem;
    border: 1px solid var(--global-palette1, #298fb8);
    border-radius: 6px;
    background: var(--global-palette9, #fff);
    color: var(--global-palette3, #141638);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.opdee-cross-links-block .opdee-cross-links a:hover {
    background: var(--global-palette7, #e7edf3);
}

.opdee-cross-links-block .opdee-cross-links a:focus-visible {
    outline: 3px solid var(--global-palette3, #141638);
    outline-offset: 3px;
}

.opdee-cross-links-block .opdee-related-heading {
    font-size: 1.15em;
    margin-bottom: 0.75em;
}

/* -----------------------------------------------------------------------
 * Location hub — [opdee_location_hub]
 * ----------------------------------------------------------------------- */

.opdee-location-hub {
    margin: 1.5em 0;
    padding: 0;
    list-style: none;
}

.opdee-location-hub li {
    padding: 0.25em 0;
    break-inside: avoid;
}

.opdee-location-hub a {
    color: var(--global-palette3, currentColor);
    text-decoration: none;
}

.opdee-location-hub a:hover {
    color: var(--global-palette4, currentColor);
    text-decoration: underline;
}

/* -----------------------------------------------------------------------
 * Breadcrumb — [opdee_breadcrumb]
 * ----------------------------------------------------------------------- */

.opdee-breadcrumb {
    font-size: 0.875em;
    margin: 0.75em 0 1.5em;
    color: var(--global-palette5, #666);
}

.opdee-breadcrumb a {
    color: var(--global-palette3, currentColor);
    text-decoration: none;
}

.opdee-breadcrumb a:hover {
    text-decoration: underline;
}

.opdee-breadcrumb [aria-current="page"] {
    font-weight: 600;
}

.opdee-breadcrumb-sep {
    margin: 0 0.25em;
    opacity: 0.6;
}

/* -----------------------------------------------------------------------
 * AI intro — [opdee_ai_intro]
 * ----------------------------------------------------------------------- */

.opdee-ai-intro {
    margin: 1.25em 0;
}

/* -----------------------------------------------------------------------
 * Collapse toggle — progressive enhancement via shortcodes.js
 * ----------------------------------------------------------------------- */

.opdee-collapse-toggle {
    display: inline-block;
    margin-top: 0.5em;
    padding: 0.35em 0.75em;
    font-size: 0.85em;
    font-family: inherit;
    color: var(--global-palette3, #0073aa);
    background: none;
    border: 1px solid var(--global-palette6, #ddd);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.opdee-collapse-toggle:hover {
    background: var(--global-palette7, #f7f7f7);
    border-color: var(--global-palette3, #0073aa);
}

/* Expand animation for revealed items */
.opdee-expand-in {
    animation: opdeeExpandIn 0.2s ease-out;
}

@keyframes opdeeExpandIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* -----------------------------------------------------------------------
 * Featured locations grid — templates/archive.php
 * ----------------------------------------------------------------------- */

.opdee-featured-locations,
.opdee-locations-directory {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--global-content-width, 1290px);
    margin: 0 auto;
    padding: 2rem var(--global-content-edge-padding, 1.5rem);
}

.opdee-featured-card {
    min-width: 0;
    overflow-wrap: anywhere;
}

.opdee-locations-directory .entry-header {
    margin-bottom: 2rem;
}

.opdee-featured-locations h2 {
    margin-bottom: 0.75em;
}

.opdee-featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75em;
    margin: 1em 0;
}

.opdee-featured-card {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.75em 1em;
    border: 1px solid var(--global-palette6, #ddd);
    border-radius: 6px;
    text-decoration: none;
    color: var(--global-palette3, currentColor);
    background: var(--global-palette9, #fff);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.opdee-featured-card:hover {
    border-color: var(--global-palette3, currentColor);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--global-palette3, currentColor);
}

.opdee-featured-card__icon {
    display: inline-flex;
    align-items: center;
    color: var(--global-palette3, #0073aa);
    flex-shrink: 0;
}

.opdee-featured-card__icon svg {
    width: 16px;
    height: 16px;
}

.opdee-featured-card__label {
    font-size: 0.9em;
    font-weight: 500;
}

/* View All CTA */
.opdee-view-all-cta {
    margin: 1.5em 0;
    text-align: center;
}

.opdee-view-all-btn {
    display: inline-block;
    padding: 0.75em 2em;
    font-size: 1em;
    font-weight: 600;
    color: var(--global-palette9, #fff);
    background: var(--global-palette3, #0073aa);
    border: none;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.1s ease;
}

.opdee-view-all-btn:hover {
    background: var(--global-palette4, #005c8a);
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--global-palette9, #fff);
}

/* -----------------------------------------------------------------------
 * A-Z locations directory — templates/locations-archive.php
 * ----------------------------------------------------------------------- */

.opdee-locations-count {
    color: var(--global-palette5, #666);
    font-size: 0.95em;
    margin-top: 0;
}

.opdee-locations-controls {
    margin: 1.5em 0;
}

/* Search input */
.opdee-location-search {
    margin-bottom: 1em;
}

.opdee-location-search__input {
    width: 100%;
    max-width: 400px;
    padding: 0.6em 1em;
    font-size: 1em;
    font-family: inherit;
    border: 1px solid var(--global-palette6, #ddd);
    border-radius: 6px;
    background: var(--global-palette9, #fff);
    color: inherit;
    transition: border-color 0.15s ease;
}

.opdee-location-search__input:focus {
    outline: none;
    border-color: var(--global-palette3, #0073aa);
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.15);
}

/* A-Z letter navigation */
.opdee-az-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em;
    margin-bottom: 1.5em;
}

.opdee-az-nav__letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    font-size: 0.9em;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    color: var(--global-palette3, #0073aa);
    background: var(--global-palette7, #f7f7f7);
    transition: background 0.15s ease, color 0.15s ease;
}

.opdee-az-nav__letter:hover {
    background: var(--global-palette3, #0073aa);
    color: var(--global-palette9, #fff);
    text-decoration: none;
}

.opdee-az-nav__letter--disabled {
    color: var(--global-palette5, #999);
    opacity: 0.4;
    cursor: default;
}

.opdee-az-nav__letter--active {
    background: var(--global-palette3, #0073aa);
    color: var(--global-palette9, #fff);
}

/* No results message */
.opdee-no-results {
    padding: 1em;
    text-align: center;
    color: var(--global-palette5, #666);
    font-style: italic;
}

/* Letter sections */
.opdee-letter-section {
    margin-bottom: 1.5em;
}

.opdee-letter-heading {
    font-size: 1.5em;
    font-weight: 700;
    margin-bottom: 0.5em;
    padding-bottom: 0.25em;
    border-bottom: 2px solid var(--global-palette3, #0073aa);
    color: var(--global-palette3, #0073aa);
}

/* Back link */
.opdee-back-link {
    margin: 2em 0;
    padding-top: 1em;
    border-top: 1px solid var(--global-palette6, rgba(0, 0, 0, 0.1));
}

.opdee-back-link a {
    color: var(--global-palette3, currentColor);
    text-decoration: none;
}

.opdee-back-link a:hover {
    text-decoration: underline;
}

/* -----------------------------------------------------------------------
 * Area list (shared by archive + locations directory)
 * ----------------------------------------------------------------------- */

.opdee-area-list {
    margin: 0 0 1.5em;
    padding: 0;
    list-style: none;
}

.opdee-area-list li {
    margin: 0;
    padding: 0.3em 0;
    border-bottom: 1px solid var(--global-palette6, rgba(0, 0, 0, 0.05));
}

.opdee-area-list li:last-child {
    border-bottom: none;
}

.opdee-area-list a {
    color: var(--global-palette3, currentColor);
    text-decoration: none;
    transition: color 0.15s ease;
}

.opdee-area-list a:hover {
    color: var(--global-palette4, currentColor);
    text-decoration: underline;
}

.opdee-area-list--grid {
    column-count: 3;
    column-gap: 2em;
}

.opdee-area-list--grid li {
    break-inside: avoid;
}

/* -----------------------------------------------------------------------
 * Kadence block compatibility
 *
 * Kadence blocks use .kt-inside-inner-col with their own spacing.
 * Opdee shortcodes inside Kadence columns cooperate with those rules.
 * ----------------------------------------------------------------------- */

.kt-inside-inner-col .opdee-cross-links,
.kb-row-layout-inner .opdee-cross-links {
    margin-left: 0;
    margin-right: 0;
}

.kt-inside-inner-col ul.opdee-nearby-areas,
.kt-inside-inner-col ul.opdee-related-services,
.kt-inside-inner-col ul.opdee-service-areas,
.kt-inside-inner-col ul.opdee-location-hub {
    padding-left: 0;
}

.kadence-advanced-heading + .opdee-cross-links-block {
    margin-top: 1em;
}

/* -----------------------------------------------------------------------
 * Responsive
 * ----------------------------------------------------------------------- */

@media (max-width: 767px) {
    .opdee-cross-links {
        padding: 1em;
    }

    ul.opdee-service-areas[style*="column-count"] {
        column-count: 1 !important;
    }

    ul.opdee-location-hub[style*="column-count"] {
        column-count: 1 !important;
    }

    .opdee-related-services .opdee-related-card {
        display: block;
        margin: 0.25em 0;
    }

    .opdee-nearby-cards {
        gap: 0.35em;
    }

    .opdee-nearby-card {
        padding: 0.4em 0.7em;
        font-size: 0.9em;
    }

    .opdee-area-list--grid {
        column-count: 1;
    }

    .opdee-featured-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.5em;
    }

    .opdee-featured-card {
        padding: 0.6em 0.75em;
    }

    .opdee-az-nav__letter {
        width: 1.8em;
        height: 1.8em;
        font-size: 0.8em;
    }

    .opdee-location-search__input {
        max-width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    ul.opdee-service-areas[style*="column-count"],
    ul.opdee-location-hub[style*="column-count"] {
        column-count: 2 !important;
    }

    .opdee-area-list--grid {
        column-count: 2;
    }
}

/* -----------------------------------------------------------------------
 * Reduced motion — respect user preferences
 * ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .opdee-expand-in {
        animation: none;
    }

    .opdee-nearby-card,
    .opdee-featured-card,
    .opdee-view-all-btn {
        transition: none;
    }

    .opdee-related-services .opdee-related-card {
        transition: none;
    }
}