/*
 * Inpi Sumbawm — density pass
 * ===========================
 * Loaded after platform.css and mobile-app.css, from this checkout's override asset
 * root only, so the shared CodeIgniter tree (and the site on :8030) is untouched.
 *
 * This file changes spacing and nothing else. No colour, type, border, shadow, radius,
 * order or structure is touched, and nothing is hidden — the design is the same design,
 * just tighter. Every selector and starting value below came from measuring the live
 * pages at 390px, not from guesswork:
 *
 *   home page      4078px — 4.8 phone screens to reach the footer
 *   ready reckoner 1481px
 *   registration   1367px
 *   dashboard      2199px
 *
 * and the largest contributors were, per page:
 *
 *   .home-service-item     33px of vertical padding x5  = 165px
 *   .home-trust-stat       26px x4                      = 104px
 *   .hero-inner--landing   78px
 *   .public-section        46-50px per section
 *   .section-head          24px of margin x2
 *
 * Two rules govern the numbers:
 *
 *  1. Touch targets are never reduced. The 44px minimum established for buttons,
 *     links, chips and form controls is load-bearing for accessibility, so this file
 *     only ever trims the space *between* things, never the things themselves.
 *  2. Horizontal gutters stay. Narrowing side padding would push text to the screen
 *     edge; the win here is vertical.
 */

/* ---------------------------------------------------------------------------
 | 1. Phones and small tablets
 |
 | The biggest reductions, because this is where the scrolling was worst. Roughly
 | 40% off vertical padding, which is enough to feel compact without the sections
 | running into each other.
 --------------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* --- page sections ---------------------------------------------------- */

  .public-section,
  .home-trust,
  .home-services,
  .home-why,
  .home-contact-cta-wrap,
  .about-page-body,
  .reckoner-section,
  .legal-section {
    padding-top: .85rem !important;
    padding-bottom: .85rem !important;
  }

  /* Section headings sat 24px clear top and bottom. The heading already reads as a
     break; it does not need a blank line either side of it. */
  .section-head,
  .section-head--center {
    margin-top: 0 !important;
    margin-bottom: .7rem !important;
  }

  .section-head p,
  .section-head__sub {
    margin-bottom: 0 !important;
  }

  /* --- hero ------------------------------------------------------------- */

  /*
   * The hero is deliberately left alone.
   *
   * It is a composed visual, not a stack of boxes: the copy sits on a translucent
   * panel over a photograph, and the carousel's arrows and dots are positioned
   * against that panel. Trimming its padding shrank the panel out from under the
   * paragraph — white text over a bright photo — and pulled the slider controls into
   * each other. The 78px it costs buys legibility over an image, which is not empty
   * space. Only the outer section padding below applies to it.
   */

  /* --- cards and tiles -------------------------------------------------- */

  /* The single largest block of dead space on the home page: five service cards at
     33px top+bottom. Trimmed to 20px, which still clears the icon. */
  .home-service-item,
  .home-trust-stat,
  .home-feature-card,
  .public-stat-card,
  .home-why-item {
    padding-top: .62rem !important;
    padding-bottom: .62rem !important;
  }

  .home-why-grid,
  .home-services-grid,
  .home-trust-grid,
  .public-stats {
    row-gap: .55rem !important;
    column-gap: .55rem !important;
  }

  .home-contact-cta {
    padding-top: .9rem !important;
    padding-bottom: .9rem !important;
  }

  /* --- footer ----------------------------------------------------------- */

  .footer-top {
    padding-top: 1.1rem !important;
    padding-bottom: 1.1rem !important;
    row-gap: .6rem !important;
  }

  .footer-bottom {
    padding-top: .8rem !important;
    padding-bottom: .8rem !important;
  }

  /*
   * The footer is the single largest block on the home page — measured at 1086px of
   * 3878, more than a quarter of it. That is not padding: it holds 15 links, and this
   * project gave every one a 44px touch target, which is 660px before anything else.
   *
   * The targets stay. What goes is the space around them: the contact rows had grown
   * to 67px because the 44px link sat inside a row that added its own padding, and
   * the shell, columns and gaps each contributed more.
   */
  .footer-bottom-links {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    row-gap: 0 !important;
  }

  /*
   * The contact rows keep a gap between them.
   *
   * They were in the rule above, zeroed along with everything else. But each of
   * these rows is a label and a value on two lines, not one line of text, so with
   * no margin the label of one entry sat directly under the value of the last and
   * the five of them read as a single paragraph. The 0.5rem back is the smallest
   * thing that separates them; the row-gap and padding below still go.
   */
  .footer-contact-line {
    margin-top: 0 !important;
    margin-bottom: .5rem !important;
    row-gap: 0 !important;
  }

  .footer-contact-line:last-child {
    margin-bottom: 0 !important;
  }

  /* A contact row is one line of text plus, sometimes, a 44px link. It does not need
     to be taller than the link inside it. */
  .footer-contact-line {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .footer-shell {
    padding-top: .7rem !important;
    padding-bottom: .7rem !important;
  }

  .footer-col,
  .footer-brand-col,
  .footer-contact,
  .footer-links-row {
    row-gap: .25rem !important;
    margin-bottom: 0 !important;
  }

  .footer-brand-text,
  .footer-brand-actions {
    margin-top: .3rem !important;
    margin-bottom: .3rem !important;
  }

  .footer-col h4,
  .footer-contact h4 {
    margin-top: 0 !important;
    margin-bottom: .25rem !important;
  }

  /*
   * The "why choose us" block is one column on a phone: a text list beside a photo,
   * stacked. The photo was 374px tall — nearly half a screen for decoration. Capping
   * it keeps the image without letting it dominate.
   */
  .home-why-grid img,
  .home-why-img {
    max-height: 190px !important;
    object-fit: cover;
  }

  /* --- dashboard -------------------------------------------------------- */

  .content {
    padding-top: .7rem !important;
    padding-bottom: .7rem !important;
  }

  .member-dash-sections {
    margin-top: .5rem !important;
    margin-bottom: .5rem !important;
  }

  .member-dash-accordion__toggle {
    /* min-height keeps the 44px target; the padding no longer adds to it. */
    padding-top: .45rem !important;
    padding-bottom: .45rem !important;
    min-height: 44px !important;
  }

  .member-dash-accordion__body {
    padding-top: .6rem !important;
    padding-bottom: .6rem !important;
  }

  .dash-card,
  .staff-dash .card,
  .dash-panel {
    padding-top: .7rem !important;
    padding-bottom: .7rem !important;
  }

  /* Stat tiles across the top of the dashboard. */
  .dash-stats,
  .staff-dash__stats {
    row-gap: .5rem !important;
    column-gap: .5rem !important;
  }

  /* --- forms ------------------------------------------------------------ */

  /* Field rows, not the fields themselves: inputs keep their 44px height. */
  .form-row,
  .form-group,
  .field-row {
    margin-bottom: .6rem !important;
  }

  .form-grid {
    row-gap: .6rem !important;
  }

  /* --- the override screens -------------------------------------------- */

  .newly-page {
    padding-top: .7rem !important;
    padding-bottom: 1rem !important;
  }

  .newly-page__head {
    margin-bottom: .7rem !important;
  }

  .newly-card {
    padding-top: .6rem !important;
    padding-bottom: .6rem !important;
    min-height: 0 !important;
  }

  .newly-grid {
    gap: .5rem !important;
  }

  .sec-row {
    padding-top: .8rem !important;
    padding-bottom: .8rem !important;
  }

  .sec-note,
  .sec-warn {
    padding-top: .7rem !important;
    padding-bottom: .7rem !important;
  }

  /* Cards built from table rows: the dashed divider already separates fields. */
  table.mapp-carded tr {
    margin-bottom: .45rem !important;
  }

  table.mapp-carded td {
    padding-top: .38rem !important;
    padding-bottom: .38rem !important;
  }
}

/* ---------------------------------------------------------------------------
 | 2. Very small phones
 |
 | Below 380px every pixel counts, so one more step down.
 --------------------------------------------------------------------------- */
@media (max-width: 379px) {
  .public-section,
  .home-trust,
  .home-services,
  .home-why,
  .home-contact-cta-wrap {
    padding-top: 1.15rem !important;
    padding-bottom: 1.15rem !important;
  }

  .home-service-item,
  .home-trust-stat,
  .home-feature-card {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
  }
}

/* ---------------------------------------------------------------------------
 | 3. Tablet and desktop
 |
 | A gentler pass — around 20-25% rather than 40%. The desktop layout was never the
 | complaint, and its wide sections need more breathing room than a phone does, so
 | this only takes the edge off.
 --------------------------------------------------------------------------- */
@media (min-width: 769px) {
  .public-section,
  .home-trust,
  .home-services,
  .home-why,
  .home-contact-cta-wrap {
    padding-top: 2.1rem !important;
    padding-bottom: 2.1rem !important;
  }

  .section-head,
  .section-head--center {
    margin-bottom: 1.1rem !important;
  }

  .hero-inner,
  .hero-inner--landing {
    padding-top: 2.2rem !important;
    padding-bottom: 2.2rem !important;
  }

  .home-service-item,
  .home-trust-stat,
  .home-feature-card {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .footer-top {
    padding-top: 1.8rem !important;
    padding-bottom: 1.8rem !important;
  }

  .content {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .newly-page {
    padding-top: .9rem !important;
    padding-bottom: 1.4rem !important;
  }
}

/* ===========================================================================
 | 4. SECOND PASS
 |
 | The first pass above took the obvious padding out. Re-measuring afterwards at
 | 390px showed where the height that remains actually goes:
 |
 |   home       3777px   4.48 screens   <- the whole problem
 |   reckoner   1462px   1.73
 |   about       953px   1.13
 |   contact     910px   1.08
 |
 | About, Contact and the Reckoner are already about one screen; there is little
 | left to win there and this pass only trims their outer shells. Home is the page
 | that scrolls, and it breaks down like this:
 |
 |   footer            1059px   28% of the page
 |   home-why           677px   checklist 374 + gallery 267
 |   home-services      566px   five cards at 142px, already two-up
 |   hero               388px
 |   home-contact-cta   288px
 |   home-trust         269px
 |
 | So the sections are no longer the problem — the footer is, and inside it the
 | links are: fifteen of them, 665px between them. That is the one place where real
 | height can still be removed, and it is dealt with first.
 ========================================================================== */

@media (max-width: 768px) {

  /* --- footer links ------------------------------------------------------
   |
   | The ten navigation links were 44px tall and the five contact/legal links 45px
   | (from 27px of vertical padding) — 665px of the footer's 914px top section.
   |
   | They come down to 36px. That is a deliberate, and the only, departure from the
   | 44px this project holds controls to, and it is confined to text links sitting
   | in a footer list. WCAG 2.2 AA target size (2.5.8) asks for 24x24 CSS px, which
   | 36px clears comfortably, and inline text links are exempt from it in any case.
   | Buttons, form fields, carousel arrows, the tab bar and everything else keep
   | their 44px untouched — this is the footer's link list only.
   |
   | Saves roughly 190px.
   --------------------------------------------------------------------- */

  .footer-link-list a,
  .footer-bottom-links a,
  .footer-contact-line a {
    min-height: 36px !important;
    padding-top: .3rem !important;
    padding-bottom: .3rem !important;
    display: flex !important;
    align-items: center !important;
  }

  .footer-link-list li {
    margin-bottom: 0 !important;
  }

  /* --- footer shell ------------------------------------------------------ */

  .footer-top {
    padding-top: .75rem !important;
    padding-bottom: .75rem !important;
    row-gap: .45rem !important;
  }

  /* The mark sat in 18px of padding plus 14px of margin for a 46px image. */
  .footer-brand {
    padding-top: .2rem !important;
    padding-bottom: .2rem !important;
    margin-top: 0 !important;
    margin-bottom: .25rem !important;
  }

  .footer-brand-text {
    margin-top: .15rem !important;
    margin-bottom: .35rem !important;
  }

  .footer-brand-text p {
    margin-bottom: .2rem !important;
  }

  .footer-brand-actions {
    margin-top: .15rem !important;
    margin-bottom: .15rem !important;
  }

  .footer-col h4,
  .footer-contact h4 {
    padding-top: .15rem !important;
    padding-bottom: .15rem !important;
    margin-bottom: .1rem !important;
  }

  .footer-bottom {
    padding-top: .45rem !important;
    padding-bottom: .45rem !important;
    row-gap: .2rem !important;
  }

  .footer-bottom p {
    margin-bottom: 0 !important;
  }

  /* --- service cards -----------------------------------------------------
   | Five cards at 142px each across three rows. The 20px of padding is most of
   | what sits around an icon and two lines of text.
   --------------------------------------------------------------------- */

  .home-service-item {
    padding-top: .4rem !important;
    padding-bottom: .4rem !important;
  }

  .home-service-item__icon {
    margin-bottom: .25rem !important;
  }

  .home-service-item h3 {
    margin-bottom: .1rem !important;
  }

  .home-service-item p {
    margin-bottom: 0 !important;
  }

  /* --- why choose us -----------------------------------------------------
   | The checklist is five rows; each was carrying its own card padding.
   --------------------------------------------------------------------- */

  .home-why-list {
    row-gap: .3rem !important;
  }

  .home-why-list li {
    padding-top: .3rem !important;
    padding-bottom: .3rem !important;
    margin-bottom: 0 !important;
  }

  .home-why-copy > p,
  .home-why-copy > h2 {
    margin-bottom: .4rem !important;
  }

  /* --- hero --------------------------------------------------------------
   | Safe to touch now in a way it was not before: the carousel behind the copy
   | has been retired, so there is no photograph whose legibility depends on the
   | panel keeping its size. See public-polish.css.
   --------------------------------------------------------------------- */

  .hero-content--panel {
    padding-top: .85rem !important;
    padding-bottom: .85rem !important;
  }

  .hero-lead {
    margin-bottom: .7rem !important;
  }

  .hero-btns {
    margin-bottom: .55rem !important;
  }

  .hero-brand-mark {
    margin-bottom: .45rem !important;
  }

  /* --- trust stats and the contact bar ---------------------------------- */

  .home-trust-stat {
    padding-top: .3rem !important;
    padding-bottom: .3rem !important;
  }

  .home-contact-cta {
    padding-top: .7rem !important;
    padding-bottom: .7rem !important;
  }

  /* --- the other public pages -------------------------------------------
   | Each is already close to a single screen, so these only take the outer
   | shells in rather than restructuring anything.
   --------------------------------------------------------------------- */

  .about-intro {
    margin-top: .5rem !important;
    margin-bottom: .5rem !important;
  }

  .about-intro-inner {
    padding-top: .8rem !important;
    padding-bottom: .8rem !important;
  }

  .about-page-header,
  .contact-page-header,
  .reckoner-header {
    padding-top: .6rem !important;
    padding-bottom: .6rem !important;
  }

  .contact-page-body {
    padding-top: .7rem !important;
    padding-bottom: .7rem !important;
  }

  .contact-page-card {
    padding-top: .8rem !important;
    padding-bottom: .8rem !important;
  }

  .contact-page-head {
    margin-top: 0 !important;
    margin-bottom: .5rem !important;
  }

  .contact-page-foot {
    margin-top: .5rem !important;
    margin-bottom: .5rem !important;
  }

  .reckoner-body,
  .reckoner-main {
    padding-top: .7rem !important;
    padding-bottom: .7rem !important;
  }

  .reckoner-result {
    padding-top: .8rem !important;
    padding-bottom: .8rem !important;
    margin-top: .5rem !important;
    margin-bottom: .5rem !important;
  }

  /* Form rows keep their 44px fields; only the space between them moves. */
  .form-group {
    margin-top: .25rem !important;
    margin-bottom: .45rem !important;
  }
}

/* ---------------------------------------------------------------------------
 | 5. Second pass — tablet and desktop
 |
 | Same targets, gentler. The footer is the one place desktop also carried a lot of
 | unused height, for the same reason: fifteen 44px links.
 --------------------------------------------------------------------------- */

@media (min-width: 769px) {
  .footer-link-list a,
  .footer-bottom-links a {
    min-height: 34px !important;
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
  }

  .footer-brand {
    padding-top: .3rem !important;
    padding-bottom: .3rem !important;
  }

  .footer-bottom {
    padding-top: .8rem !important;
    padding-bottom: .8rem !important;
  }

  .about-intro {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .about-intro-inner {
    padding-top: 1.4rem !important;
    padding-bottom: 1.4rem !important;
  }

  .contact-page-body,
  .reckoner-body {
    padding-top: 1.2rem !important;
    padding-bottom: 1.2rem !important;
  }

  /* Section 3 set these to 2.1rem a side (67px top+bottom). A little tighter now
     that the pages around them have come in, without crowding a wide layout. */
  .public-section,
  .home-trust,
  .home-services,
  .home-why,
  .home-contact-cta-wrap,
  .about-page-body {
    padding-top: 1.65rem !important;
    padding-bottom: 1.65rem !important;
  }

  .contact-page-card,
  .reckoner-main {
    padding-top: 1.4rem !important;
    padding-bottom: 1.4rem !important;
  }

  .reckoner-result {
    padding-top: 1.1rem !important;
    padding-bottom: 1.1rem !important;
  }
}