/* Learn hub cards — force featured image height (DaisyUI card figure + flex fights Tailwind h-*) */
.learn-post-card-media {
    display: block;
    width: 100%;
    height: calc(10rem + 24px); /* 184px — default / xs */
    overflow: hidden;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.learn-post-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 640px) {
    .learn-post-card-media {
        height: calc(14rem + 24px); /* 248px — sm+ */
    }
}

@media (min-width: 1024px) {
    .learn-post-card-media {
        height: calc(16rem + 24px); /* 280px — lg+ */
    }
}

@media (min-width: 1280px) {
    .learn-post-card-media {
        height: calc(18rem + 24px); /* 312px — xl+ */
    }
}

/* Bottom-right hard shadow on solid/outline buttons (DaisyUI uses --btn-shadow) */
.btn:not(.btn-ghost):not(.btn-link) {
    --btn-shadow: 2px 2px 0 0 color-mix(in oklab, var(--color-base-content) 28%, transparent);
}

.btn:not(.btn-ghost):not(.btn-link):active {
    --btn-shadow: 1px 1px 0 0 color-mix(in oklab, var(--color-base-content) 28%, transparent);
}

/* As featured on — default chips + optional pasted badge HTML */
.featured-on-viewport {
    overflow: hidden;
    width: 100%;
    --featured-on-badge-h: 2.5rem; /* 40px — shared height for default + embed badges */
}

.featured-on-track {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem 2rem;
}

.featured-on-track > * {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    opacity: 0.55;
    filter: brightness(0.72) saturate(0.8);
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.featured-on-track > *:hover {
    opacity: 0.85;
    filter: brightness(0.92) saturate(0.95);
}

.featured-on-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: var(--featured-on-badge-h);
    box-sizing: border-box;
    padding: 0 0.75rem;
    border: 1px solid color-mix(in oklab, var(--color-base-content) 20%, transparent);
    border-radius: 0.5rem;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s ease;
}

.featured-on-badge:hover {
    border-color: color-mix(in oklab, var(--color-base-content) 35%, transparent);
}

.featured-on-badge span {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.featured-on-badge svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

/* Pasted directory widgets (usually <a><img></a>) — same height, no chip chrome */
.featured-on-badge--embed {
    padding: 0;
    border: none;
    border-radius: 0;
    max-height: var(--featured-on-badge-h);
    overflow: hidden;
}

.featured-on-badge--embed a {
    display: inline-flex;
    align-items: center;
    height: var(--featured-on-badge-h);
    line-height: 0;
}

.featured-on-badge--embed img {
    display: block;
    height: var(--featured-on-badge-h);
    width: auto;
    max-height: var(--featured-on-badge-h);
    object-fit: contain;
}

/* Third-party badge images kept in DOM for directory verification checks */
.featured-on-verify-img {
    display: none;
}

.featured-on-track.is-marquee {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    animation: featured-on-scroll 40s linear infinite;
}

.featured-on-track.is-marquee:hover {
    animation-play-state: paused;
}

@keyframes featured-on-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* Mobile nav opens only when JS adds .dropdown-open.
   DaisyUI also reveals .dropdown-content on :focus-within, which a scripted
   click never triggers on a non-button. Follow the class, not focus. */
#mobile-nav:not(.dropdown-open) > .dropdown-content {
    display: none;
    opacity: 0;
    scale: 95%;
}

#mobile-nav.dropdown-open > .dropdown-content {
    display: flex;
    opacity: 1;
    scale: 1;
}

/* Honeypot. Off-screen and clipped, not display:none.
   A large negative left offset made the page scroll sideways, so the old
   Fax label could be seen. This box stays at the form origin and clips
   its contents, so it does not widen the page. */
.hp-field,
.contact-fax {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    pointer-events: none;
}

.newsletter-choice label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.25rem;
}