/*
Theme Name: Qazi Coming Soon
Theme URI: https://qazisupportfoundation.org
Author: Qazi Support Foundation
Description: Single-page Coming Soon theme for Qazi Support Foundation — top cover image, Urdu quotation (Surah Al-Baqarah 2:177), logo and Coming Soon. Quote and citation are editable in Appearance > Customize.
Version: 2.1-light
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: qazi-comingsoon
Tags: coming-soon, one-column, custom-colors
*/

/* Qazi comingsoon, v2 — fixed to match the design in the 1st image,
   now fully responsive for all devices, including sm and xs.
   Measured from that design image, scaled to a 1440px page:
     top image:   about 850px wide, about 332px tall
     logo:        about 368px wide
     Coming Soon: about 281px wide
   That is why the top image is bigger than the logo in the design.

   Root cause of the inversion in your deployed version:
     your old CSS had top 479px wide, but logo 698px wide.
     Worse, your logo file is the COMBINED file (1224 x 602),
     so at 698px wide it was about 343px tall — taller than
     the top image (253px) and wider than it. That is why the
     logo looked bigger than the top image, the opposite of
     the design.
   With the sizes below, top (850 x 332) is bigger than the
   combined logo (368 wide, about 181 tall) in both width
   and height, and that order is kept at every breakpoint:
   the logo is always narrower than the top image.

   IMPORTANT: keep the separate .coming-soon block unused
   while you use the combined logo file, or "Coming Soon"
   will appear twice. Only use .coming-soon with a separate
   Coming Soon image file, at 281px wide below (smaller on
   small screens).
*/


@font-face {
  font-family: "Noto Kufi Arabic";
  src: url("fonts/NotoKufiArabic-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* Was min-width: 320px — that forced horizontal scroll on
     very small phones. 0 lets xs screens use their full width. */
  min-width: 0;
  overflow-x: hidden;
  background: linear-gradient(180deg, #d3ffe4 0%, #e5faff 100%);
}

img {
  max-width: 100%;
}

.page {
  width: 100%;
  display: flex;
  justify-content: center;
  overflow-x: hidden;
}

.desktop {
  width: min(100%, 1440px);
  min-width: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: linear-gradient(180deg, #d3ffe4 0%, #e5faff 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(32px, 7.99vw, 115px) 20px 20px;
}

/* Desktop: top image, design size */
.cover-slot {
  width: min(850px, 100%);
  aspect-ratio: 850 / 332;
  overflow: hidden;
  flex: none;
}

.cover-slot img {
  display: block;
  width: 90%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.quote-box {
  width: min(1038px, 100%);
  min-width: 0;
  padding: 14px clamp(4px, 1.4vw, 20px) 12px;
  text-align: center;
  overflow-wrap: break-word;
}

.urdu {
  margin: 0;
  font-family: "Noto Nastaliq Urdu", serif;
  font-size: clamp(20px, 2.23vw, 32px);
  line-height: 1.9;
  color: #000000;
}

.citation {
  margin: 8px 0 0;
  font-family: "Noto Nastaliq Urdu", serif;
  font-size: clamp(16px, 1.53vw, 22px);
  font-weight: 400;
  line-height: 1.5;
  color: #43ce21;
}

/* Desktop: logo, design size.
   At 368px wide, the combined logo file (1224 x 602)
   is about 181px tall, smaller than the top image. */
.logo {
  margin-top: clamp(32px, 4.65vw, 67px);
  width: min(368px, 100%);
  flex: none;
}

.logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Desktop: Coming Soon, design size.
   Only use this with a separate Coming Soon image. */
.coming-soon {
  margin-top: clamp(24px, 3.4vw, 49px);
  width: min(281px, 100%);
  flex: none;
}

.coming-soon img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------
   Responsive breakpoints — largest to smallest.
   At every step: top image width > logo width > Coming Soon width,
   nothing overflows, and fonts shrink in steps instead of jumping.
   --------------------------------------------------------------- */

/* Large laptop / small desktop: up to 1200px */
@media (max-width: 1200px) {
  .desktop {
    padding-top: 80px;
  }

  .cover-slot {
    width: min(760px, 100%);
  }

  .logo {
    width: min(340px, 100%);
  }

  .coming-soon {
    width: min(260px, 100%);
  }

  .urdu {
    font-size: clamp(20px, 2.6vw, 30px);
  }
}

/* Tablet landscape: up to 1024px */
@media (max-width: 1024px) {
  .desktop {
    padding-top: 64px;
    padding-right: 20px;
    padding-left: 20px;
  }

  .cover-slot {
    width: min(700px, 100%);
  }

  .logo {
    margin-top: 48px;
    width: min(320px, 100%);
  }

  .coming-soon {
    margin-top: 36px;
    width: min(240px, 100%);
  }

  .urdu {
    font-size: clamp(20px, 3vw, 28px);
    line-height: 1.85;
  }

  .citation {
    font-size: clamp(16px, 2.2vw, 20px);
  }
}

/* Tablet portrait: up to 768px */
@media (max-width: 768px) {
  .desktop {
    padding-top: 48px;
    padding-right: 18px;
    padding-left: 18px;
  }

  .cover-slot {
    width: min(600px, 100%);
  }

  .quote-box {
    padding-top: 12px;
    padding-bottom: 10px;
  }

  .urdu {
    font-size: clamp(20px, 4vw, 26px);
    line-height: 1.85;
  }

  .citation {
    font-size: clamp(15px, 2.8vw, 19px);
  }

  .logo {
    margin-top: 40px;
    width: min(300px, 100%);
  }

  .coming-soon {
    margin-top: 32px;
    width: min(230px, 100%);
  }
}

/* Small phones and small tablets (sm): up to 576px.
   Top image is 100% of the content width here, so the logo
   is capped well below it to keep the design order. */
@media (max-width: 576px) {
  .desktop {
    padding-top: 40px;
    padding-right: 16px;
    padding-left: 16px;
    padding-bottom: 16px;
    min-height: 100svh;
  }

  .cover-slot {
    width: 100%;
  }

  .quote-box {
    padding-top: 12px;
    padding-bottom: 8px;
  }

  .urdu {
    font-size: clamp(19px, 5.2vw, 24px);
    line-height: 1.8;
  }

  .citation {
    margin-top: 6px;
    font-size: clamp(15px, 4vw, 18px);
  }

  .logo {
    margin-top: 32px;
    width: min(280px, 80%);
  }

  .coming-soon {
    margin-top: 28px;
    width: min(210px, 65%);
  }
}

/* Extra-small phones (xs): up to 480px */
@media (max-width: 480px) {
  .desktop {
    padding-top: 32px;
    padding-right: 14px;
    padding-left: 14px;
  }

  .cover-slot {
    width: 100%;
  }

  .urdu {
    font-size: clamp(18px, 5.5vw, 22px);
    line-height: 1.8;
  }

  .citation {
    font-size: clamp(14px, 4.2vw, 17px);
  }

  .logo {
    margin-top: 28px;
    width: min(260px, 80%);
  }

  .coming-soon {
    margin-top: 24px;
    width: min(200px, 65%);
  }
}

/* Very small phones: up to 360px */
@media (max-width: 360px) {
  .desktop {
    padding-top: 24px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .urdu {
    font-size: 19px;
    line-height: 1.8;
  }

  .citation {
    font-size: 15px;
  }

  .logo {
    margin-top: 24px;
    width: min(240px, 85%);
  }

  .coming-soon {
    margin-top: 20px;
    width: min(180px, 70%);
  }
}