/*
 * Phone and tablet improvements on top of the theme (kossa). Not on live.
 *
 * Every rule is inside a max-width: 1199px query (the theme switches to its
 * small-text tablet layout below 1200px; Tim, 2026-10-15), so desktop
 * (1200px and up) renders exactly as the theme does. Loaded after the theme's stylesheets
 * (see src/app/[[...slug]]/page.tsx); `html body` only outranks the theme's
 * own selectors where they are equally specific.
 */

@media (max-width: 1199px) {
  /* WOW.js keeps elements hidden until they scroll into view, and the
     slide-in ones wait off to the side. On phones that left long black gaps
     where gallery images never appeared, and the waiting images widened the
     page, so Chrome zoomed the whole page out. Show them in place instead. */
  html body .wow {
    visibility: visible !important;
    animation-name: none !important;
  }
  body {
    overflow-x: clip;
  }

  /* Header: a bigger logo and a 44px target around the menu button. */
  html body .header .mobile-logo svg {
    width: auto;
    height: 34px;
  }
  html body .menu-btn,
  html body .menu-btn-close {
    box-sizing: content-box;
    padding: 15px 12px;
    margin: -15px -12px;
    cursor: pointer;
  }
  html body .menu-adaptive .header-links {
    font-size: 18px;
    line-height: 27px;
  }
  html body .menu-adaptive .header-links a {
    display: block;
    padding: 8px 16px;
  }

  /* The theme's tablet sizes (8-12px) are too small to read. */
  html body label { font-size: 13px; line-height: 18px; margin-bottom: 6px; }
  html body .btn-outline { font-size: 13px; }
  html body .main-slider__slide-text { font-size: 16px; line-height: 150%; }
  html body .about-us .about-us-text { font-size: 16px; line-height: 150%; }
  html body .portfolio-text { font-size: 15px; line-height: 160%; }
  html body .services-item-link { font-size: 13px; }
  html body .services-item__content-text { font-size: 15px; line-height: 160%; }
  html body .projects-item-title { font-size: 16px; }
  html body .projects-item:last-child { font-size: 14px; }
  html body .contact-text,
  html body .contact-text.purple { font-size: 15px; line-height: 150%; }
  html body .contact form .form-text { font-size: 12px; }

  /* Footer: readable links and copyright, 40px icon targets, and room for
     the TPN badge, which is wider than an icon. */
  html body .footer-links li { font-size: 13px; line-height: 20px; }
  html body .footer-links li a { display: inline-block; padding: 6px 0; }
  html body .footer-social { height: auto; gap: 12px; }
  html body .footer-social a {
    width: auto;
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  html body .footer__inner .copyright { font-size: 12px; line-height: 18px; }

  /* Portfolio item pages: the theme's tablet rule `.h-100{height:auto}`
     collapses the banner to 0px, and its absolutely positioned title and
     "Back to Projects" link then sit above the top of the page. Give the
     banner a height again (desktop is 100vh). */
  html body .portfolio-single-banner.h-100 {
    position: relative;
    min-height: max(60vh, 360px);
  }
}

@media (max-width: 767px) {
  html body .page-banner-text { font-size: 15px; line-height: 160%; }
  html body .btn-outline,
  html body .our-services .portfolio .btn-outline,
  html body .our-services-contact .btn-outline { font-size: 13px; }
  html body .btn-purple { font-size: 15px; }

  html body .blog-list-articles__text { font-size: 16px; line-height: 160%; }
  html body .blog-list-item__title { font-size: 16px; }
  html body .blog-list-item__date { font-size: 12px; line-height: 16px; }
  html body .blog-list-item__link { font-size: 13px; }

  html body .our-services-row-text { font-size: 16px; line-height: 160%; }
  html body .our-services-works__title { font-size: 16px; line-height: 160%; }
  html body .our-services-video-text,
  html body .our-services-video p,
  html body .our-services-video-text.purple,
  html body .our-services-video p.purple { font-size: 16px; line-height: 160%; }
  html body .our-services .portfolio-check-text { font-size: 16px; line-height: 160%; }
  html body .our-services-contact-subtitle { font-size: 16px; }
  html body .our-services-contact-text { font-size: 15px; line-height: 160%; }

  html body .content-page h3 { font-size: 18px; }
  html body .content-page p,
  html body .content-page ul li { font-size: 16px; line-height: 160%; }
  html body .blog-page-content p { font-size: 16px; line-height: 160%; }
  html body .blog-page h3,
  html body .blog-page-title { font-size: 18px; }

  html body .gaming .game-archive-brands-text,
  html body .portfolio-page .game-archive-brands-text { font-size: 16px; line-height: 160%; }
  html body .about-video-text { font-size: 16px; line-height: 160%; }
  html body .about-projects-item__title,
  html body .portfolio-page .portfolio-projects__item-title { font-size: 16px; }
  html body .about-projects-item:last-child { font-size: 14px; }
  html body .portfolio-single__row-box p,
  html body .portfolio-single-text { font-size: 16px; line-height: 160%; }

  html body .contact-text { font-size: 15px; }
  html body .contact form .form-text { font-size: 12px; }
  html body .contact-us-row-text { font-size: 16px; }
  html body .contact-us-map-text { font-size: 16px; }

  /* Below 1200px a banner is as tall as its picture. A new page's starter
     banner has none yet: give it a height so its title shows. (Every
     migrated banner has a picture.) */
  html body .page-banner:not(:has(> .banner-bg)) { height: 70vh; min-height: 420px; }
}