/**
 * Hit Parader Custom CSS Overrides
 *
 * WARNING: This theme uses TailwindCSS as the primary styling system.
 * Only add custom CSS here when Tailwind utilities are insufficient.
 * Use Tailwind classes in templates whenever possible.
 */

/* Global Typography Rules */
/* Body text - Ernst */
body,
p,
li,
td,
div {
    font-family: 'ernst', Helvetica, serif;
}

/* All headings - Montserrat */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'ernst', Helvetica, serif;
    line-height: 1.1; /* Tight line height for headings */
}

/* Page titles use Palmore */
.entry-title,
article > h1,
.page h1:first-of-type {
    font-family: 'Palmore', Georgia, serif;
}

/* Buttons and CTAs - Montserrat */
button,
.button,
.btn,
input[type="submit"],
input[type="button"],
.cta,
.highlight {
    font-family: 'montserrat', sans-serif;
    font-weight: 900;
}

/* Navigation items - Montserrat */
nav,
.menu,
.nav-menu,
.navigation {
    font-family: Montserrat, Arial, sans-serif;
}

/* Safari font rendering fixes */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Safari-specific font size adjustments */
@supports (-webkit-touch-callout: none) {
    .site-header a,
    nav[class*='menu'] a,
    .navigation a,
    .header-menu a {
        font-size: calc(1em * 1.15);
    }
}

/* Block Editor Compatibility */

.wp-block h1, .wp-block h2, .wp-block h3,
.wp-block h4, .wp-block h5, .wp-block h6 {
    font-family: 'ernst', Helvetica, serif;
    line-height: 1.1;
}

.wp-block p {
    font-family: 'ernst', Helvetica, serif;
}

/* ========================================
   Header Positioning and Admin Bar Handling
   ======================================== */

@media screen and (max-width: 600px) {
    #wpadminbar {
        position: fixed;
    }
}

/* Default header position (no admin bar) */
.hp-main-header {
    top: 0;
}

/* Admin bar adjustments for header */
.admin-bar .hp-main-header {
    top: 32px; /* Desktop admin bar height */
}

/* Admin bar mobile adjustments (782px and below) */
@media (max-width: 782px) {
    .admin-bar .hp-main-header {
        top: 46px; /* Mobile admin bar height */
    }
}

/* ========================================
   Body Padding for Fixed Header
   ======================================== */

/* Default body padding - exact header height only
   Using !important to override VIP combined CSS bundles that load later */
body {
    padding-top: 120px !important;
}

@media (max-width: 1023px) {
    body {
        padding-top: 96px !important;
    }
}

@media (max-width: 767px) {
    body {
        padding-top: 80px !important;
    }
}

/* Header shrinking on scroll */
.hp-main-header.hp-scrolled {
    border-bottom: 2px solid #000000;
}

.hp-main-header.hp-scrolled .hp-header-inner {
    padding-top: 0.2rem; /* Reduced padding when scrolled */
    padding-bottom: 0.2rem;
}

/* Logo container shrinking with smooth transition */
.hp-center-content-container {
    transition: transform 0.3s ease-in-out;
}

.hp-main-header.hp-scrolled .hp-center-content-container {
    transform: scale(0.6);
}

/* Prevent search field from shrinking with smooth transition */
#hp-search-form {
    transition: transform 0.3s ease-in-out;
}

.hp-main-header.hp-scrolled #hp-search-form {
    transform: scale(1.67); /* Counteract 0.6 scale: 1/0.6 = 1.67 */
}

/* Social icons responsiveness */
@media (max-width: 768px) {
    .hp-social-wrapper span {
        display: none !important;
    }

    .hp-header-left,
    .hp-header-right {
        width: 20%;
    }

    .hp-header-center {
        width: 60%;
    }

    .hp-logo {
        height: 2.5rem !important; /* h-10 equivalent */
    }

    .hp-text-logo {
        font-size: 1.5rem !important; /* text-xl equivalent */
    }

    /* Mobile header shrinking on scroll - consistent 40% */
    .hp-main-header.hp-scrolled .hp-center-content-container {
        transform: scale(0.6); /* 40% smaller on mobile too - same as desktop */
    }
}

/* Logo and Search positioning - complex opacity/visibility states require CSS */
#hp-logo-container {
    z-index: 2;
    opacity: 1;
    visibility: visible;
}

#hp-search-form {
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    height: 100%;
    display: flex;
    align-items: center;
}

#hp-search-form.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#hp-search-form:not(.hidden) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 3; /* Above logo when active */
}

#hp-logo-container.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Search form styling */
#hp-search-form form {
    width: 100%;
    height: 2.5rem; /* Normal height - not matching container */
    border: 2px solid #000000;
    overflow: hidden;
}

.hp-search-input {
    height: 100%;
    line-height: 1.5;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: white;
}

.hp-search-input:focus {
    outline: none;
    box-shadow: none;
}

.hp-search-button {
    height: 100%;
    line-height: 1;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-left: 1px solid #000000;
}

/* Ensure center container maintains consistent height */
.hp-center-content-container {
    min-height: 3rem; /* 48px minimum */
}

@media (min-width: 768px) {
    .hp-center-content-container {
        min-height: 4rem; /* 64px on tablet+ */
    }

    #hp-search-form form {
        height: 2.75rem; /* Slightly larger on tablet but still normal */
    }
}

@media (min-width: 1024px) {
    .hp-center-content-container {
        min-height: 5rem; /* 80px on desktop */
    }

    #hp-search-form form {
        height: 3rem; /* Normal size on desktop */
    }
}

/* Navigation bar layout - list reset can be handled by Tailwind */

/* ========================================
   Navigation Bar
   ======================================== */

/* TailwindCSS Fallback + base nav styles
   Ensures nav displays correctly even if CDN fails to load */
.hp-nav-bar {
    display: none; /* Hidden on mobile (fallback for Tailwind's hidden) */
    margin-top: 0;
    position: relative;
    z-index: 40; /* Below header (z-50) but above regular content */
}

@media (min-width: 768px) {
    .hp-nav-bar {
        display: block; /* Show on tablet+ (fallback for Tailwind's md:block) */
    }
}

/* Mobile adjustments for navigation content */
@media (max-width: 640px) {
    .hp-subscribe-item {
        position: static;
        transform: none;
        margin-top: 0.5rem;
    }

    .hp-nav-links {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Desktop Navigation Menu Items */
.hp-desktop-nav .hp-nav-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hp-desktop-nav .hp-nav-links li {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.hp-desktop-nav .hp-nav-links li a {
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    transition: color 0.2s;
    display: block;
    padding: 0;
    margin: 0;
}

.hp-desktop-nav .hp-nav-links li a:hover {
    color: #d4d4d4; /* subtle off-white */
}

/* Big Shadow */
.big-shadow {
    box-shadow:
    1px 1px 0 0 #000,
    2px 2px 0 0 #000,
    3px 3px 0 0 #000,
    4px 4px 0 0 #000,
    5px 5px 0 0 #000,
    6px 6px 0 0 #000,
    7px 7px 0 0 #000,
    8px 8px 0 0 #000;
}

/* Big Shadow Reverse - shadow cascades down-left for reversed layouts */
.big-shadow-reverse {
    box-shadow:
    -1px 1px 0 0 #000,
    -2px 2px 0 0 #000,
    -3px 3px 0 0 #000,
    -4px 4px 0 0 #000,
    -5px 5px 0 0 #000,
    -6px 6px 0 0 #000,
    -7px 7px 0 0 #000,
    -8px 8px 0 0 #000;
}

/* Palmore font vertical centering fix - the font has built-in top space
   so we reduce top padding and increase bottom padding to visually center it.
   Adjust these values as needed: less top = text moves up */
h2.font-palmore,
h3.font-palmore {
    padding-top: 0.35rem !important;    /* was 0.5rem (py-2) */
    padding-bottom: 0.65rem !important; /* was 0.5rem (py-2) */
}

h2.font-palmore-regular,
h3.font-palmore-regular {
    padding-top: 0.25rem !important;     /* more aggressive than light variant */
    padding-bottom: 0.75rem !important;
}

/* Hover shadow for pagination - only custom CSS needed */
.hover\:big-shadow:hover {
    box-shadow:
    1px 1px 0 0 #000,
    2px 2px 0 0 #000,
    3px 3px 0 0 #000,
    4px 4px 0 0 #000,
    5px 5px 0 0 #000,
    6px 6px 0 0 #000,
    7px 7px 0 0 #000,
    8px 8px 0 0 #000;
}

/* Media Player Embed Styling - iframe/video specific CSS that Tailwind can't handle */
.hitparader-media-player-embed iframe {
    width: 95%;
    height: 80px;
    border: none;
    border-radius: 0 !important;
}

/* Content type label - force inline display in flex container */
.hitparader-media-content-type {
    display: inline-block !important;
    width: auto !important;
}

.hitparader-media-player-embed video {
    width: 100%;
    height: auto;
    max-height: 315px;
}

.hitparader-media-player-embed div {
    border-radius: 0 !important;
}

/* Mobile adjustments for media player */
@media (max-width: 768px) {
    .hitparader-media-player-embed iframe {
        height: 80px;
    }
}

/* Hide media player on mobile like other middle row content */
@media (max-width: 640px) {
    .hitparader-media-player-wrapper {
        display: none;
    }
}

/* ========================================
   Reusable Image Hover Effects
   ======================================== */

/* Standard image hover effect - use with overflow-hidden container */
/* Usage: Apply .image-hover to the image element itself */
.image-hover {
    transition: transform 0.3s ease;
}

.image-hover:hover {
    transform: scale(1.05);
}

/* Group hover variant for use with Tailwind group classes */
/* Usage: Apply .image-hover-group to image, .group to container */
.image-hover-group {
    transition: transform 0.3s ease;
}

.group:hover .image-hover-group {
    transform: scale(1.05);
}

/* Mobile vertical separators for highlighted posts */
@media (max-width: 1023px) {
    .hp-highlighted-posts article:not(:last-child) {
        border-bottom: 3px solid white;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }
}

/* ========================================
   Container Max Width Override
   ======================================== */

/* Limit container max-width to 1280px (same as xl breakpoint)
   even on larger screens (2xl and above) */
.container {
    max-width: 1280px !important;
}

/* ========================================
   Footer Styles
   ======================================== */

/* Reduce shadow on hover for pressed effect */
.hp-subscribe-footer-btn:hover.big-shadow {
    box-shadow:
        1px 1px 0 0 #000,
        2px 2px 0 0 #000,
        3px 3px 0 0 #000,
        4px 4px 0 0 #000,
        5px 5px 0 0 #000,
        6px 6px 0 0 #000;
}

/* ========================================
   Link Reset and Cursor Fix
   ======================================== */

/* Global link reset - remove underlines by default (TailwindCSS fallback)
   Links in .prose will be explicitly underlined below
   Using !important to override VIP combined CSS bundles that load later */
a {
    text-decoration: none !important;
    color: inherit;
}

a:hover {
    text-decoration: none !important;
}

/* Ensure all links show pointer cursor - TailwindCSS may reset this */
a,
a:hover,
a:focus,
a:active,
.prose a,
.prose a:hover,
.prose a:focus,
.prose a:active,
button,
button:hover,
button:focus,
input[type="submit"],
input[type="button"],
.btn,
.button {
    cursor: pointer;
}

/* ========================================
   Single Post Content Prose Styles
   ======================================== */

/* These styles ensure proper heading typography in post content
   since Tailwind's prose classes may not apply the font families correctly */

.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    font-family: 'ernst', Helvetica, serif;
    font-weight: 700;
    line-height: 1.1;
    color: #000;
    margin-top: 2rem;
    margin-bottom: 1rem;
    letter-spacing: -1px;
}

.prose h1 { font-size: 2.25rem; } /* 36px */
.prose h2 { font-size: 2.35rem; } /* 37.5px - 25% larger */
.prose h3 { font-size: 1.875rem; } /* 30px - 25% larger */
.prose h4 { font-size: 1.5625rem; } /* 25px - 25% larger */
.prose h5 { font-size: 1.4rem; } /* 22.5px - 25% larger */
.prose h6 { font-size: 1.25rem; } /* 20px - 25% larger */

.prose a { text-decoration: underline !important; }

.prose p {
    margin-bottom: 1.5rem;
    line-height: 1.5;
    font-size: 1.1rem;
    overflow-wrap: break-word;
    word-break: break-word;
}

.prose blockquote {
    border-top: 3px solid #000;
    border-bottom: 3px solid #000;
    padding: 30px 0;
    margin: 2rem 0;
    text-align: center;
}

.prose blockquote p {
    line-height: 1.1;
    font-size: 1.75rem;
    font-style: normal !important;
    display: inline;
    letter-spacing: -1px;
}

.prose blockquote cite {
    font-family: 'ernst', Helvetica, serif;
    line-height: 1.1;
    font-size: 1.55rem;
    font-style: normal !important;
    display: inline;
    letter-spacing: -1px;
}

/* Add em-dash before citation */
.prose blockquote cite:before {
    content: " — ";
    font-style: normal !important;
}

.prose ul,
.prose ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
    list-style-position: outside;
}

.prose ul {
    list-style-type: disc;
}

.prose ol {
    list-style-type: decimal;
}

.prose li {
    margin-bottom: 0;
}

.prose img {
    max-width: 100%;
    height: auto;
    margin: 2rem auto;
    display: block;
}

.prose figure {
    margin: 2rem auto;
    display: block;
}

/* Reset img margin inside non-floated figures — the figure provides the
   outer margin, so the img shouldn't add its own 2rem gap before the caption.
   Floated figures (.alignleft/.alignright) keep their own img margin
   (10px 0 0) for proper text-line alignment. */
.prose figure:not(.alignleft):not(.alignright) img {
    margin: 0 !important;
    display: block;
}

/* General iframe centering - catch-all for embeds */
.prose iframe {
    margin: 2rem auto;
    display: block;
}

/* Exception: Remove margin from Google AdSense iframes to prevent overlap */
.prose iframe[src*="googleads.g.doubleclick.net"],
.prose iframe[name^="aswift_"],
.prose iframe[data-google-container-id] {
    margin: 0;
}

/* Responsive YouTube embeds - override inline styles and Jetpack wrapper */
.prose iframe[src*="youtube.com"],
.prose iframe[src*="youtu.be"],
.prose .jetpack-video-wrapper iframe,
.prose .wp-block-embed-youtube iframe {
    width: 100% !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
}

.prose .jetpack-video-wrapper {
    width: 100% !important;
    max-width: 100% !important;
}

.prose .wp-block-embed__wrapper {
    width: 100% !important;
}

/* Center Twitter embeds */
.prose .wp-block-embed-twitter,
.prose .twitter-tweet {
    margin: 2rem auto !important;
    display: block;
}

/* Center Instagram embeds */
.prose .wp-block-embed-instagram,
.prose .instagram-media-rendered {
    margin: 2rem auto !important;
    display: block;
}

/* Center TikTok embeds */
.prose .wp-block-embed-tiktok,
.prose .tiktok-embed {
    margin: 2rem auto !important;
    display: block;
}

.prose figcaption,
.prose .wp-element-caption,
.prose .wp-caption-text {
    font-family: Montserrat, Arial, sans-serif;
    text-align: left !important;
    font-size: 0.75rem !important;
    margin-top: 0.5rem;
    display: block !important;
    line-height: 1.2;
    margin-bottom: 0;
    font-weight: 700;
}

/* WordPress Image Alignment - Higher specificity to override Tailwind prose */
.prose figure.alignleft,
.prose .alignleft {
    float: left !important;
    margin: 0 2rem 1rem 0 !important;
    clear: left;
    display: block !important;
    max-width: 50%;
    box-sizing: border-box;
}
.prose figure.alignleft img,
.prose .alignleft img, .prose figure.alignright img,
.prose .alignright img {
    margin: 10px 0 0;
    display: block;
}

.prose figure.alignright,
.prose .alignright {
    float: right !important;
    margin: 0 0 1rem 2rem !important;
    clear: right;
    display: block !important;
    max-width: 50%;
    box-sizing: border-box;
}

.prose figure.aligncenter,
.prose .aligncenter {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 2rem auto !important;
    clear: both;
    float: none !important;
    width: fit-content !important;
    max-width: 100%;
}

.prose figure.aligncenter img,
.prose .aligncenter img {
    display: block;
    margin: 0 !important;
}

.prose figure.aligncenter .wp-element-caption,
.prose figure.aligncenter figcaption,
.prose figure.aligncenter .wp-caption-text,
.prose .aligncenter .wp-element-caption,
.prose .aligncenter figcaption,
.prose .aligncenter .wp-caption-text {
    display: block !important;
    width: 100% !important;
    margin-top: 0.5rem !important;
}

.prose figure.alignnone,
.prose .alignnone {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 2rem auto !important;
    clear: both;
    float: none !important;
    width: fit-content !important;
    max-width: 100%;
}

.prose figure.alignnone img,
.prose .alignnone img {
    display: block;
    margin: 0 !important;
}

.prose figure.alignnone .wp-element-caption,
.prose figure.alignnone figcaption,
.prose figure.alignnone .wp-caption-text,
.prose .alignnone .wp-element-caption,
.prose .alignnone figcaption,
.prose .alignnone .wp-caption-text {
    display: block !important;
    width: 100% !important;
    margin-top: 0.5rem !important;
}

/* Ensure captions have consistent styling under aligned images */
.prose .alignleft .wp-element-caption,
.prose .alignright .wp-element-caption,
.prose .alignleft figcaption,
.prose .alignright figcaption,
.prose .alignleft .wp-caption-text,
.prose .alignright .wp-caption-text,
.prose .aligncenter .wp-element-caption,
.prose .aligncenter figcaption,
.prose .aligncenter .wp-caption-text,
.prose .alignnone .wp-element-caption,
.prose .alignnone figcaption,
.prose .alignnone .wp-caption-text {
    font-family: Montserrat, Arial, sans-serif;
    font-size: 0.75rem !important;
    font-weight: bold;
    line-height: 1.2;
    margin-top: 0.5rem;
    text-align: left !important;
}

/* HR + floated image fix — Floats are out of normal flow, so the HR's
   bottom margin collapses with the following paragraph's top margin.  The
   paragraph text flows up to touch the HR while wrapping around the float.
   Using padding-bottom instead of margin-bottom prevents collapse. */
.prose hr {
    margin-bottom: 0;
    padding-bottom: 2em;
}

/* Mobile adjustments for aligned images */
@media (max-width: 768px) {
    .prose figure.alignleft,
    .prose .alignleft,
    .prose figure.alignright,
    .prose .alignright {
        float: none !important;
        display: block !important;
        margin: 2rem auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .prose figure.alignleft img,
    .prose .alignleft img,
    .prose figure.alignright img,
    .prose .alignright img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .prose h1 { font-size: 1.75rem; }
    .prose h2 { font-size: 1.5rem; }
    .prose h3 { font-size: 1.25rem; }
    .prose h4 { font-size: 1.125rem; }
}

/* Mobile menu overlay links - main header */
#hp-main-mobile-menu a,
.hp-main-mobile-nav a {
    color: white;
    text-decoration: none;
    font-family: Montserrat, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.5rem;
}

#hp-main-mobile-menu a:hover,
.hp-main-mobile-nav a:hover {
    color: #e5e5e5;
}

/* Center buttons on tablet and mobile splash page */
@media (max-width: 1023px) {
    .hp-splash-page .wp-block-buttons {
        justify-content: center !important;
    }
}

/* Splash page prose content - white text */
.hp-splash-page .prose {
    color: white;
}

.hp-splash-page .prose h1,
.hp-splash-page .prose h2,
.hp-splash-page .prose h3,
.hp-splash-page .prose h4,
.hp-splash-page .prose h5,
.hp-splash-page .prose h6 {
    color: white;
}

.hp-splash-page .prose p {
    color: white;
}

.hp-splash-page .prose a {
    color: white;
}

.hp-splash-page .prose strong {
    color: white;
}