/* ==========================================================================
   HTTP Gallery pages, refreshed (approved design P11). Linked by every page under Pages/HttpGallery.
   The pages keep their markup, because many sections are live demos (forms, buttons, inline scripts and
   per-page <style> blocks). This file restyles that legacy markup inside <main id="main" class="prose gallery">:
     .exampleBox   -> "Try it" example card        .galleryBox  -> "Using HttpWatch" callout
     pre / code    -> bordered code listing         .button2     -> secondary button (sentence case)
   Selectors start with #main.gallery so they win over the legacy inline "#main pre" and ".galleryBox p" rules.
   ========================================================================== */

/* Tables: the gallery uses plain layout tables, often with per-page column widths. */
#main.gallery table { margin: 0 0 18px; border-collapse: collapse; }
#main.gallery td, #main.gallery th { padding: 6px 18px 6px 0; color: var(--hw-body); font-size: 15px; line-height: 1.55; text-align: left; vertical-align: top; }
#main.gallery td p, #main.gallery th p { margin: 0 0 6px; font-size: 15px; line-height: 1.55; }
#main.gallery td:first-child p { color: var(--hw-ink); font-weight: 600; }
#main.gallery table.statusCodes { width: 100%; border: 1px solid var(--hw-line); border-radius: var(--hw-radius); border-collapse: separate; border-spacing: 0; overflow: hidden; }
#main.gallery table.statusCodes td, #main.gallery table.statusCodes th { padding: 9px 14px; border-bottom: 1px solid var(--hw-line); }
#main.gallery table.statusCodes tr:last-child > * { border-bottom: 0; }

/* Code listings (HTTP requests and responses). Long lines scroll inside the block. */
#main.gallery pre { max-width: 100%; margin: 0 0 18px; padding: 14px 16px; overflow-x: auto; border: 1px solid var(--hw-line); border-radius: var(--hw-radius); background: var(--hw-soft); }
#main.gallery pre code { padding: 0; background: none; color: var(--hw-ink); font: 13.5px/1.55 Consolas, Menlo, monospace; }

/* "Example n": a card with a "Try it" label. */
#main.gallery .exampleBox { margin: 26px 0; padding: 22px 24px; border: 1px solid var(--hw-line); border-radius: var(--hw-radius-lg); background: #fff;
  box-shadow: 0 1px 2px rgba(29, 35, 48, .06), 0 8px 24px rgba(29, 35, 48, .07); font-size: 15px; }
#main.gallery .exampleBox:before { content: "Try it"; display: block; margin: 0 0 10px; color: var(--acc-text); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
#main.gallery .exampleBox > :is(h2, h3):first-child, #main.gallery .exampleBox > form > :is(h2, h3):first-child { margin-top: 0; }
#main.gallery .exampleBox h3 { margin-top: 0; }
#main.gallery .exampleBox hr { margin: 22px -24px; }

/* "Using HttpWatch with ...": a teal callout with the HttpWatch icon. */
#main.gallery .rounded_blue_box { margin: 0 0 24px; }
#main.gallery .rounded_blue_box .top { display: none; }
#main.gallery .galleryBox { margin: 0 0 24px; padding: 18px 20px 6px 66px; border: 1px solid #b9e3e7; border-radius: 12px;
  background: var(--acc-bg1) url(/assets/images/httpwatch_32x32.png) 18px 18px no-repeat; color: var(--hw-body); font-size: 15px; line-height: 1.55; }
#main.gallery .galleryBox :is(p, ol, ul, span) { margin-left: 0; font-size: 15px; line-height: 1.55; }
#main.gallery .galleryBox :is(p, ol, ul) { margin-bottom: 12px; }
#main.gallery .galleryBox ol { padding-left: 20px; list-style: decimal; }
#main.gallery .galleryBox li { margin-bottom: 4px; }
#main.gallery .galleryBox strong { color: var(--hw-ink); }

/* Demo buttons and form controls. */
#main.gallery .button2, #main.gallery a.button2:visited {
  display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 18px; border: 0; border-radius: var(--hw-radius-sm);
  background: #fff; color: var(--hw-blue); box-shadow: inset 0 0 0 1.5px #b9cde3;
  font: 700 14.5px/1 'Open Sans', Arial, sans-serif; text-transform: none; text-decoration: none; cursor: pointer; vertical-align: middle;
}
#main.gallery .button2:hover { background: #f2f7fc; color: var(--hw-blue); box-shadow: inset 0 0 0 1.5px var(--hw-blue); text-decoration: none; }
#main.gallery .button2:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--hw-blue), var(--hw-focus); }
#main.gallery input[type=text], #main.gallery input:not([type]), #main.gallery select, #main.gallery textarea {
  min-height: 36px; padding: 4px 10px; border: 1px solid var(--hw-line-strong); border-radius: var(--hw-radius-sm);
  background: #fff; color: var(--hw-ink); font: 15px 'Open Sans', Arial, sans-serif;
}
#main.gallery :is(input, select, textarea):focus { outline: none; border-color: var(--hw-blue-2); box-shadow: var(--hw-focus); }

#main.gallery img { max-width: 100%; height: auto; }

@media (max-width: 767px) {
  #main.gallery .exampleBox { padding: 18px 16px; }
  #main.gallery .exampleBox hr { margin: 18px -16px; }
  #main.gallery .galleryBox { padding: 56px 16px 4px; background-position: 16px 14px; }
  #main.gallery td, #main.gallery th { padding-right: 10px; }
}