/* ==========================================================================
   NHV-21 — Information pages
   ==========================================================================
   Contact, the CMS pages (About Us, Delivery, Privacy, Terms) and the sitemap.
   All three carry id="information-*", so one scoped stylesheet reaches them —
   the same approach as the account section. Only contact needed a template. */

[id^="information-"] #content > h1 {
  margin: 0 0 16px;
  font-family: var(--nhv-font-display);
  font-size: 22px;
  font-weight: var(--nhv-fw-semi);
  color: var(--nhv-navy);
}

/* --- Shared panel ---------------------------------------------------------- */

.nhv-panel-body {
  padding: 18px;
  background: var(--nhv-cream-bright);
  border: 1px solid var(--nhv-rule-warm);
  border-top: 0;
}

/* --- Contact --------------------------------------------------------------- */

.nhv-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
  margin-bottom: 30px;
}
.nhv-contact-panel > .nhv-block-head { margin-bottom: 0; }

.nhv-contact-image {
  max-width: 100%;
  height: auto;
  margin: 0 0 14px;
  border: 1px solid var(--nhv-rule-warm);
  border-radius: var(--nhv-radius-sm);
}

.nhv-contact-store {
  margin: 0 0 4px;
  font-family: var(--nhv-font-display);
  font-size: var(--nhv-fs-base);
  font-weight: var(--nhv-fw-bold);
  color: var(--nhv-navy);
}
.nhv-contact-address {
  margin: 0 0 14px;
  font-family: var(--nhv-font-body);
  font-size: var(--nhv-fs-base);
  line-height: 1.6;
  color: var(--nhv-navy);
  font-style: normal;
}

/* Core styles the map link as .btn-info, a bright Bootstrap blue. */
.nhv-contact-map {
  display: inline-block;
  padding: 9px 16px;
  font-family: var(--nhv-font-display);
  font-size: var(--nhv-fs-small);
  font-weight: var(--nhv-fw-semi);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--nhv-navy);
  background: var(--nhv-sand);
  border: 1px solid var(--nhv-navy);
  border-radius: var(--nhv-radius-sm);
  text-decoration: none;
}
.nhv-contact-map:hover,
.nhv-contact-map:focus { color: var(--nhv-cream-bright); background: var(--nhv-navy); text-decoration: none; }
.nhv-contact-map:focus-visible { outline: 2px solid var(--nhv-copper); outline-offset: 2px; }

/* Telephone, fax, opening hours. A description list rather than core's run of
   <strong> and <br>, because that is what this is. */
.nhv-contact-meta {
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--nhv-rule-warm);
  font-family: var(--nhv-font-body);
  font-size: var(--nhv-fs-base);
  color: var(--nhv-navy);
}
.nhv-contact-meta dt {
  margin-top: 12px;
  font-family: var(--nhv-font-display);
  font-size: var(--nhv-fs-small);
  font-weight: var(--nhv-fw-bold);
  color: var(--nhv-navy);
}
.nhv-contact-meta dt:first-child { margin-top: 0; }
.nhv-contact-meta dd { margin: 2px 0 0; line-height: 1.6; }
.nhv-contact-meta a { color: var(--nhv-copper); }
.nhv-contact-meta a:hover { color: var(--nhv-navy); }

/* --- Contact form ---------------------------------------------------------- */

.nhv-contact-fields .form-group { margin-bottom: 14px; }
.nhv-contact-fields .control-label {
  display: block;
  margin: 0 0 5px;
  font-family: var(--nhv-font-display);
  font-size: var(--nhv-fs-small);
  font-weight: var(--nhv-fw-semi);
  color: var(--nhv-navy);
}
[id^="information-"] .form-control,
[id^="information-"] .form-control:focus {
  height: 38px;
  padding: 0 10px;
  font-family: var(--nhv-font-body);
  font-size: var(--nhv-fs-base);
  color: var(--nhv-navy);
  background-color: var(--nhv-cream-bright);
  border: 1px solid var(--nhv-rule-warm);
  border-radius: var(--nhv-radius-sm);
  box-shadow: none;
}
[id^="information-"] textarea.form-control { height: auto; padding: 8px 10px; }
[id^="information-"] .form-control:focus-visible { outline: 2px solid var(--nhv-copper); outline-offset: 1px; }
[id^="information-"] .required .control-label:before { color: var(--nhv-sale-red); }
[id^="information-"] .text-danger {
  display: block;
  margin-top: 4px;
  font-size: var(--nhv-fs-small);
  color: var(--nhv-sale-red);
}

.nhv-contact-actions {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--nhv-rule-warm);
}

[id^="information-"] .btn-primary {
  padding: 10px 22px;
  font-family: var(--nhv-font-display);
  font-size: var(--nhv-fs-small);
  font-weight: var(--nhv-fw-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nhv-cream-bright);
  background: var(--nhv-footer-ground);
  border: 1px solid var(--nhv-footer-ground);
  border-radius: var(--nhv-radius-sm);
  text-shadow: none;
  box-shadow: none;
}
[id^="information-"] .btn-primary:hover,
[id^="information-"] .btn-primary:focus { color: var(--nhv-cream-bright); background: var(--nhv-navy); border-color: var(--nhv-navy); }
[id^="information-"] .btn:focus-visible { outline: 2px solid var(--nhv-copper); outline-offset: 2px; }

/* --- CMS pages and the sitemap --------------------------------------------
   information.twig is whatever the admin editor produced, so this only sets the
   reading measure and the link colour rather than trying to style unknown
   markup. */

#information-information #content,
#information-sitemap #content {
  font-family: var(--nhv-font-body);
  font-size: var(--nhv-fs-base);
  line-height: 1.7;
  color: var(--nhv-navy);
}
#information-information #content a,
#information-sitemap #content a { color: var(--nhv-copper); }
#information-information #content a:hover,
#information-sitemap #content a:hover { color: var(--nhv-navy); }
/* :not(.nhv-block-title) — the same trap as the account CSS. A broad heading
   rule like this repaints the site's block titles navy-on-navy, and the panel
   heading is unreadable. Any general h2/h3 rule in this build must exclude it. */
#information-information #content h2:not(.nhv-block-title),
#information-information #content h3,
#information-sitemap #content h2:not(.nhv-block-title),
#information-sitemap #content h3 {
  font-family: var(--nhv-font-display);
  font-weight: var(--nhv-fw-bold);
  color: var(--nhv-navy);
}
#information-information #content img { max-width: 100%; height: auto; }

/* --- Sitemap -------------------------------------------------------------- */

.nhv-sitemap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
  margin-bottom: 30px;
}
.nhv-sitemap-panel > .nhv-block-head { margin-bottom: 0; }

.nhv-sitemap-list,
.nhv-sitemap-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nhv-sitemap-list > li { margin-bottom: 2px; }

.nhv-sitemap-list a {
  display: block;
  padding: 6px 0;
  font-family: var(--nhv-font-body);
  font-size: var(--nhv-fs-base);
  color: var(--nhv-navy);
  text-decoration: none;
  border-bottom: 1px solid var(--nhv-rule-warm);
}
.nhv-sitemap-list a:hover,
.nhv-sitemap-list a:focus { color: var(--nhv-copper); }
.nhv-sitemap-list a:focus-visible { outline: 2px solid var(--nhv-copper); outline-offset: 2px; }
.nhv-sitemap-list > li:last-child > a { border-bottom: 0; }

/* Nesting is shown with a copper marker and an indent rather than default
   bullets, so three levels stay legible. */
.nhv-sitemap-list ul { margin-left: 14px; }
.nhv-sitemap-list ul a {
  position: relative;
  padding-left: 14px;
  font-size: var(--nhv-fs-small);
  color: var(--nhv-navy-light);
}
.nhv-sitemap-list ul a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 1px;
  background: var(--nhv-copper);
}

/* "Information" is a group label, not a link. */
.nhv-sitemap-list > li > ul { border-bottom: 1px solid var(--nhv-rule-warm); }
.nhv-sitemap-list > li:last-child > ul { border-bottom: 0; }

@media (max-width: 767px) {
  .nhv-sitemap { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .nhv-contact { grid-template-columns: 1fr; }
}


/* --- About Us -------------------------------------------------------------
   NHV-30. A personal story in four chapters with four photographs, rebuilt as
   an editorial page rather than a wall of text beside some pictures.

   The markup is admin-authored HTML on a Bootstrap grid and is NOT rewritten —
   the copy stays editable in the admin editor exactly as it is today. What we
   get to work with is an `.intro-about` lead paragraph followed by four
   `.row.about-text` rows, each pairing a `.text-about-N` column with an image
   column. Those class names come from the content, not from us, so every rule
   below is scoped to #information-information AND hangs off one of those
   About-only hooks. Delivery, Terms, Privacy, the FAQ and the bank-transfer
   page share this id and this template and must come through untouched.

   Every selector carries the `#information-information #content` prefix. That
   is not decoration: the CMS rules above set `#information-information #content
   img { max-width: 100% }` and `#content a { color: copper }` at two IDs, which
   outranks a one-ID-plus-class selector. Without the prefix the image sizing
   and the link colour here would silently lose.

   Four decisions worth recording:

   1. THE MEASURE. The page runs the full 1400px container, like every other
      page on the site. But a paragraph across all of it is about 190 characters
      a line and comfortable reading is 65-75, so the cap goes on the text
      COLUMN (--nhv-about-measure) rather than on the page: the column stops
      growing at a readable width and the figure column beside it takes the
      slack as a wider mat. That keeps the card full-bleed to the container
      while the copy stays readable.

   2. THE PHOTOGRAPHS ARE SMALL. 600x450 at the largest, 356px wide at the two
      smallest. The HEIGHT cap is what keeps them honest: at max-height 360 the
      four render 467 / 348 / 348 / 277 wide against native widths of
      600 / 356 / 448 / 356, so nothing is upscaled however wide the mat grows,
      and the four aspect ratios (4:3, 1:1, 1:1, 4:5) resolve into one band. The
      width is never the binding constraint at any container size this theme
      allows, which is why the mat can absorb slack without the photograph
      growing with it.

   3. THE NAVY MAT. The figure column is a navy panel and the photograph is
      mounted on it in a cream border. It does the work the images cannot do
      themselves: four casual phone snaps at four aspect ratios read as one
      considered set once they are all hung on the same wall, and it puts the
      brand's own dark chrome into a page that would otherwise be all cream.

   4. THE LAST CHAPTER INVERTS. The story ends on navy so the page closes
      rather than just stopping. It carries a bottom margin for the same reason
      .nhv-cat-foot does — navy butted straight against the navy footer reads
      as one block with a seam through it. */

#information-information {
  --nhv-about-measure: 700px;  /* max width of the TEXT column      */
  --nhv-about-figure:  400px;  /* basis width of the figure column   */
}

/* The shared information-page <h1> is 22px, which is right for Delivery or
   Terms but reads as a label rather than a title above a 24px hero panel. The
   :has() gate is what keeps it off the other five CMS pages, which share both
   this id and this template; a browser without :has() simply keeps the 22px. */
#information-information #content:has(.about-text) > h1 {
  margin-bottom: 18px;
  font-size: 30px;
}

/* --- Lead -----------------------------------------------------------------
   The <h1> above keeps the shared information-page treatment; this paragraph is
   what turns the top of the page into a hero. Same navy gradient panel the rest
   of the site uses for block headings, with the copper edge drawn as an inset
   shadow rather than a border so the panel's own 1px border is not doubled. */

#information-information #content .intro-about {
  margin: 0 0 26px;
  padding: 26px 30px;
  font-family: var(--nhv-font-display);
  font-size: 24px;
  font-weight: var(--nhv-fw-semi);
  line-height: 1.4;
  color: var(--nhv-cream-bright);          /* 13.68:1 */
  background-color: var(--nhv-navy-panel);
  background-image: linear-gradient(130deg, var(--nhv-navy-panel) 0%, var(--nhv-navy) 100%);
  border: 1px solid var(--nhv-navy-border);
  border-radius: var(--nhv-radius-sm);
  box-shadow: inset 0 3px 0 var(--nhv-copper);
}

/* --- Chapters -------------------------------------------------------------
   Each row becomes a card. Grounds alternate so four cards in a column read as
   a rhythm rather than a stack of identical boxes; the copper top edge is the
   constant that ties them together. */

#information-information #content .about-text {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 0 0 22px;                        /* .row's own -15px gutters, undone */
  background: var(--nhv-cream-bright);
  border: 1px solid var(--nhv-rule-warm);
  border-radius: var(--nhv-radius-sm);
  box-shadow: inset 0 3px 0 var(--nhv-copper);
  overflow: hidden;
}

/* Bootstrap's .row clearfix pseudo-elements become real flex items here, each
   one an extra child at the default order 0 — i.e. in front of everything the
   ordering below sets up. Zero-sized, so nothing visibly moved, but they had to
   go before the order rules could be trusted. */
#information-information #content .about-text::before,
#information-information #content .about-text::after { display: none; }

/* Ground alternation. #content's element children are h1, the lead's .row, then
   the four chapters — so odd lands on chapters 1 and 3. */
#information-information #content .about-text:nth-child(odd) { background: var(--nhv-sand); }

/* The text column. Ordered by class rather than by document position: the
   content puts the image first in chapter 3 and second everywhere else, and
   ordering by position would inherit that inconsistency. */
#information-information #content .about-text > [class*="text-about-"] {
  order: 1;
  /* basis 0, not auto. The column is a .col-sm-6/.col-sm-8, and with an auto
     basis flex asks it for its max-content width — which for a paragraph is the
     whole row. It then could not fit beside the figure and wrapped underneath
     it, silently undoing the two-column layout. */
  /* Basis at the measure, then max-width clamps it there. Flex freezes an item
     that hits its max and redistributes what is left to the others, so on a
     wide container the copy stops at a readable width and the surplus becomes
     mat. Basis 0 here instead just split the surplus down the middle and left
     the copy far narrower than the cap. */
  flex: 1 1 var(--nhv-about-measure, 700px);
  width: auto;
  min-width: 0;
  max-width: var(--nhv-about-measure, 700px);
  padding: 32px 36px;
  align-self: center;
}

/* The figure column — any column in the row that is not the text one. */
#information-information #content .about-text > div:not([class*="text-about-"]) {
  order: 2;
  /* Grows. Its basis is the figure width, but on a wide container everything
     the text column refuses to take lands here — as more mat around the same
     photograph, never as a bigger photograph. */
  /* Grows but never shrinks: between 768 and 991 the two bases together are
     wider than the row, and shrinking both would squeeze the photograph. The
     text column gives way instead. */
  flex: 1 0 var(--nhv-about-figure, 400px);
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-color: var(--nhv-navy);
  background-image: linear-gradient(150deg, var(--nhv-navy-panel) 0%, var(--nhv-navy) 100%);
}

/* Chapters 2 and 4 hang their photograph on the left, so the eye zigzags down
   the page instead of running down one rail. */
#information-information #content .about-text:nth-child(even) > [class*="text-about-"] { order: 2; }
#information-information #content .about-text:nth-child(even) > div:not([class*="text-about-"]) { order: 1; }

/* See note 2 — max-height, not height, and width:auto, so nothing is cropped
   and nothing is stretched. The cream border is a photographic mount: it lifts
   the two darker images off the navy, which they would otherwise sink into. */
#information-information #content .about-text img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  /* 360, not 400: only the last photograph is portrait enough to reach the cap,
     and at 400 it made its card 90px taller than the three above it. */
  max-height: 360px;
  border: 5px solid var(--nhv-cream-bright);
  border-radius: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* --- The copy -------------------------------------------------------------- */

#information-information #content .about-text p {
  margin: 0 0 16px;
  font-family: var(--nhv-font-body);
  font-size: var(--nhv-fs-lead);
  line-height: 1.8;
  color: var(--nhv-navy);                  /* 13.68:1 cream, 12.31:1 sand */
}
#information-information #content .about-text p:last-child { margin-bottom: 0; }

/* The copy carries a couple of hand-typed <br>s at the head of a paragraph,
   left over from the editor. They open the paragraph with a blank line, which
   breaks the rhythm the margins above are setting. */
#information-information #content .about-text p > br:first-child { display: none; }

/* The opening paragraph is the lede — it carries the reader in from the hero
   panel, so it is set a size up in the display face. */
#information-information #content .text-about-1 > p:first-child {
  font-family: var(--nhv-font-display);
  font-size: 17px;
  font-weight: var(--nhv-fw-semi);
  line-height: 1.65;
}

/* --nhv-copper is 3.79:1 on these grounds, under AA for body text, so it cannot
   carry the link itself. It becomes the underline instead and the navy — which
   is 13.68:1 — carries the word. */
#information-information #content .about-text a {
  color: var(--nhv-navy);
  font-weight: var(--nhv-fw-semi);
  text-decoration: underline;
  text-decoration-color: var(--nhv-copper);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
#information-information #content .about-text a:hover,
#information-information #content .about-text a:focus {
  color: var(--nhv-navy-light);
  text-decoration-color: var(--nhv-navy-light);
}
#information-information #content .about-text a:focus-visible {
  outline: 2px solid var(--nhv-copper);
  outline-offset: 2px;
}

/* --- The close ------------------------------------------------------------
   See note 4. :last-of-type rather than :nth-child — if content_bottom ever
   adds a block after the story, the inversion simply drops off rather than
   landing on the wrong element. */

#information-information #content .about-text:last-of-type {
  margin-bottom: 15px;
  background-color: var(--nhv-navy);
  background-image: linear-gradient(130deg, var(--nhv-navy-panel) 0%, var(--nhv-navy) 100%);
  border-color: var(--nhv-navy-border);
}
/* The closing two sentences are set a size up in the display face. They are
   the shortest block on the page and sit beside its tallest photograph, so at
   body size they left a large empty field of navy beside them; at this size
   they fill the card and the story ends on a statement rather than a footnote. */
#information-information #content .about-text:last-of-type p {
  font-family: var(--nhv-font-display);
  font-size: 20px;
  line-height: 1.6;
  color: var(--nhv-cream);                                                                 /* 12.50:1 */
}
#information-information #content .about-text:last-of-type a {
  color: var(--nhv-cream-bright);
  text-decoration-color: var(--nhv-copper-text);
}
#information-information #content .about-text:last-of-type a:hover,
#information-information #content .about-text:last-of-type a:focus {
  color: var(--nhv-copper-text);                                                           /* 4.80:1 */
  text-decoration-color: var(--nhv-copper-text);
}
/* Navy mat on a navy card would be one flat field; the deeper ground and the
   solid border keep the frame readable as a frame. */
#information-information #content .about-text:last-of-type > div:not([class*="text-about-"]) {
  background-color: var(--nhv-navy-deep);
  background-image: none;
  border-right: 1px solid var(--nhv-navy-border);
}

/* --- Narrower ------------------------------------------------------------- */

@media (max-width: 991px) {
  #information-information { --nhv-about-figure: 320px; }
  #information-information #content .about-text img { max-height: 320px; }
  #information-information #content .about-text > [class*="text-about-"] { padding: 26px 24px; }
  #information-information #content .about-text > div:not([class*="text-about-"]) { padding: 18px; }
}

@media (max-width: 767px) {
  #information-information #content .intro-about {
    margin-bottom: 20px;
    padding: 20px;
    font-size: 19px;
  }
  #information-information #content .about-text { margin-bottom: 18px; }

  /* Stacked, photograph first — each chapter gets a visual anchor before the
     reader commits to the paragraph. Both order rules are restated because the
     nth-child(even) pair above would otherwise still be flipping alternate
     chapters at a width where there is only one column to flip. */
  #information-information #content .about-text > div:not([class*="text-about-"]),
  #information-information #content .about-text:nth-child(even) > div:not([class*="text-about-"]) {
    order: 1;
    flex: 1 1 100%;
    padding: 18px;
    border-right: 0;
  }
  #information-information #content .about-text > [class*="text-about-"],
  #information-information #content .about-text:nth-child(even) > [class*="text-about-"] {
    order: 2;
    flex: 1 1 100%;
    padding: 22px 20px;
  }
  #information-information #content .about-text img { max-height: 300px; }
}