/* Mobile overrides — loaded after styles.css */

/* 1) Global safety for images */
img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* helps crop circular images nicely when width/height are set */
}

/* 2) Constrain background video on small screens (avoid huge height) */
@media (max-width: 767.98px) {
    .bg-video {
        max-height: 40vh;
        width: 100%;
        object-fit: cover;
    }
}

/* 3) Portfolio: keep horizontal scroller on small screens and make slides smaller */
@media (max-width: 767.98px) {
    /* If you use the wrapper & scroller markup, ensure it stays horizontal */
    .portfolio-wrapper {
        position: relative;
    }

    .portfolio-scroll {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: 0.75rem;
        padding: 0.6rem 0;
        scroll-snap-type: x mandatory;
        align-items: flex-start;
    }

    .portfolio-slide,
    #portfolio .portfolio-item,
    .portfolio-item img {
        box-sizing: border-box;
    }

    .portfolio-slide,
    #portfolio .portfolio-item {
        flex: 0 0 85%;
        min-width: 180px;
        max-width: 90vw;
        margin: 0;
        scroll-snap-align: center;
    }

        .portfolio-slide img,
        #portfolio .portfolio-item img {
            width: 100%;
            height: auto;
            display: block;
        }

    /* hide large decorative arrows on very small phones to save space */
    .portfolio-nav {
        display: none !important;
    }
}

/* 4) Timeline / About circular images: ensure they remain small and cropped */
.timeline .timeline-image {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    border-width: 6px;
    border-style: solid;
    box-sizing: border-box;
}

    .timeline .timeline-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* Slightly increase on narrow tablets */
@media (min-width: 576px) and (max-width: 991.98px) {
    .timeline .timeline-image {
        width: 80px;
        height: 80px;
        border-width: 7px;
    }
}

/* 5) Team / other portrait images */
.team-member img {
    width: 10rem; /* desktop fallback kept */
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

/* reduce on small screens */
@media (max-width: 767.98px) {
    .team-member img {
        width: 8rem;
        height: 8rem;
    }
}

/* 6) Masthead spacing — reduce huge paddings on phones so content is visible sooner */
@media (max-width: 767.98px) {
    header.masthead {
        padding-top: 6.5rem !important;
        padding-bottom: 3rem !important;
        background-attachment: scroll !important;
        background-size: cover !important;
    }

        header.masthead .masthead-heading {
            font-size: 1.8rem !important;
            line-height: 1.9rem !important;
        }

        header.masthead .masthead-subheading {
            font-size: 1rem !important;
        }
}

/* 7) Defensive: in case any component forces images to a specific large height */
img[width][height], img[style] {
    max-width: 100%;
    height: auto !important;
    width: auto;
}

/* 8) Accessibility: ensure portfolio scroller is focusable on mobile */
.portfolio-scroll:focus {
    outline: none;
}

/* Mobile: make contact text readable by using a darker color */
@media (max-width: 767.98px) {
  /* Strong override for any element in #contact that has an inline color */
  #contact [style*="color"] {
    color: #1f1f1f !important;
  }

  /* Generic fallback: force readable color for all contact content */
  #contact,
  #contact * {
    color: #1f1f1f !important;
  }

  /* Keep links and brand/icon accents readable (adjust as needed) */
  #contact a,
  #contact .fa-stack,
  #contact .fa-stack * {
    color: #1f1f1f !important;
  }

  /* If you prefer to keep the pink but restore contrast, uncomment the block below
     instead of the dark-text rules above. It sets a dark background and white text. */
  /*
  #contact {
    background-color: #212529 !important;
    color: #ffffff !important;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  #contact h2.section-heading,
  #contact p {
    color: #ffffff !important;
  }
  */
}

/* Ensure Font Awesome icons render correctly in #contact on small screens */
@media (max-width: 767.98px) {
  /* SVG-inlined FA icons and classic <i> variants */
  #contact .svg-inline--fa,
  #contact .fa,
  #contact .fas,
  #contact .far,
  #contact .fab,
  #contact i {
    color: #1f1f1f !important;       /* readable color */
    fill: currentColor !important;   /* make SVG use the same color */
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands", "Font Awesome 5 Pro", sans-serif !important;
    font-weight: 900 !important;     /* required for solid icons (fas) */
    speak: none;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
  }

  /* fa-stack (stacked icons) specifics */
  #contact .fa-stack,
  #contact .fa-stack * {
    color: #1f1f1f !important;
    fill: currentColor !important;
  }

  /* Defensive: ensure pseudo-elements also inherit color/fill */
  #contact .fa::before,
  #contact .fas::before,
  #contact .far::before,
  #contact .fab::before {
    color: inherit !important;
    fill: currentColor !important;
  }
}

/* Fix contact text readability without breaking Font Awesome stacks */
@media (max-width: 767.98px) {
  /* 1) Target only textual elements — don't override icons */
  #contact h2.section-heading,
  #contact .text-center p,
  #contact p,
  #contact .col-md-4 p,
  #contact .portfolio-caption-subheading,
  #contact .portfolio-caption-heading {
    color: #1f1f1f !important;
  }

  /* 2) If an element has an inline color, make it readable but don't force all children */
  #contact [style*="color"] {
    color: #1f1f1f !important;
  }

  /* 3) Allow Font Awesome classes to control icon color.
     Reset any broad color overrides for FA elements so stacked icons render correctly. */
  #contact .fa,
  #contact .fas,
  #contact .far,
  #contact .fab,
  #contact .fa-stack,
  #contact .fa-stack * {
    color: initial !important;
    fill: initial !important;
  }

  /* 4) Ensure SVGs inserted by the FA JS use currentColor for their paths (solid icons inherit color) */
  #contact .svg-inline--fa path,
  #contact .svg-inline--fa circle,
  #contact .svg-inline--fa rect,
  #contact .svg-inline--fa polygon,
  #contact .svg-inline--fa line {
    fill: currentColor !important;
  }

  /* 5) Keep links readable */
  #contact a {
    color: #1f1f1f !important;
  }
}

/* Restore Font Awesome stacked icon colors for #contact on mobile */
@media (max-width: 767.98px) {
  /* Outer circle (fa-circle / stack 2x) -> brand yellow */
  #contact .fa-circle,
  #contact .fa-stack-2x,
  #contact svg.svg-inline--fa.fa-circle,
  #contact svg[data-icon="circle"] {
    color: #ffc800 !important;
    fill: #ffc800 !important;
  }

  /* Inner glyph (fa-inverse / stack 1x) -> white */
  #contact .fa-inverse,
  #contact .fa-stack-1x,
  #contact svg.svg-inline--fa.fa-inverse,
  /* fallback selector for other SVG icons inside the stack */
  #contact .fa-stack svg:not(.fa-circle),
  #contact svg.svg-inline--fa:not(.fa-circle) {
    color: #fff !important;
    fill: #fff !important;
  }

  /* Ensure SVG path elements use currentColor */
  #contact svg.svg-inline--fa path,
  #contact svg.svg-inline--fa circle,
  #contact svg.svg-inline--fa rect,
  #contact svg.svg-inline--fa polygon,
  #contact svg.svg-inline--fa line {
    fill: currentColor !important;
  }

  /* Preserve Font Awesome font fallback if JS/CSS rendering differs */
  #contact .fa,
  #contact .fas,
  #contact .far,
  #contact .fab {
    color: inherit !important;
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands", sans-serif !important;
    font-weight: 900 !important;
  }

  /* Undo any earlier blanket resets that could hide icons */
  #contact .fa,
  #contact .fa-stack,
  #contact .fa-stack * {
    color: unset !important;
    fill: unset !important;
  }

  /* Re-apply correct colours after unsetting */
  #contact .fa-circle,
  #contact .fa-stack-2x,
  #contact svg.svg-inline--fa.fa-circle {
    color: #ffc800 !important;
    fill: #ffc800 !important;
  }
  #contact .fa-inverse,
  #contact .fa-stack-1x,
  #contact svg.svg-inline--fa:not(.fa-circle) {
    color: #fff !important;
    fill: #fff !important;
  }
}

/* Mobile contact: targeted text + explicit stacked icon coloring (append) */
@media (max-width: 767.98px) {
  /* Target only text elements — avoid touching icons */
  #contact h2.section-heading,
  #contact .text-center p,
  #contact p,
  #contact .col-md-4 p {
    color: #1f1f1f !important;
  }

  /* Defensive: if some elements have inline color, make them readable but don't override icons */
  #contact [style*="color"] {
    color: #1f1f1f !important;
  }

  /* --- Font Awesome stacked icons: keep circle yellow and glyph white --- */
  /* For classic font-based stacks */
  #contact .fa-stack .fa-stack-2x { color: #ffc800 !important; }
  #contact .fa-stack .fa-stack-1x,
  #contact .fa-inverse { color: #fff !important; }

  /* For inline-SVG FA (injected by JS): make SVG shapes inherit currentColor */
  #contact svg.svg-inline--fa { color: inherit !important; }
  #contact svg.svg-inline--fa path,
  #contact svg.svg-inline--fa circle,
  #contact svg.svg-inline--fa rect,
  #contact svg.svg-inline--fa polygon,
  #contact svg.svg-inline--fa line {
    fill: currentColor !important;
  }

  /* Ensure stacked SVG circle uses the yellow when present */
  #contact svg.svg-inline--fa[data-icon="circle"],
  #contact svg.svg-inline--fa.fa-circle {
    color: #ffc800 !important;
    fill: #ffc800 !important;
  }

  /* Re-apply white for the inner glyph SVGs (non-circle children) */
  #contact svg.svg-inline--fa:not([data-icon="circle"]) {
    color: #fff !important;
    fill: #fff !important;
  }

  /* Keep links readable */
  #contact a { color: #1f1f1f !important; }
}