/* ==========================================================================
   Fortis Identity — responsive-fixes.css
   Load AFTER assets/css/style.css (and after the inline <style> block).

   Breakpoints (min-width unless noted)
     360   small phones
     576   large phones / phone landscape
     768   tablets, portrait
     992   tablets landscape / small laptops (Bootstrap lg)
     1200  sidebar appears (matches the template's JS + Bootstrap d-xl-none)
     1400  desktops
     1920  large desktops

   Built against the iPortfolio class names used in index.html. Rules use
   max-width: 575.98px style values to avoid 1px overlaps between queries.
   ========================================================================== */


/* ---------- Global ---------- */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img, svg, video, iframe { max-width: 100%; }

/* AOS fade-left / fade-right start off-canvas and cause sideways scroll on phones */
#main {
  overflow-x: hidden;
  overflow-x: clip;
}

:where(a, button, [role="button"], input, textarea):focus-visible {
  outline: 2px solid #1A6FD4;
  outline-offset: 2px;
}
#header :where(a, [role="button"]):focus-visible { outline-color: #fff; }
.mobile-nav-toggle:focus-visible { outline: 2px solid #fff !important; }

.logo-sub {
  line-height: 1.5;
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
}

.back-to-top {
  right: calc(15px + env(safe-area-inset-right, 0px));
  bottom: calc(15px + env(safe-area-inset-bottom, 0px));
}


/* ---------- Hero (all sizes) ---------- */

#hero {
  height: 100vh;
  height: 100svh;          /* stable height under mobile browser toolbars */
  min-height: 420px;
}

#hero .hero-container {
  width: 100%;
  max-width: 960px;
  padding: 0 20px;
  text-align: center;
}

#hero h1 {
  font-size: clamp(2rem, 1.2rem + 4.2vw, 4rem);
  line-height: 1.1;
}

#hero p {
  font-size: clamp(1.05rem, 0.8rem + 1.4vw, 1.625rem);
  line-height: 1.35;
}


/* ---------- Skills: long labels were clipped by a fixed 60px height ---------- */

.skills .progress {
  height: auto;
  min-height: 60px;
  overflow: visible;
  margin-bottom: 8px;
}

.skills .progress .skill {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  line-height: 1.4;
}

.skills .progress .skill .val {
  flex: none;
  float: none;
}


/* ---------- Contact (all sizes) ---------- */

.contact .info p,
.contact .info a {
  overflow-wrap: anywhere;   /* long Calendly URL / email overflowed 320px phones */
}

.map-embed {
  display: block;
  width: 100%;
  height: clamp(200px, 38vw, 300px);
  border: 0;
  margin-top: 16px;
}

.contact .php-email-form textarea {
  min-height: 140px;
  resize: vertical;
}

.about .content ul li span,
.about .content ul li a {
  min-width: 0;
  overflow-wrap: anywhere;
}


/* ---------- Touch devices ---------- */

/* iOS zooms the page when a focused field is under 16px */
@media (pointer: coarse) {
  .contact .php-email-form .form-control,
  .contact .php-email-form input,
  .contact .php-email-form textarea {
    font-size: 16px;
  }
}

/* iOS Safari ignores/janks background-attachment: fixed (iPads in landscape hit the desktop rule) */
@media (hover: none) {
  #hero { background-attachment: scroll; }
}


/* ---------- Below 1200px: off-canvas sidebar ---------- */

@media (max-width: 1199.98px) {
  #header {
    max-width: 86vw;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    font-size: 28px;
    line-height: 1;
    color: #fff;
    background: #1A6FD4;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  }

  /* keep footer text clear of the back-to-top button */
  #footer {
    padding-left: 64px;
    padding-right: 64px;
    padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
  }
}


/* ---------- Phones (< 768px) ---------- */

@media (max-width: 767.98px) {
  #hero p { min-height: 2.7em; }       /* typed text wraps to 2 lines; stops the title jumping */

  #main section { padding: 44px 0; }
  .section-title { padding-bottom: 20px; }
  .section-title h2 { font-size: 1.75rem; }
}

@media (max-width: 575.98px) {
  .contact .php-email-form { padding: 20px 16px; }

  .contact .php-email-form button[type="submit"] {
    width: 100%;
    min-height: 48px;
  }
}


/* ---------- 992px–1439px: two-by-two stat boxes ----------
   Four columns are too tight here (container is 960px, or the 300px sidebar eats
   the width from 1200px), which squeezes the stat text to ~110px. */

@media (min-width: 992px) and (max-width: 1439.98px) {
  .facts .row > [class*="col-lg-3"] {
    flex: 0 0 auto;
    width: 50%;
  }
}


/* ---------- 1200px+: fixed sidebar ---------- */

@media (min-width: 1200px) {
  #main { max-width: 100%; }

  /* the fixed footer sits over the bottom of the sidebar and hid the last nav item */
  #header { padding-bottom: 100px; }
}

/* Short laptop screens (1366x768, 1280x720, browser chrome included) */
@media (min-width: 1200px) and (max-height: 820px) {
  .logo-wrap { padding-top: 12px; }
  .logo-wrap img.site-logo { width: 72px; height: 72px; }
  .logo-wordmark { font-size: 16px; margin-top: 6px; }
  #header .social-links { margin-top: 0.25rem !important; }
  #header .nav-menu a {
    height: 46px;
    margin-bottom: 6px;
    font-size: 14px;
  }
}

@media (min-width: 1200px) and (max-height: 680px) {
  .logo-sub { display: none; }
  .logo-wrap img.site-logo { width: 56px; height: 56px; }
  #header .nav-menu a {
    height: 40px;
    margin-bottom: 4px;
  }
}


/* ---------- Phone landscape / very short viewports ---------- */

@media (max-height: 500px) and (orientation: landscape) {
  #hero { min-height: 340px; }
  #hero h1 { font-size: 2rem; }
  #hero p { font-size: 1.1rem; min-height: 0; }

  #main section { padding: 36px 0; }

  .logo-wrap img.site-logo { width: 64px; height: 64px; }
  .logo-sub { display: none; }
  #header .nav-menu a {
    height: 42px;
    margin-bottom: 6px;
  }
}


/* ---------- Large desktops ---------- */

@media (min-width: 1920px) {
  .container { max-width: 1500px; }
  #main section { padding: 80px 0; }
  #hero h1 { font-size: 5rem; }
  #hero p { font-size: 2rem; }
}


/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
  }
}