/* ═══════════════════════════════════════════════════════════════
   ALWANI GROUP — WordPress additions

   Everything WordPress needs that the static build did not: inner pages,
   block-editor output, images replacing the placeholders, accessibility
   helpers. Kept in its own file so assets/css/styles.css stays byte-for-byte
   identical to the static build and the two can be diffed.
   ═══════════════════════════════════════════════════════════════ */

/* ── Accessibility ──────────────────────────────────────────── */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.skip-link:focus {
  clip-path: none;
  height: auto;
  width: auto;
  margin: 0;
  z-index: 100000;
  top: 8px;
  left: 8px;
  padding: 0.75rem 1.25rem;
  background: var(--c-white);
  color: var(--c-gray-900);
  box-shadow: var(--sh-md);
  border-radius: var(--r-sm);
}

/* ── Wordmark ───────────────────────────────────────────────
   The static build hardcoded "ALWANI GROUP" in the markup; here the text is
   the WordPress site title, so it arrives in whatever case the owner typed.
   Uppercasing in CSS keeps the design identical without forcing them to type
   in caps (and keeps the accessible name readable for screen readers). */
.header-logo-text,
.footer-logo-text { text-transform: uppercase; }

/* ── Grids that adapt to how many items you actually added ───
   The static build hardcoded `repeat(6, 1fr)` for partners and `repeat(5,
   1fr)` for the team, because the demo had exactly six and five. Add three
   partners and they get squeezed into 1/6-width cells with the right half of
   the row empty — which reads as "cards are missing".

   auto-fit with a max track size fixes it at every count and every width:
   the columns keep a sane size, a short row centres instead of stretching,
   and more than a row's worth wraps. These sit outside a media query on
   purpose so they also override the breakpoint rules in styles.css. */
/* Phones: fill the width in two columns, the way the original did. An
   auto-fit track with a 150px minimum cannot fit two columns inside a 327px
   container, so it silently collapses to one — a tall single file of cards
   and a lot of dead space either side. Explicit columns here, adaptive
   above. */
@media (max-width: 600px) {
  .partners-grid,
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The max track widths are the exact column widths the 1140px container
   produced in the static build (6 partners / 5 people in one row). Any wider
   and the last item wraps to a second row on a large screen. */
@media (min-width: 601px) {
  .partners-grid {
    grid-template-columns: repeat(auto-fit, minmax(110px, 168px));
    justify-content: center;
  }

  .team-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 198px));
    justify-content: center;
  }
}

/* ── Uploaded images filling the placeholder slots ──────────── */
.alwani-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.chairman-img.alwani-img { border-radius: var(--r-md); }

/* Logos render in their own colours, at full strength, always. No greyscale
   and no opacity: a brand mark is the one thing on this page that is not
   ours to mute. The cell still lifts on hover (styles.css) so the strip
   keeps its interaction. */
.partner-cell img.partner-logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

/* ── Admin-only hint under the demo contact form ────────────── */
.alwani-admin-hint {
  margin-top: var(--sp-md);
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--c-blue);
  background: var(--c-blue-subtle);
  font-size: var(--fs-sm);
  color: var(--c-gray-700);
}

/* ═══════════════════════════════════════════════════════════════
   INNER PAGES (blog, single posts, 404, editor-built pages)

   These have no border network and no intro, so the fixed header needs
   real clearance and the page needs a normal reading column.
   ═══════════════════════════════════════════════════════════════ */
body.alwani-inner {
  background: var(--c-cream);
}

.alwani-page {
  padding-top: calc(var(--header-h) + var(--sp-2xl));
  padding-bottom: var(--sp-3xl);
  position: relative;
  z-index: 1;
}

.alwani-page-header {
  margin-bottom: var(--sp-xl);
}

.alwani-page-title {
  font-family: var(--ff-heading);
  font-size: var(--fs-2xl);
  font-weight: 300;
  letter-spacing: -1px;
  line-height: 1.1;
  color: var(--c-gray-900);
}

.alwani-page-meta {
  margin-top: var(--sp-sm);
  font-size: var(--fs-sm);
  color: var(--c-gray-500);
}

/* ── Block editor content ───────────────────────────────────── */
.alwani-content > * {
  margin-bottom: var(--sp-md);
}

.alwani-content > *:last-child { margin-bottom: 0; }

.alwani-content h2,
.alwani-content h3,
.alwani-content h4 {
  font-family: var(--ff-heading);
  color: var(--c-gray-900);
  margin-top: var(--sp-xl);
  margin-bottom: var(--sp-sm);
  font-weight: 500;
}

.alwani-content h2 { font-size: var(--fs-xl); }
.alwani-content h3 { font-size: var(--fs-lg); }
.alwani-content h4 { font-size: var(--fs-md); }

.alwani-content p,
.alwani-content li {
  font-size: var(--fs-base);
  line-height: 1.8;
  color: var(--c-gray-700);
}

.alwani-content ul,
.alwani-content ol {
  padding-left: 1.4em;
  margin-bottom: var(--sp-md);
}

.alwani-content ul { list-style: disc; }
.alwani-content ol { list-style: decimal; }

.alwani-content a {
  color: var(--c-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.alwani-content a:hover { color: var(--c-blue-light); }

.alwani-content img,
.alwani-content .wp-block-image img {
  height: auto;
  border-radius: var(--r-sm);
}

.alwani-content figcaption,
.alwani-content .wp-element-caption {
  margin-top: var(--sp-xs);
  font-size: var(--fs-xs);
  color: var(--c-gray-500);
  text-align: center;
}

.alwani-content blockquote,
.alwani-content .wp-block-quote {
  border-left: 2px solid var(--c-blue);
  padding-left: var(--sp-md);
  margin: var(--sp-lg) 0;
  font-family: var(--ff-heading);
  font-style: italic;
  color: var(--c-gray-800);
}

.alwani-content .wp-block-pullquote {
  border-top: 1px solid var(--c-gray-200);
  border-bottom: 1px solid var(--c-gray-200);
  padding: var(--sp-lg) 0;
  text-align: center;
}

.alwani-content pre,
.alwani-content .wp-block-code {
  background: var(--c-gray-100);
  padding: var(--sp-md);
  border-radius: var(--r-sm);
  overflow-x: auto;
  font-size: var(--fs-sm);
}

.alwani-content table,
.alwani-content .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.alwani-content th,
.alwani-content td {
  border: 1px solid var(--c-gray-200);
  padding: 0.6rem 0.8rem;
  text-align: left;
}

.alwani-content th {
  font-family: var(--ff-heading);
  font-weight: 600;
  color: var(--c-gray-900);
}

.alwani-content hr,
.alwani-content .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--c-gray-200);
  margin: var(--sp-xl) 0;
}

/* Wide + full alignment inside the reading column */
.alwani-content .alignwide {
  width: min(1320px, 92vw);
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}

.alwani-content .alignfull {
  width: 100vw;
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}

.alwani-content .alignleft {
  float: left;
  margin: 0 var(--sp-md) var(--sp-sm) 0;
  max-width: 50%;
}

.alwani-content .alignright {
  float: right;
  margin: 0 0 var(--sp-sm) var(--sp-md);
  max-width: 50%;
}

.alwani-content .aligncenter {
  margin-left: auto;
  margin-right: auto;
}

/* ── Pagination / comments ──────────────────────────────────── */
.alwani-pagination {
  margin-top: var(--sp-xl);
  display: flex;
  gap: var(--sp-xs);
  flex-wrap: wrap;
}

.alwani-pagination .page-numbers {
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--c-gray-200);
  border-radius: var(--r-xs);
  font-size: var(--fs-sm);
  color: var(--c-gray-700);
  transition: border-color var(--dur-f) var(--ease), color var(--dur-f) var(--ease);
}

.alwani-pagination .page-numbers:hover,
.alwani-pagination .page-numbers.current {
  border-color: var(--c-blue);
  color: var(--c-blue);
}

/* ── Post list ──────────────────────────────────────────────── */
.alwani-post-list {
  display: grid;
  gap: var(--sp-xl);
}

.alwani-post-card-title {
  font-family: var(--ff-heading);
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--c-gray-900);
  margin-bottom: var(--sp-2xs);
}

.alwani-post-card-title a:hover { color: var(--c-blue); }

/* ── 404 ────────────────────────────────────────────────────── */
.alwani-404 {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.alwani-404-code {
  font-family: var(--ff-heading);
  font-size: clamp(4rem, 2rem + 8vw, 9rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--c-gray-900);
}

/* ── Search form ────────────────────────────────────────────── */
.alwani-search {
  display: flex;
  gap: var(--sp-xs);
  max-width: 420px;
}

.alwani-search input[type="search"] {
  flex: 1;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--c-gray-200);
  border-radius: var(--r-xs);
  background: var(--c-white);
  font-size: var(--fs-sm);
  color: var(--c-gray-800);
}

.alwani-search input[type="search"]:focus {
  outline: none;
  border-color: var(--c-blue);
}

.alwani-search button {
  padding: 0.7rem 1.2rem;
  border-radius: var(--r-xs);
  background: var(--c-gray-900);
  color: var(--c-white);
  font-family: var(--ff-heading);
  font-size: var(--fs-sm);
  transition: background var(--dur-f) var(--ease);
}

.alwani-search button:hover { background: var(--c-blue); }

/* ═══════════════════════════════════════════════════════════════
   FAQ — visible on the page, matching the FAQPage structured data
   ═══════════════════════════════════════════════════════════════ */
.faq { background: transparent; }

.alwani-faq-list {
  max-width: 780px;
  margin: var(--sp-xl) auto 0;
  display: grid;
  gap: var(--sp-lg);
}

.alwani-faq-item {
  border-top: 1px solid var(--c-gray-200);
  padding-top: var(--sp-md);
}

.alwani-faq-q {
  font-family: var(--ff-heading);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--c-gray-900);
  margin-bottom: var(--sp-xs);
}

.alwani-faq-a {
  font-size: var(--fs-base);
  line-height: 1.8;
  color: var(--c-gray-700);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION RHYTHM — fluid, and tighter than the static build

   The static build used a fixed `padding: 8rem 0` on every section, so two
   neighbours put 256px of empty page between them at any screen size, and
   the 768px breakpoint dropped it to a still-large 192px in one jump.

   One fluid value replaces the fixed value and its breakpoint override:
   it scales continuously with the viewport instead of stepping, so there is
   no width at which the page suddenly feels wrong.

     360px  → 44px each side  (88px between sections)
     768px  → 58px            (116px)
     1280px → 80px            (160px)

   These rules sit outside any media query on purpose, so they also beat the
   breakpoint rules in styles.css.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --section-y: clamp(2.75rem, 1rem + 5.5vw, 5rem);
}

.section {
  padding: var(--section-y) 0;
}

/* The partners strip is a thin band, not a full section. */
.partners {
  padding: calc(var(--section-y) * 0.62) 0;
}

.site-footer {
  padding-top: calc(var(--section-y) * 0.75);
}

/* The gap under a section heading scaled with the old padding too. */
.section-heading {
  margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.chairman-layout {
  gap: clamp(2rem, 1rem + 4vw, 6rem);
}

.team-grid,
.partners-grid {
  row-gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

/* ── Small-screen refinements ───────────────────────────────
   The wordmark and the burger sit close together on a narrow phone; give
   the mark a little room and stop the title wrapping under it. */
@media (max-width: 400px) {
  .header-logo-text { font-size: 0.9rem; letter-spacing: 1px; }
  .hero-title { line-height: 1.06; }
}

/* Landscape phones are short, not narrow: a 100vh hero leaves no room for
   the headline, so let it size to its content there. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding-top: calc(var(--header-h) + 1.5rem);
    padding-bottom: 3.5rem;
  }
  .scroll-cue { display: none; }
}