/* Extracted from page-contact.php so it is cached once instead of being re-sent
   inside the HTML on every page view. Enqueued by
   lumoria_enqueue_template_styles() in functions.php. */

    #lumCxSec, #lumCxSec * { box-sizing: border-box; }
    #lumCxSec {
      --lum-gold: #44BDA1;
      --lum-gold-dark: #04272F;
      --lum-ink: #1D1235;
      --lum-sub: var(--text-muted);
      --lum-line: rgba(29,18,53,.09);
      --lum-soft: #F7EBE2;
      font-family: var(--font-primary);
      max-width: var(--container-w);
      margin: 0 auto;
      padding: clamp(36px, 4vw, 56px) clamp(16px, 4vw, 48px) clamp(48px, 6vw, 72px);
    }

    /* ---------------- CHANNEL CARDS ---------------- */
    #lumCxSec .lum-cx-channels {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 24px;
      margin-bottom: 24px;
    }
    #lumCxSec .lum-cx-card {
      display: block;
      background: #fff;
      border: 1px solid var(--lum-line);
      border-radius: 18px;
      padding: 26px 28px 28px;
      color: inherit;
      text-decoration: none;
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    #lumCxSec a.lum-cx-card:hover {
      transform: translateY(-3px);
      border-color: rgba(68,189,161,.45);
      box-shadow: 0 18px 38px -22px rgba(29,18,53,.35);
    }
    #lumCxSec .lum-cx-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 46px;
      height: 46px;
      margin-bottom: 22px;
      border-radius: 50%;
      background: var(--lum-soft);
      color: var(--lum-gold);
      font-size: 17px;
    }
    #lumCxSec .lum-cx-label {
      display: block;
      font-size: var(--text-base);
      font-weight: var(--fw-semibold);
      color: var(--lum-ink);
      margin-bottom: 6px;
    }
    #lumCxSec .lum-cx-value {
      display: block;
      font-size: 15px;
      line-height: 1.5;
      color: var(--lum-sub);
      overflow-wrap: anywhere;
    }
    #lumCxSec .lum-cx-nowrap { white-space: nowrap; }
    /* The head office address is a link to its map pin. It stays the colour of
       the address it replaces -- the surrounding cards are all quiet labels and
       values, and a blue link in one of them would read as the odd one out. */
    #lumCxSec .lum-cx-map-link {
      color: inherit;
      text-decoration: none;
      border-bottom: 1px solid rgba(20, 131, 110, .35);
    }
    #lumCxSec .lum-cx-map-link:hover,
    #lumCxSec .lum-cx-map-link:focus-visible {
      color: var(--lum-ink, #04272f);
      border-bottom-color: currentColor;
    }

    /* ---------------- WIDE INFO CARDS ---------------- */
    #lumCxSec .lum-cx-info {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px;
      margin-bottom: 24px;
    }
    #lumCxSec .lum-cx-info .lum-cx-card { display: flex; gap: 16px; align-items: flex-start; }
    #lumCxSec .lum-cx-info .lum-cx-icon {
      width: 34px;
      height: 34px;
      margin: 0;
      font-size: 14px;
      background: transparent;
      border: 1px solid rgba(68,189,161,.4);
      flex-shrink: 0;
    }

    /* ---------------- MAP + FORM ---------------- */
    #lumCxSec .lum-cx-bottom {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px;
      align-items: stretch;
    }
    /* The stage-only map carries no height of its own to stretch to, so left in
       flow it falls back to the map image's natural 1297px and drags the row
       with it — which is what left the form marooned in white space. Taking
       the map out of flow lets the form set the row height and the map fill
       whatever that turns out to be. Scoped to this page: the homepage map
       sizes itself from its own grid and must not change. */
    #lumCxSec .lum-cx-bottom > #lumBahrainMap.is-stage-only {
      position: relative;
      min-height: 520px;
    }
    #lumCxSec .lum-cx-bottom > #lumBahrainMap.is-stage-only .lum-map-shell {
      position: absolute;
      inset: 0;
    }
    #lumCxSec .lum-cx-form-card {
      background: #fff;
      border: 1px solid var(--lum-line);
      border-radius: 18px;
      padding: clamp(26px, 3vw, 36px);
    }
    #lumCxSec .lum-cx-form-title {
      font-size: var(--text-2xl);
      font-weight: var(--fw-heading);
      line-height: var(--lh-snug);
      color: var(--lum-ink);
      margin: 0 0 24px;
    }
    #lumCxSec .lum-cx-form { display: flex; flex-direction: column; gap: 16px; }
    #lumCxSec .lum-cx-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }
    #lumCxSec .lum-cx-field { min-width: 0; }
    #lumCxSec .lum-cx-field label {
      display: block;
      margin: 0 0 7px;
      font-size: 13px;
      font-weight: var(--fw-medium);
      color: var(--lum-ink);
    }
    #lumCxSec .lum-cx-field input,
    #lumCxSec .lum-cx-field textarea {
      width: 100%;
      padding: 13px 16px;
      border: 1px solid var(--lum-line);
      border-radius: 12px;
      background: #fff;
      font-family: inherit;
      font-size: 15px;
      color: var(--lum-ink);
      outline: none;
      transition: border-color .25s ease, box-shadow .25s ease;
    }
    #lumCxSec .lum-cx-field textarea { min-height: 130px; resize: vertical; }
    #lumCxSec .lum-cx-field input::placeholder,
    #lumCxSec .lum-cx-field textarea::placeholder { color: rgba(4,39,47,.45); }
    #lumCxSec .lum-cx-field input:focus,
    #lumCxSec .lum-cx-field textarea:focus {
      border-color: var(--lum-gold);
      box-shadow: 0 0 0 3px rgba(68,189,161,.15);
    }
    #lumCxSec .lum-cx-submit {
      width: 100%;
      padding: 15px 24px;
      border: none;
      border-radius: 999px;
      background: var(--lum-gold);
      color: #fff;
      font-family: inherit;
      font-size: 15px;
      font-weight: var(--fw-semibold);
      line-height: 1;
      cursor: pointer;
      transition: background .25s ease, transform .25s ease;
    }
    #lumCxSec .lum-cx-submit:hover { background: var(--lum-gold-dark); transform: translateY(-1px); }
    #lumCxSec .lum-cx-submit:disabled { opacity: .6; cursor: default; transform: none; }
    #lumCxSec .lum-cx-note {
      margin: 14px 0 0;
      text-align: center;
      font-size: var(--text-xs);
      color: var(--lum-sub);
    }
    #lumCxSec .lum-cx-status {
      display: none;
      margin-top: 12px;
      text-align: center;
      font-size: 13.5px;
      font-weight: var(--fw-semibold);
    }
    #lumCxSec .lum-cx-status.is-shown { display: block; }
    #lumCxSec .lum-cx-status.is-success { color: var(--lum-gold-dark); }
    #lumCxSec .lum-cx-status.is-error { color: #d9534f; }

    /* ---------------- RESPONSIVE ---------------- */
    @media (max-width: 1100px) {
      #lumCxSec .lum-cx-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #lumCxSec .lum-cx-bottom { grid-template-columns: minmax(0, 1fr); }
    }
    @media (max-width: 700px) {
      #lumCxSec .lum-cx-channels,
      #lumCxSec .lum-cx-info { grid-template-columns: minmax(0, 1fr); gap: 16px; }
      #lumCxSec .lum-cx-row { grid-template-columns: minmax(0, 1fr); }
      #lumCxSec .lum-cx-card { padding: 22px 20px 24px; }
    }