/* ============================================================
   LWV SITE HEADER + TEXT-SIZE WIDGET
   ============================================================
   Version: 2026.05.27.14
   - v14 fix vs v13:
     * :nth-of-type counts ALL <div> siblings, not just ones
       with the .lwv-brand-subtitle class. The brand block is:
         [1] div.lwv-brand-title
         [2] div.lwv-brand-subtitle  ← "Resales, Leases & Transfers"
         [3] div.lwv-brand-subtitle  ← "Powered by Microsoft"
       So we target nth-of-type(2) and nth-of-type(3) directly.
   ============================================================ */

/* ============================================================
   BRAND ROW — logo + title block side-by-side
   Logo size is set INLINE on the <img> tag (Microsoft pattern).
   That keeps the navbar from over-inflating. To resize the logo,
   edit the `height` value in the Mobile Header content snippet.
   ============================================================ */
.lwv-brand-row {
  display: flex;
  align-items: center;
  text-decoration: none !important;
  color: inherit !important;
}
.lwv-brand-row:hover { text-decoration: none !important; }

/* ============================================================
   BRAND TITLE + SUBTITLE
   ============================================================ */
.lwv-brand {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.lwv-brand-title {
  font-size: 26px;
  font-weight: 700;
  color: #1a1f2e;
  line-height: 1.1;
}
.lwv-brand-subtitle {
  font-size: 13px;
  color: #8a5210;
  font-style: italic;
  margin-top: 4px;
  letter-spacing: 0.01em;
}

/* ============================================================
   TEXT-SIZE WIDGET - magnifier icon variant
   ============================================================ */
.lwv-textsize-nav-item {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
}

.lwv-textsize {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  background: white;
  border: 1px solid #BA7517;
  border-radius: 8px;
  padding: 3px;
  font-family: inherit;
  line-height: 1;
  vertical-align: middle;
}

.lwv-textsize-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 26px;
  color: #BA7517;
  flex-shrink: 0;
}
.lwv-textsize-icon svg { display: block; }

.lwv-textsize-btn {
  min-width: 30px;
  height: 26px;
  border: none;
  background: transparent;
  border-radius: 5px;
  font-weight: 700;
  color: #5a6473;
  cursor: pointer;
  line-height: 1;
  font-family: inherit;
  padding: 0 6px;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.lwv-textsize-btn[data-zoom="1"]    { font-size: 12px; }
.lwv-textsize-btn[data-zoom="1.25"] { font-size: 14px; }
.lwv-textsize-btn[data-zoom="1.5"]  { font-size: 16px; }

.lwv-textsize-btn:hover:not(.is-active) {
  background: #f0f2f5;
  color: #1a1f2e;
}

.lwv-textsize-btn.is-active {
  background: #BA7517;
  color: white;
}

.lwv-textsize-btn:focus-visible {
  outline: 2px solid #BA7517;
  outline-offset: 1px;
}

/* ============================================================
   ZOOM RULE - applies to page content, NOT the navbar
   ============================================================ */
html[data-lwv-zoom="1.25"] .page-copy,
html[data-lwv-zoom="1.25"] main,
html[data-lwv-zoom="1.25"] #mainContent { zoom: 1.25; }

html[data-lwv-zoom="1.5"] .page-copy,
html[data-lwv-zoom="1.5"] main,
html[data-lwv-zoom="1.5"] #mainContent { zoom: 1.5; }

/* ============================================================
   RESPONSIVE — MOBILE (≤768px)
   ============================================================
   v13: Subtitle visible (Resales, Leases & Transfers) but
   "Powered by Microsoft" caption (second subtitle) hidden.
   Targets via nth-of-type so the inline style on the second
   subtitle doesn't matter.
   ============================================================ */
@media (max-width: 768px) {
  /* Brand title — keep prominent, but slightly tighter */
  .lwv-brand-title {
    font-size: 20px;
    line-height: 1.15;
  }
  /* First subtitle "Resales, Leases & Transfers" is the 2nd div
     in .lwv-brand. Show it on mobile. */
  .lwv-brand > div:nth-of-type(2).lwv-brand-subtitle {
    display: block !important;
    font-size: 12px !important;
    margin-top: 2px !important;
    line-height: 1.2 !important;
  }
  /* Second subtitle "Powered by Microsoft" is the 3rd div.
     Keep it hidden on mobile. */
  .lwv-brand > div:nth-of-type(3).lwv-brand-subtitle {
    display: none !important;
  }
  /* Logo override — shrink from inline 64px to a sensible
     mobile size so it doesn't dwarf the title block */
  .lwv-brand-row img {
    height: 44px !important;
    margin-right: 12px !important;
  }
  /* Text-size widget scale-down */
  .lwv-textsize-icon { width: 24px; height: 24px; }
  .lwv-textsize-btn { min-width: 28px; height: 24px; }
}

/* ============================================================
   WELCOME BANNER SPACING (all viewports)
   ============================================================
   The actual element ID is #s365-scope-banner. It ships with
   margin-top: -16px (pulling it up under the header) and
   padding-top: 18px. We override both with positive spacing.
   ============================================================ */
#s365-scope-banner {
  margin-top: 18px !important;
  padding-top: 16px !important;
}
@media (max-width: 768px) {
  #s365-scope-banner {
    margin-top: 24px !important;
    padding-top: 16px !important;
  }
}

/* ============================================================
   PRINT - hide widget, reset zoom
   ============================================================ */
@media print {
  .lwv-textsize-nav-item { display: none !important; }
  html[data-lwv-zoom] .page-copy,
  html[data-lwv-zoom] main,
  html[data-lwv-zoom] #mainContent { zoom: 1 !important; }
}