/* ===========================================================================
   Arborstone unit-size pages — /5x5-storage/ … /13x30-storage/ (10 pages)
   ---------------------------------------------------------------------------
   Every geometry value here was read off LIVE /10x20-storage/ on 2026-09-16 at a
   VERIFIED clientWidth of 1265, element by element. Assert clientWidth before
   trusting any capture: a collapsed browser pane reports 0 and resolves every
   media query at the smallest breakpoint, which returns the MOBILE type scale
   (h1 49px, h3 19px) dressed up as desktop.

   WHY THIS SHEET EXISTS AT ALL, when a parity sheet was already written on
   2026-09-15 (arborstone-size-pages.php.parked-20260915) and rejected:
   that sheet measured the SECTION grounds and the type scale correctly but never
   captured the card treatment, because the card treatment does not live on the
   section -- it lives on Divi's .et_pb_row (the translucent grey panel) and
   .et_pb_text (the white card). `grep -c border-radius` on the parked sheet
   returns 1, and that one is the button. So the page rendered as an unbroken wall
   of text on white. The panels and cards below are the whole difference.

   THREE DELIBERATE DEVIATIONS FROM LIVE, each flagged rather than smuggled in:
   1. Navy is brand #003A60 (Pantone 2965C), not Divi's #0E3255. #0E3255 is a
      recorded invented value, and once these pages sit under the shell's #003A60
      header a second near-navy directly beneath it reads as a mistake.
   2. The "Rent Your Unit" CTA is white-on-navy, not Divi's #787878 grey-on-navy.
      It is the page's only conversion action and grey on navy barely registers.
      This is the .btn-invert treatment already shipped on the corporate pages.
   3. The decorative photo band serves the sized variants WordPress already has
      instead of the 915 KB original.
   The three STATE buttons keep Divi's #787878 grey: that exact treatment shipped
   on /find-a-unit/ on 2026-09-16 and is what the family already looks like.
   =========================================================================== */

#arbor-sz {
  --sz-navy:      var(--navy, #003A60);
  --sz-navy-deep: #002B47;
  --sz-ink:       #0E3255;          /* heading ink -- kept: it is TEXT, not chrome */
  --sz-panel:     rgba(120, 120, 120, .24);
  --sz-grey:      #787878;
  --sz-font:      var(--font-sans, 'Montserrat', Helvetica, Arial, sans-serif);
  font-family: var(--sz-font);
}

/* Divi supplied img{max-width:100%}; a Divi-free template must restate it. The
   parked pilot did not, and the 810x456 card image forced scrollWidth to 828 at a
   375px viewport -- 453px of sideways scroll. */
#arbor-sz img { max-width: 100%; height: auto; }

/* Divi's element reset zeroes margin on every text node. Without it the browser's
   own p{margin:1em 0} comes back and containers grow ~16px with byte-identical
   children -- and getBoundingClientRect() does not show margins, so the cause sits
   nowhere near the symptom. Learned on /storage-locations/. */
#arbor-sz :where(p, ul, ol, li, h1, h2, h3, h4, h5, h6, figure, blockquote) { margin: 0; }
#arbor-sz :where(ul, ol) { padding: 0; list-style: none; }

.sz-in { width: 91%; max-width: 1317px; margin: 0 auto; }

/* --- hero ----------------------------------------------------------------- */
.sz-hero { background-color: #fff; background-image: var(--sz-hero);
           background-size: cover; background-position: 50% 50%;
           background-repeat: no-repeat; padding: 24px 0 23px; min-height: 295px;
           display: flex; align-items: center; }
.sz-hero h1 { font-size: 54px; line-height: 70.2px; font-weight: 700;
              color: var(--sz-ink); text-align: left; padding: 0 0 10px; }

/* --- state buttons -------------------------------------------------------- */
.sz-states { background: var(--sz-navy); padding: 18px 0 24px; }
.sz-states-lead { font-size: 28px; line-height: 27.2px; font-weight: 600;
                  color: #fff; text-align: center; padding: 0 0 18px; }
.sz-states-btns { display: grid; grid-template-columns: repeat(3, 1fr);
                  gap: 56px; justify-items: center; }
.sz-btn { display: inline-block; background: var(--sz-grey); color: #fff;
          font-family: var(--sz-font); font-size: 20px; line-height: 34px;
          font-weight: 500; padding: 6px 20px; border-radius: 8px;
          min-width: 190px; text-align: center; text-decoration: none;
          transition: background .15s ease; }
.sz-btn:hover, .sz-btn:focus-visible { background: #5f5f5f; color: #fff; }

/* "Properties that have <size> Storage Units" -- only /13x30-storage/ has one
   today. Same component as the state buttons; the count class keeps the row from
   stretching three buttons across a 5-wide track if another page gains one. */
.sz-props { padding-top: 24px; }
.sz-states-btns-1 { grid-template-columns: minmax(0, 320px); justify-content: center; }
.sz-states-btns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sz-states-btns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.sz-states-btns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }

/* --- intro ---------------------------------------------------------------- */
.sz-intro { background: #fff; padding: 13px 0 0; }
.sz-intro-grid { display: grid; grid-template-columns: 342px minmax(0, 1fr);
                 gap: 48px; align-items: center; }
.sz-intro-fig { margin: 0; }
.sz-intro-fig img { display: block; width: 100%; }
/* ⚠️ These two blocks are <h3> in post_content -- body copy marked up as
   headings. Pre-existing on all 10 pages. Heading LEVELS are never changed on
   this site (a documented hard rule), so they stay h3 and are styled as lead
   copy, exactly as Divi renders them today. */
.sz-intro-copy h3 { font-size: 23px; line-height: 27.6px; font-weight: 700;
                    color: var(--sz-ink); text-align: center; padding: 0 0 10px; }

/* --- Q&A panels ----------------------------------------------------------- */
.sz-qa { background: #fff; padding: 18px 0 32px; }
.sz-panel { background: var(--sz-panel); border-radius: 20px;
            max-width: 1466px; padding: 25.3px 50px; margin: 18px auto 0; }
.sz-panel-head { padding: 13px 20px 20px; margin: 0 0 31.33px; }
.sz-panel-head h2 { font-size: 28px; line-height: 28px; font-weight: 700;
                    color: var(--sz-ink); text-align: center; padding: 0 0 10px; }
.sz-panel-head p { text-align: center; }
.sz-card { background: #fff; border-radius: 20px; padding: 20px 30px;
           margin: 0 0 31.33px; }
.sz-card:last-child { margin-bottom: 0; }
.sz-card h2 { font-size: 19px; line-height: 19px; font-weight: 700;
              color: var(--sz-ink); text-align: left; padding: 0 0 10px; }
#arbor-sz .sz-card p, #arbor-sz .sz-panel-head p {
  font-size: 16px; line-height: 27.2px; font-weight: 500; color: #000;
  padding: 0 0 16px; }
#arbor-sz .sz-card p:last-child, #arbor-sz .sz-panel-head p:last-child { padding-bottom: 0; }
#arbor-sz .sz-card a { color: var(--sz-navy); text-decoration: underline; }
#arbor-sz .sz-card a:hover { text-decoration: none; }

/* Output of [arbor_size_locations] / [arbor_size_reviews] / [arbor_size_price].
   Styled, never re-rendered -- these are live data from the feed. */
#arbor-sz .arbor-size-locations, #arbor-sz .arbor-size-reviews { margin: 14px 0; }
#arbor-sz .arbor-size-locations p, #arbor-sz .arbor-size-reviews p { padding-bottom: 12px; }

/* --- Find … Near You ------------------------------------------------------ */
.sz-near { background: #fff; padding: 30px 0; }
.sz-near h2 { font-size: 30px; line-height: 30px; font-weight: 500;
              color: var(--sz-navy); text-align: left; padding: 0 0 10px; }
#arbor-sz .sz-near p { font-size: 16px; line-height: 27.2px; font-weight: 500;
                       color: #000; padding: 0 0 16px; }
#arbor-sz .sz-near a { color: var(--sz-navy); text-decoration: underline; }

/* --- Other Storage Unit Sizes --------------------------------------------- */
.sz-sizes, .sz-res { background: #fff; padding: 0 0 2px; }
.sz-sech { font-size: 28px; line-height: 28px; font-weight: 700;
           color: var(--sz-ink); text-align: center; padding: 0 0 10px; }
.sz-sizegrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
               gap: 20px; padding: 18px 0 24px; }
.sz-sizecard { text-align: center; }
/* The four source images have different intrinsic heights (168 / 310 / 456 / 336),
   so laying them out naturally staggers the four headings. A fixed box with
   object-fit:contain lines them up without cropping or distorting anything. */
.sz-sizecard-fig { height: 210px; display: flex; align-items: flex-end;
                   justify-content: center; margin: 0 0 12px; }
.sz-sizecard img { display: block; max-height: 100%; width: auto;
                   object-fit: contain; }
.sz-sizecard h2 { font-size: 24px; line-height: 24px; font-weight: 700;
                  color: var(--sz-ink); text-align: center; padding: 0 0 10px; }
#arbor-sz .sz-sizelinks li { padding: 4px 0; }
#arbor-sz .sz-sizelinks a { color: var(--sz-navy); font-size: 16px;
                            line-height: 27.2px; font-weight: 500;
                            text-decoration: none; }
#arbor-sz .sz-sizelinks a:hover { text-decoration: underline; }

/* --- decorative photo band ------------------------------------------------ */
/* Live serves the 915 KB ORIGINAL slide3.png behind an EMPTY 408px strip. The
   sized variants WordPress already generated are used instead: 1536 (590 KB) only
   above 1280, 1280 (424 KB) by default, 768 (166 KB) on tablet, 480 (72 KB) on
   phones. Same picture, up to 92% less on a phone. */
.sz-band { height: 408px; background-repeat: no-repeat; background-size: cover;
           background-position: 50% 50%;
           background-image: url('/wp-content/uploads/2025/01/slide3-1280x408.png'); }
@media (min-width: 1281px) {
  .sz-band { background-image: url('/wp-content/uploads/2025/01/slide3-1536x490.png'); }
}
@media (max-width: 980px) {
  .sz-band { height: 280px;
             background-image: url('/wp-content/uploads/2025/01/slide3-768x245.png'); }
}
@media (max-width: 600px) {
  .sz-band { height: 190px;
             background-image: url('/wp-content/uploads/2025/01/slide3-480x153.png'); }
}

/* --- rent CTA ------------------------------------------------------------- */
.sz-cta { background: var(--sz-navy); padding: 18px 0; }
.sz-cta .sz-in { display: flex; align-items: center; justify-content: center;
                 gap: 32px; flex-wrap: wrap; }
.sz-cta-lead { font-size: 20px; line-height: 34px; font-weight: 700;
               color: #fff; text-align: center; }
/* DEVIATION 2 — see the header. White on navy, not Divi's grey on navy. */
.sz-btn-solid { background: #fff; color: var(--sz-navy); border-radius: 3px;
                font-weight: 700; min-width: 0; }
#arbor-sz a.sz-btn.sz-btn-solid,
#arbor-sz a.sz-btn.sz-btn-solid:hover,
#arbor-sz a.sz-btn.sz-btn-solid:focus-visible { background: #fff; color: var(--sz-navy); }
#arbor-sz a.sz-btn.sz-btn-solid:hover { text-decoration: underline; }

/* --- Explore Other Resources ---------------------------------------------- */
.sz-resgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
              gap: 20px; padding: 18px 0 24px; }
/* DEVIATION 4 -- Divi sets these links to #fff via an inline span, on a panel
   that is only 24% grey over white. Measured on live: white on rgb(226,226,226),
   a contrast ratio of about 1.2:1, which fails WCAG AA (4.5:1) by a wide margin
   and is why the three cards read as empty grey boxes in a screenshot. Navy on
   the same panel is ~9:1. The inline span is dropped by the extractor, so the
   colour is set here. */
#arbor-sz .sz-resgrid li { background: var(--sz-panel); border-radius: 20px;
                           min-height: 152px; display: flex; align-items: center;
                           justify-content: center; text-align: center;
                           padding: 24px 20px;
                           transition: background .15s ease; }
#arbor-sz .sz-resgrid li:hover { background: rgba(120, 120, 120, .34); }
#arbor-sz .sz-resgrid a { color: var(--sz-navy); font-size: 18px; line-height: 26px;
                          font-weight: 700; text-decoration: none; display: block; }
#arbor-sz .sz-resgrid a:hover { text-decoration: underline; }

/* --- location directories + base footer (Divi globals 170 / 220 / 70) ------ */
/* Divi globals 170 (Oklahoma) and 220 (Texas + Arkansas). The two sections do NOT
   share a column count: Oklahoma is one full-width heading over 4 columns, while
   Texas/Arkansas is a 2-column heading row over a 5-column content row, split 3
   Texas / 2 Arkansas. Rendering both as a 4-column grid drops the Arkansas heading
   into the middle of the Texas links. */
.sz-dir { background: var(--sz-navy); padding: 24px 0 9px; }
.sz-dir-ok { padding-top: 32px; }
.sz-dirhead { text-align: center; padding: 0 0 14px; }
#arbor-sz .sz-dirhead, #arbor-sz .sz-dirhead a { color: #fff; font-size: 20px;
                       line-height: 28px; font-weight: 700; }
.sz-dirheads-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                 gap: 20px; }
#arbor-sz .sz-dircol li { color: #fff; font-size: 15px; line-height: 24px;
                          padding: 0 0 6px; }
#arbor-sz .sz-dir a { color: #fff; text-decoration: none; }
#arbor-sz .sz-dir a:hover { text-decoration: underline; }
.sz-dirgrid { display: grid; gap: 20px; padding: 18px 0; }
.sz-dirgrid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sz-dirgrid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Divi global 70. Rebuilt from live 2026-09-16 rather than reused from the
   corporate family: that copy is a 2-column logo|text grid carrying an OLDER
   revision of the sentence ("state-of-the-art facility is" vs live's "facilities
   are") and it DROPS the Main Office address and the tel: link entirely. Live is
   a single centred column, stacked: paragraph, logo, address, phone. */
.sz-basefoot { background: var(--sz-navy); padding: 24px 0 32px; text-align: center; }
#arbor-sz .sz-basefoot p { color: #fff; font-size: 16px; line-height: 27.2px;
                           padding: 0 0 12px; }
#arbor-sz .sz-basefoot p:last-child { padding-bottom: 0; }
#arbor-sz .sz-basefoot a { color: #fff; text-decoration: none; }
#arbor-sz .sz-basefoot a:hover { text-decoration: underline; }
.sz-footlogo img { display: block; margin: 8px auto 12px; max-width: 405px; }

/* --- responsive ----------------------------------------------------------- */
/* Every desktop value above that is a grid or a type size has a twin here. A
   per-page modifier without a mobile twin is what made /acquisitions/ render
   386px wide at a 375px viewport. */
@media (max-width: 1100px) {
  .sz-sizegrid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sz-dirgrid-4,
  .sz-dirgrid-5  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .sz-hero { min-height: 220px; }
  .sz-hero h1 { font-size: 40px; line-height: 50px; }
  .sz-states-btns, .sz-states-btns-1, .sz-states-btns-2,
  .sz-states-btns-4, .sz-states-btns-5 { grid-template-columns: 1fr; gap: 14px; }
  .sz-intro-grid { grid-template-columns: 1fr; gap: 24px; }
  .sz-intro-fig { max-width: 342px; margin: 0 auto; }
  .sz-intro-copy h3 { font-size: 19px; line-height: 24.7px; }
  .sz-panel { padding: 20px 18px; border-radius: 16px; }
  .sz-panel-head { padding: 8px 0 12px; margin-bottom: 20px; }
  .sz-card { padding: 18px 20px; margin-bottom: 20px; border-radius: 16px; }
  .sz-resgrid { grid-template-columns: 1fr; }
  .sz-cta .sz-in { gap: 18px; }
  .sz-dirgrid-4, .sz-dirgrid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .sz-hero h1 { font-size: 32px; line-height: 40px; }
  .sz-states-lead, .sz-sech { font-size: 24px; line-height: 28px; }
  .sz-sizegrid, .sz-dirgrid-4, .sz-dirgrid-5,
  .sz-dirheads-2 { grid-template-columns: 1fr; }
  .sz-sizecard-fig { height: 170px; }
  .sz-near h2 { font-size: 24px; line-height: 28px; }
}