/*
Theme Name: Waterfront Karachi (Salwa)
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; }
}

/* ==========================================================================
   Waterfront Karachi additions (sea blue replaces Salwa gold: #1d7896 / #a9dcea)
   ========================================================================== */
.wk-updated { font-size: 14px; color: #5b6b73; margin: 0 0 1.4rem; }
.wk-article h2 { font-family: var(--font-lora); }
.wk-article table, .wk-facts-table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.6rem; font-size: 16px; }
.wk-article th, .wk-article td, .wk-facts-table th, .wk-facts-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #e3eaed; vertical-align: top; }
.wk-article thead th { background: #e6f3f7; font-weight: 600; }
.wk-facts-table th { width: 38%; color: #3c4a51; font-weight: 600; background: #f3f8fa; }
.wk-article ul, .wk-article ol { padding-left: 1.3rem; margin: 0 0 1.2rem; }
.wk-article ul { list-style: disc; } .wk-article ol { list-style: decimal; }
.wk-article li { margin-bottom: .45rem; }
.wk-article a { color: #1d7896; text-decoration: underline; text-underline-offset: 2px; }
.wk-article .wk-note { background: #e6f3f7; border-left: 3px solid #1d7896; padding: 12px 16px; border-radius: 0 8px 8px 0; margin: 1.2rem 0; }
.wk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 1.2rem 0 1.8rem; }
@media (max-width: 900px) { .wk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wk-cards { grid-template-columns: 1fr; } }
.wk-card { display: flex; flex-direction: column; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.08); color: #1a1a1a !important; text-decoration: none !important; transition: transform .2s; }
.wk-card:hover { transform: translateY(-2px); }
.wk-card__img { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: #e6f3f7; }
.wk-card__body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; font-size: 15px; }
.wk-card__body strong { font-family: var(--font-lora); font-size: 19px; }
.wk-card__meta { color: #1d7896; font-weight: 600; font-size: 14px; }
.wk-faq { border-top: 1px solid #e3eaed; }
.wk-faq__item { border-bottom: 1px solid #e3eaed; }
.wk-faq__q { width: 100%; text-align: left; background: none; border: 0; padding: 16px 32px 16px 0; font-size: 17px; font-weight: 600; color: #1a1a1a; cursor: pointer; position: relative; }
.wk-faq__q::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 24px; font-weight: 400; color: #1d7896; }
.wk-faq__q[aria-expanded="true"]::after { content: "\2013"; }
.wk-faq__a p { margin: 0 0 16px; color: #3c4a51; }