/*
Theme Name: Salwa PK
Theme URI: https://salwarealestate.pk
Description: Salwa Real Estate Pakistan. GeneratePress child theme replicating the Karachi section of salwaproperties.com. The design is not reinterpreted: assets/salwa.css is the parent site's own compiled stylesheet, and templates emit the same class names, so it matches by construction rather than by eye.
Author: SYNQ
Template: generatepress
Version: 1.0.0
Text Domain: salwa-pk
*/

/* ==========================================================================
   This file is deliberately small.

   The design lives in assets/salwa.css, lifted from salwaproperties.com.
   Anything added here is a genuine gap in that stylesheet, or a WordPress
   concern the original Next.js markup never had (comments, admin bar,
   pagination, editor output).

   Do not "tidy" the parent stylesheet. If a class looks unused it is probably
   used by a page not yet built.
   ========================================================================== */

/* Header over the hero.

   On the parent site the header floats on top of the hero photograph. It reads
   as a white bar only because `.hero_gradiant` fades to solid white at the top
   of the image. Leaving the header in normal flow produced a real white band
   and a visible hard edge where the gradient started, which is the giveaway
   that it is not the same page. Out of flow only where a hero exists, so inner
   pages are untouched. */
body.salwa-has-hero > header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 30;
}

/* Font variables.

   The lifted stylesheet declares each family twice: once with a real stack
   (`--font-lora:"Lora","Lora Fallback"`) and once as `--font-lora:var(--font-lora)`.
   The second is what Next.js's font loader overwrites at build time with the
   hashed local font. Served as a static file there is nothing to overwrite it,
   the variable references itself, and every `font-family:var(--font-lora)` in
   the stylesheet resolves to nothing — headings silently fell back to the
   sans-serif default. Pinning the real stacks here fixes the whole site, not
   just the hero.

   Poppins and Roboto are referenced by a handful of rules but were never loaded
   by the original either, so they inherit the same stack rather than pulling
   two more font files for nothing. */
:root {
  --font-lora:  "Lora", Georgia, "Times New Roman", serif;
  --font-inter: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-lato:  "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-poppins: var(--font-inter);
  --font-roboto:  var(--font-inter);
}

/* WordPress does not know about Tailwind's preflight, so a few core outputs
   need bringing into the system. */
.salwa-content h2 { font-size: 1.75rem; font-weight: 600; margin: 1.6rem 0 .8rem; }
.salwa-content h3 { font-size: 1.35rem; font-weight: 600; margin: 1.4rem 0 .6rem; }
.salwa-content p  { margin: 0 0 1rem; line-height: 1.75; }
.salwa-content ul,
.salwa-content ol { margin: 0 0 1rem 1.25rem; line-height: 1.75; }
.salwa-content ul { list-style: disc; }
.salwa-content ol { list-style: decimal; }
.salwa-content a  { color: #0f5c4a; text-decoration: underline; text-underline-offset: 2px; }
.salwa-content img { max-width: 100%; height: auto; border-radius: 10px; }
.salwa-content blockquote {
  border-left: 3px solid #0f5c4a; padding-left: 1rem; margin: 1.5rem 0; color: #444;
}
.salwa-content table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; }
.salwa-content th, .salwa-content td { border: 1px solid #e5e7eb; padding: .6rem .75rem; text-align: left; }

/* Skip link, which the original single-page app never needed. */
.salwa-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 18px;
  background: #fff; color: #0f5c4a; font-weight: 600;
}
.salwa-skip:focus { left: 8px; top: 8px; }

/* Keyboard focus. Tailwind's reset removes the default outline. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 2px solid #0f5c4a; outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}