/*
Theme Name: Astra Child - Adventures in Oculus
Description: Child theme for Adventures in Oculus website based on Astra theme
Template: astra
Version: 1.0.1
Text Domain: astra-child
*/

/* Import parent theme styles */
@import url("../astra/style.css");

/* ============================================================
   TYPOGRAPHY & CAPITALIZATION CLEANUP
   ============================================================ */

/* Remove all caps but ONLY for visible text elements */
body,
.entry-content,
.main-header-menu a,
button,
.button,
.ast-button,
.menu-link {
    text-transform: none !important;
}

/* Preserve headings as-is but ensure no forced caps */
h1, h2, h3, h4, h5, h6 {
    text-transform: none !important;
}

/* Core box-sizing reset (this one is good) */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Safe word-wrapping */
body,
.entry-content p,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ============================================================
   GLOBAL LAYOUT SAFETY FIXES
   ============================================================ */

body {
    overflow-x: hidden;
}

/* Containers maintain padding but avoid overflow */
.ast-container,
.ast-container-fluid,
.site-content,
.content-area {
    overflow-x: hidden;
    padding-left: 15px;
    padding-right: 15px;
}

/* ============================================================
   HEADER FIXES (NO SCROLLBAR + CLEANER SPACING)
   ============================================================ */

/* Prevent header scrollbar */
.ast-primary-header-bar,
.site-primary-header-wrap,
.main-header-bar {
    overflow: visible !important;
    max-height: none !important;
}

/* Basic header spacing */
.ast-primary-header-bar {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Vertical centering of header items */
.ast-builder-grid-row {
    align-items: center;
}

/* ============================================================
   CART ICON FIX
   ============================================================ */
.ast-header-woo-cart .ast-addon-cart-wrap .ast-icon.icon-cart svg {
    fill: currentColor !important;
}

.ast-header-woo-cart .ast-addon-cart-wrap .ast-icon.icon-cart {
    color: #222 !important;
}

/* ============================================================
   RESPONSIVE TYPOGRAPHY & CONTENT
   ============================================================ */

@media (max-width: 768px) {

    .site-content {
        padding: 20px 10px;
    }

    #primary, #secondary {
        width: 100% !important;
        max-width: 100% !important;
    }

    h1 { font-size: 24px !important; }
    h2 { font-size: 20px !important; }
    h3 { font-size: 18px !important; }
    h4, h5, h6 { font-size: 16px !important; }

    p, li {
        font-size: 14px !important;
        line-height: 1.5;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    /* Columns stack properly */
    .wp-block-columns {
        flex-direction: column !important;
    }

    .wp-block-column {
        width: 100% !important;
        margin-left: 0 !important;
        margin-bottom: 20px;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .site-content { padding: 15px 8px; }

    h1 { font-size: 20px !important; }
    h2 { font-size: 18px !important; }
    h3 { font-size: 16px !important; }
    h4, h5, h6 { font-size: 15px !important; }

    p, li { font-size: 13px !important; }

    .wp-block-gallery .blocks-gallery-item {
        width: 100%;
        margin-bottom: 16px;
    }

    .ast-card, .wp-block-group {
        padding: 15px;
        margin-bottom: 15px;
    }
}

/* ============================================================
   WP-BLOCK-COVER (FULL CLEAN, SAFE VERSION)
   ============================================================ */

/* Standard block cover behavior */
.entry-content .wp-block-cover,
.entry-content .wp-block-cover-image {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
}

.entry-content .wp-block-cover__inner-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    box-sizing: border-box;
}

/* Full-width covers on mobile */
@media (max-width: 921px) {
    .entry-content .wp-block-cover.alignfull,
    .entry-content .wp-block-cover-image.alignfull {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
    }

    .entry-content .wp-block-cover__inner-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* ============================================================
   EMBEDS, VIDEOS, IFRAMES
   ============================================================ */

.wp-block-embed,
.wp-block-video,
iframe {
    max-width: 100%;
    height: auto;
}

.wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.wp-block-embed__wrapper iframe {
    position: absolute;
    width: 100%;
    height: 100%;
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

@media (prefers-contrast: high) {
    .ast-button,
    .wp-block-button__link {
        border: 2px solid currentColor;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Make mobile header align with main content padding */
@media (max-width: 921px) {
  .ast-mobile-header-wrap .ast-primary-header-bar .ast-builder-grid-row {
      padding-left: 15px;
      padding-right: 15px;
      box-sizing: border-box;
  }
}

/* Ensure header and content line up on small screens */
@media (max-width: 921px) {
  /* Desktop header row on small widths */
  #ast-desktop-header .ast-primary-header-bar .ast-builder-grid-row,
  /* Mobile header row */
  .ast-mobile-header-wrap .ast-primary-header-bar .ast-builder-grid-row,
  /* Main content container */
  .site-content .ast-container {
      padding-left: 15px;
      padding-right: 15px;
      box-sizing: border-box;
      margin-left: auto;
      margin-right: auto;
  }
}
/* On small screens, make alignfull covers align with the content container */
@media (max-width: 921px) {
  .entry-content .wp-block-cover.alignfull,
  .entry-content .wp-block-cover-image.alignfull {
      width: 100% !important;
      max-width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
  }
}

/* Fix misaligned full-width hero blocks on mobile */
@media (max-width: 921px) {

  /* Any full-width / wide blocks inside content should line up with container */
  .ast-container .entry-content .wp-block-cover.alignfull,
  .ast-container .entry-content .wp-block-cover-image.alignfull,
  .ast-container .entry-content .wp-block-group.alignfull,
  .ast-container .entry-content .wp-block-media-text.alignfull,
  .ast-container .entry-content .wp-block-media-text.alignwide {
      margin-left: 0 !important;
      margin-right: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      position: relative !important;
  }
}

/* TEMP: ultra-specific home hero alignment fix on small screens */
@media (max-width: 921px) {
  body.home .entry-content > .wp-block-cover.alignfull,
  body.home .entry-content > .wp-block-group.alignfull {
      margin-left: 0 !important;
      margin-right: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      position: relative !important;
      left: 0 !important;
      right: 0 !important;
  }
}/* Make mobile header line up with content on small screens */
@media (max-width: 921px) {

  /* Desktop-style header container when it still shows on small widths */
  .site-primary-header-wrap.ast-builder-grid-row-container.ast-container {
      padding-left: 15px !important;
      padding-right: 15px !important;
      box-sizing: border-box;
  }

  /* Actual mobile header row on iPhone */
  .ast-mobile-header-wrap .ast-primary-header-bar .ast-builder-grid-row {
      padding-left: 15px !important;
      padding-right: 15px !important;
      box-sizing: border-box;
  }
}
/* FIX mobile content padding override */
@media (max-width: 480px) {
    body .site-content,
    body .ast-container,
    body .content-area {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Fix for small tablets too */
@media (max-width: 768px) {
    body .site-content,
    body .ast-container,
    body .content-area {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* FIX misalignment of content on mobile */
@media (max-width: 768px) {
    body #primary.content-area,
    body .site-main,
    body .entry-content,
    body .wp-block-cover.alignfull,
    body .wp-block-group.alignfull {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box;
    }
}