/**
 * Bushwick Daily - Mobile Redesign
 * Design Direction: Bold Editorial Magazine
 *
 * Brand: Black + Gold (#f5ab07)
 * Typography: Raleway (headlines), system sans-serif (body)
 * Tone: Urban, contemporary, high-contrast
 */

/* ==========================================================================
   CSS VARIABLES - Design Tokens
   ========================================================================== */

:root {
  /* Colors - Simplified palette */
  --bd-black: #0a0a0a;
  --bd-dark: #111111;
  --bd-dark-elevated: #1a1a1a;
  --bd-gold: #f5ab07;
  --bd-gold-hover: #ffbe2e;
  --bd-white: #ffffff;
  --bd-gray-100: #f5f5f5;
  --bd-gray-300: #b0b0b0;
  --bd-gray-500: #707070;

  /* Typography Scale */
  --font-display: 'Raleway', -apple-system, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 28px;
  --text-4xl: 32px;

  /* Spacing Scale */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

/* ==========================================================================
   1. GLOBAL RESETS & FOUNDATION
   ========================================================================== */

/* Prevent horizontal scroll */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

#td-outer-wrap,
.td-main-content-wrap,
.tdc-content-wrap {
  overflow-x: hidden !important;
}

/* ==========================================================================
   2. TYPOGRAPHY OVERHAUL
   ========================================================================== */

@media (max-width: 767px) {

  /* Body text */
  body,
  .td-post-content,
  .td-post-content p {
    font-family: var(--font-body) !important;
    font-size: var(--text-base) !important;
    line-height: 1.65 !important;
    color: var(--bd-white) !important;
    -webkit-font-smoothing: antialiased;
  }

  /* Headlines - Strong hierarchy */
  h1, h2, h3, h4, h5, h6,
  .entry-title,
  .td-module-title,
  .tdb-title-text {
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
  }

  /* Hero headline - Large and bold */
  .td-big-grid-post .entry-title,
  .td_module_flex .entry-title,
  .td-main-featured .entry-title {
    font-size: var(--text-3xl) !important;
    line-height: 1.15 !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  }

  /* Standard card headlines */
  .td-module-title,
  .tdb-module-title,
  .entry-title {
    font-size: var(--text-xl) !important;
    line-height: 1.25 !important;
    margin-bottom: var(--space-xs) !important;
  }

  /* Secondary headlines */
  .td-module-container:not(.td-big-grid-post) .entry-title {
    font-size: var(--text-lg) !important;
  }

  /* Metadata - Readable size */
  .td-module-meta-info,
  .td-editor-date,
  .td-post-author-name,
  .tdb-module-meta,
  .td-post-date,
  .entry-date {
    font-family: var(--font-body) !important;
    font-size: var(--text-sm) !important;
    color: var(--bd-gray-300) !important;
    letter-spacing: 0.02em;
  }

  /* Author name - Slight emphasis */
  .td-post-author-name a,
  .tdb-author-name a {
    color: var(--bd-white) !important;
    font-weight: 500 !important;
  }

  /* Category badges - Bold gold accent */
  .td-post-category,
  .entry-category,
  .tdb-category a {
    font-family: var(--font-display) !important;
    font-size: var(--text-xs) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    background: var(--bd-gold) !important;
    color: var(--bd-black) !important;
    padding: 6px 12px !important;
    display: inline-block !important;
    margin-bottom: var(--space-sm) !important;
  }

  .td-post-category:hover,
  .tdb-category a:hover {
    background: var(--bd-gold-hover) !important;
  }
}

/* ==========================================================================
   3. CARD LAYOUTS - Consistent & Clean
   ========================================================================== */

@media (max-width: 767px) {

  /* Full-width cards with proper spacing */
  .td_module_wrap,
  .tdb-block-inner > div,
  article.post {
    width: 100% !important;
    margin-bottom: var(--space-lg) !important;
    padding: 0 var(--space-md) !important;
  }

  /* Remove weird theme margins */
  .vc_row,
  .wpb_row,
  .td-pb-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Card container */
  .td-module-container {
    background: var(--bd-dark) !important;
    border-radius: 4px;
    overflow: hidden;
  }

  /* Consistent image aspect ratio */
  .td-module-thumb {
    position: relative;
    width: 100% !important;
    aspect-ratio: 16/9;
    overflow: hidden;
  }

  .td-module-thumb img,
  .td-module-thumb .entry-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Card content area */
  .td-module-meta-info {
    padding: var(--space-md) !important;
    background: var(--bd-dark) !important;
  }

  /* Big grid / Hero section */
  .td-big-grid-flex-scroll-holder {
    overflow: hidden !important;
    display: flex;
    flex-direction: column !important;
    gap: var(--space-md);
  }

  .td-big-grid-flex-scroll-holder .td_module_flex_7,
  .td-big-grid-flex-scroll-holder .td_module_flex {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Hero card styling */
  .td-big-grid-post,
  .td_module_flex {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: flex-end;
  }

  .td-big-grid-post .td-module-meta-info,
  .td_module_flex .td-module-meta-info {
    position: relative;
    z-index: 2;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%) !important;
    padding: var(--space-lg) var(--space-md) !important;
  }
}

/* ==========================================================================
   4. HEADER - Clean & Minimal
   ========================================================================== */

@media (max-width: 767px) {

  .td-header-wrap,
  .tdc-header-wrap,
  .td-header-mobile-wrap {
    background: var(--bd-black) !important;
    padding: var(--space-sm) var(--space-md) !important;
  }

  /* Logo sizing */
  .td-header-logo img,
  .tdb-logo img {
    max-height: 40px !important;
    width: auto !important;
  }

  /* Hamburger menu */
  .td-mobile-nav-toggle,
  .tdb-menu-icon {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ==========================================================================
   5. NEWSLETTER POPUP - On Brand
   ========================================================================== */

@media (max-width: 767px) {

  /* Style the newsletter popup to match brand */
  .td-newsletter-modal,
  .td-modal-wrap,
  [class*="newsletter"] {
    background: var(--bd-dark) !important;
  }

  /* Subscribe button - Gold instead of red */
  .td-newsletter-button,
  .td-newsletter-modal button,
  button[class*="subscribe"],
  input[type="submit"][value*="ubscribe"] {
    background: var(--bd-gold) !important;
    color: var(--bd-black) !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: var(--text-sm) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    border: none !important;
    border-radius: 0 !important;
    padding: var(--space-md) var(--space-lg) !important;
    min-height: 48px !important;
    transition: var(--transition-fast) !important;
  }

  .td-newsletter-button:hover,
  button[class*="subscribe"]:hover {
    background: var(--bd-gold-hover) !important;
  }

  /* Email input */
  .td-newsletter-input,
  input[type="email"] {
    background: var(--bd-dark-elevated) !important;
    border: 1px solid var(--bd-gray-500) !important;
    color: var(--bd-white) !important;
    font-size: var(--text-base) !important;
    padding: var(--space-md) !important;
    min-height: 48px !important;
  }
}

/* ==========================================================================
   6. SPACING & SECTIONS
   ========================================================================== */

@media (max-width: 767px) {

  /* Section spacing */
  .tdc-zone,
  .td-pb-row,
  .vc_row {
    margin-bottom: var(--space-xl) !important;
  }

  /* Block headers / Section titles */
  .td-block-title,
  .tdb-block-title {
    font-family: var(--font-display) !important;
    font-size: var(--text-lg) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--bd-white) !important;
    border-bottom: 2px solid var(--bd-gold) !important;
    padding-bottom: var(--space-sm) !important;
    margin-bottom: var(--space-lg) !important;
  }

  .td-block-title span,
  .tdb-block-title span {
    color: var(--bd-gold) !important;
  }

  /* "Explore More" and similar sections */
  .td-footer-template-wrap,
  .td-sub-footer-container {
    padding: var(--space-xl) var(--space-md) !important;
  }
}

/* ==========================================================================
   7. FOOTER - Mobile Optimized
   ========================================================================== */

@media (max-width: 767px) {

  .td-footer-template-wrap {
    background: var(--bd-black) !important;
  }

  /* Stack footer columns */
  .td-footer-template-wrap .vc_column_container,
  .td-footer-wrapper .vc_column_container {
    width: 100% !important;
    margin-bottom: var(--space-lg) !important;
  }

  .td-footer-template-wrap .vc_row,
  .td-footer-wrapper .vc_row {
    flex-direction: column !important;
  }

  .td-footer-template-wrap [class*="td-pb-span"],
  .td-footer-wrapper [class*="td-pb-span"] {
    width: 100% !important;
    padding: 0 var(--space-md) !important;
  }

  /* Footer links */
  .td-footer-template-wrap a,
  .td-footer-wrapper a {
    color: var(--bd-gray-300) !important;
    font-size: var(--text-sm) !important;
    padding: var(--space-xs) 0 !important;
    display: block;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .td-footer-template-wrap a:hover,
  .td-footer-wrapper a:hover {
    color: var(--bd-gold) !important;
  }

  /* Footer logo */
  .td-footer-logo img {
    max-height: 32px !important;
    margin-bottom: var(--space-md) !important;
  }
}

/* ==========================================================================
   8. TOUCH TARGETS - Accessibility
   ========================================================================== */

@media (max-width: 767px) {

  /* All interactive elements */
  a, button, [role="button"],
  .td-social-icon-wrap a,
  .td-module-meta-info a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Navigation items */
  .sf-menu > li > a,
  .tdb-menu > li > a,
  .td-mobile-nav a {
    min-height: 48px !important;
    padding: var(--space-md) !important;
  }

  /* Social icons */
  .td-social-icon-wrap a,
  .tdb-social-icon a {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ==========================================================================
   9. COLOR CLEANUP - Remove Clashing Accents
   ========================================================================== */

/* Override cyan and lime accents with gold */
@media (max-width: 767px) {

  /* Cyan (#00ddd6) → Gold */
  [style*="00ddd6"],
  [style*="rgb(0, 221, 214)"] {
    color: var(--bd-gold) !important;
  }

  /* Lime (#d9dd58) → Gold */
  [style*="d9dd58"],
  [style*="rgb(217, 221, 88)"] {
    background-color: var(--bd-gold) !important;
  }

  /* Ensure consistent link colors */
  a:hover {
    color: var(--bd-gold) !important;
  }

  /* Category links always gold on black */
  .td-post-category a,
  .tdb-category a {
    background: var(--bd-gold) !important;
    color: var(--bd-black) !important;
  }
}

/* ==========================================================================
   10. ARTICLE PAGE STYLES
   ========================================================================== */

@media (max-width: 767px) {

  /* Article title */
  .td-post-title .entry-title {
    font-size: var(--text-3xl) !important;
    line-height: 1.15 !important;
    margin-bottom: var(--space-md) !important;
  }

  /* Article meta */
  .td-post-title .td-module-meta-info {
    margin-bottom: var(--space-lg) !important;
  }

  /* Article content */
  .td-post-content {
    padding: 0 var(--space-md) !important;
  }

  .td-post-content p {
    margin-bottom: var(--space-lg) !important;
  }

  /* Blockquotes */
  .td-post-content blockquote {
    border-left: 4px solid var(--bd-gold) !important;
    padding-left: var(--space-md) !important;
    margin: var(--space-lg) 0 !important;
    font-style: italic;
  }
}

/* ==========================================================================
   11. AD BLOCKS - Tame the Visual Noise
   ========================================================================== */

@media (max-width: 767px) {

  .td-a-rec,
  .td-ad-background-link,
  [class*="ad-container"] {
    margin: var(--space-lg) 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Give ads some visual separation */
  .td-a-rec {
    padding: var(--space-sm) !important;
    background: var(--bd-dark-elevated) !important;
    border-radius: 4px;
  }

  .td-a-rec::before {
    content: "Advertisement";
    display: block;
    font-size: var(--text-xs);
    color: var(--bd-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-xs);
  }
}

/* ==========================================================================
   12. SMOOTH SCROLLING & PERFORMANCE
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   13. ELEMENT-STYLE OVERFLOW FIX (from earlier)
   ========================================================================== */

.td-element-style,
[class*="_rand_style"] {
  max-width: 100vw !important;
}

/* ==========================================================================
   14. HOTFIXES
   ========================================================================== */

/* Fix hero image visibility - reduce gradient overlay */
@media (max-width: 767px) {
  .td-big-grid-post .td-image-container,
  .td_module_flex .td-image-container,
  .td-big-grid-post .td-module-thumb,
  .td_module_flex .td-module-thumb {
    position: relative !important;
  }

  .td-big-grid-post .td-image-gradient,
  .td_module_flex .td-image-gradient {
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 50%, transparent 100%) !important;
  }

  /* Ensure images are visible */
  .td-big-grid-post .entry-thumb,
  .td_module_flex .entry-thumb,
  .td-big-grid-post img,
  .td_module_flex img {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Hero card minimum height */
  .td-big-grid-post,
  .td_module_flex_7,
  .td_module_flex {
    min-height: 280px !important;
    background-color: #1a1a1a !important;
  }
}

/* Newsletter popup - force gold button */
.td-newsletter-button,
.tdn-submit,
.tdn-form button,
.tds-button,
button.tds-button,
input[type="submit"],
.mc4wp-form input[type="submit"],
#mc_embed_signup input[type="submit"],
.tds-newsletter .tdn-submit {
  background: #f5ab07 !important;
  background-color: #f5ab07 !important;
  color: #0a0a0a !important;
  border: none !important;
}