/*
Theme Name: BrightSite
Description: BrightSite commercial cleaning and facilities support — approved 2026 design. Page copy is edited as normal WordPress blocks; the design's own stylesheet lives untouched in assets/css/styles.css.
Author: BrightSite
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brightsite
*/

/* ===========================================================================
   WORDPRESS COMPATIBILITY LAYER

   assets/css/styles.css is the approved design, copied in untouched. This
   file only bridges the gap between that markup and the markup WordPress
   blocks produce, so page copy is edited normally in wp-admin and nobody has
   to open a code editor.

   theme.json is what keeps this layer small: it stops WordPress wrapping
   every group block in an extra .wp-block-group__inner-container, so the
   rendered DOM matches the static design one-for-one and the design's own
   parent > child selectors keep working.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Rules the design targets by element name, which blocks render as <div>.
   Values copied verbatim from assets/css/styles.css so the result matches.
   --------------------------------------------------------------------------- */

/* .values-grid article */
.values-grid > * {
  border-bottom: 1px solid #ffffff3b;
  border-right: 1px solid #ffffff3b;
  min-height: 300px;
  padding: 28px;
}

/* .process-list li */
.process-list > * {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 22px;
  padding: 33px 0;
  border-bottom: 1px solid #fff3;
}

/* ---------------------------------------------------------------------------
   2. Item numbering via CSS counters.

   The static design hard-codes "01", "02"… into the markup. Generating the
   numbers here keeps that decoration out of the editor — an author only ever
   sees real words — and numbering stays correct when items are added,
   removed or reordered.
   --------------------------------------------------------------------------- */
.service-grid,
.process-list,
.values-grid,
.assurance-points,
.service-detail-list { counter-reset: bs-counter; }

.service-grid > *,
.process-list > *,
.values-grid > *,
.assurance-points > *,
.service-detail-list > * { counter-increment: bs-counter; }

.process-list > *::before,
.values-grid > *::before,
.assurance-points > *::before {
  content: counter(bs-counter, decimal-leading-zero);
  font: italic 18px Georgia, serif;
  color: var(--orange);
}
.assurance-points > *::before { color: var(--orange-dark); font-size: 17px; }

/* Service cards: number sits opposite the arrow on the card's top row. */
.service-card-top::before {
  content: counter(bs-counter, decimal-leading-zero);
}

/* Services page: number in the left-hand column of each row. */
.service-detail-number::before {
  content: counter(bs-counter, decimal-leading-zero);
}

/* Sectors page: number inside the coloured visual panel. */
.sector-detail-grid { counter-reset: bs-sector; }
.sector-detail-grid > * { counter-increment: bs-sector; }
.sector-visual > span::before {
  content: counter(bs-sector, decimal-leading-zero);
}

/* ---------------------------------------------------------------------------
   3. Block-editor classes the design does not know about.
   --------------------------------------------------------------------------- */
.wp-block-heading { font-size: inherit; font-weight: inherit; }
.has-text-align-center { text-align: center; }
.has-text-align-left   { text-align: left; }
.has-text-align-right  { text-align: right; }

/* WordPress admin bar would otherwise overlap the sticky header. */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

/* ---------------------------------------------------------------------------
   4. Enquiry form feedback (the handoff ships a static mailto form only).
   --------------------------------------------------------------------------- */
.form-message {
  padding: 16px 18px;
  margin-bottom: 22px;
  font-size: 15px;
  border-left: 4px solid var(--orange);
  background: var(--cream);
  color: var(--ink);
}
.form-message.success { border-left-color: #2e7d32; background: #edf7ed; color: #1e5b22; }
.form-message.error   { border-left-color: #c62828; background: #fdecea; color: #8e1f1a; }

/* Honeypot — hidden from people, filled in by bots. */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--orange); color: #fff; padding: 10px 16px; z-index: 2000; }
.skip-link:focus { left: 10px; top: 10px; }

/* Long-form legal copy needs a readable measure inside the 1200px shell. */
.legal-copy { max-width: 760px; }
.legal-copy h2 { margin: 46px 0 14px; font: 400 30px Georgia, serif; }
.legal-copy h2:first-child { margin-top: 0; }
.legal-copy p, .legal-copy li { color: var(--muted); line-height: 1.7; margin: 0 0 16px; }
.legal-copy ul { margin: 0 0 16px; padding-left: 20px; list-style: disc; }

/* ---------------------------------------------------------------------------
   6. Hero photograph.

   The handoff ships the hero as a 2.2 MB PNG, but it is a photograph with no
   transparency, so PNG buys nothing and costs a slow first paint on mobile.
   The same image re-encoded as JPEG is ~259 KB. Overriding the URL here keeps
   assets/css/styles.css byte-identical to the approved handoff.
   --------------------------------------------------------------------------- */
.hero-image { background-image: url(assets/images/brightsite-hero-branded.jpg); }