/* Site layout: CSS Grid replacing the old <table>-based layout markup in the master pages
   and page templates. Desktop rules first, mobile-phone breakpoint override at the bottom.
   Deliberately a single breakpoint (phones only, no tablet breakpoint). */

/* Self-hosted Open Sans (latin subset, SIL OFL - see fonts/OFL.txt), matching gdusa.com's
   typography: Regular (400) for headlines, Bold (700) for the navbar. Only these two weights
   are used, so only they ship. */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/open-sans-latin-400.woff2") format("woff2");
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/open-sans-latin-700.woff2") format("woff2");
}

/* ===== Accessibility ===== */

/* "Skip to content" link at the top of each master page: off-screen until a keyboard user tabs to it. */
.skip-link {
  position: absolute;
  left: -10000px;
  top: 0;
  z-index: 1000;
  padding: 8px 16px;
  background: #000000;
  color: #ffffff;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
}

/* Hidden visually but still read by screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visible keyboard focus. :focus-visible keeps the ring off mouse clicks in browsers that support it. */
a:focus,
input:focus,
button:focus {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}

a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

/* The content area is the skip link's target; it takes focus programmatically only, so no ring. */
.mp-content:focus {
  outline: none;
}

/* ===== Master page chrome (NewSite/MasterPage*.master) ===== */

/* The logo is the page's <h1>; strip heading styles so it looks the same as the old plain div. */
.mp-logo-heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* No shared background here (deliberately) - the original table markup painted each chrome
   element's own background individually (header/category-links white, nav black, content
   unset), with the page's grey tiled body background visible in the gaps between them. A
   single shared white background on the container would flatten that "white box on grey
   tile" look into one plain white area, so each element below sets its own background to
   match, same as the original tables did. */
.mp-container {
  max-width: 950px;
  margin: 0 auto;
}

.mp-header {
  display: grid;
  /* minmax(0, ...) instead of a bare length - a fixed-length grid track can't shrink below
     its own size, which would force the whole page wider than the viewport (and produce a
     horizontal scrollbar) at any window width narrower than the header but still above the
     mobile breakpoint. minmax(0, 340px) behaves identically to 340px whenever there's room. */
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  align-items: center;
  background: #ffffff;
}

/* NewSite/MasterPage_NCPortfolio.master's logo is wider (416px), so its column is too. */
.mp-header--nc {
  grid-template-columns: minmax(0, 450px) minmax(0, 1fr);
}

.mp-tagline {
  text-align: center;
}

.mp-navbar {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  background: #000000;
}

/* MasterPage_NCPortfolio.master's navbar has no links - keep it the same thin black bar it was. */
.mp-navbar:empty {
  padding: 8px 16px;
}

/* gdusa.com-style boxed nav items: each link carries the bar's vertical padding (gdusa uses
   8px 27px), so the white dividers run the bar's full height and box every item. The first
   item starts flush with the bar's left edge. If the Open Sans woff2 doesn't load, the fallback
   fonts render at the same 15px / bold / uppercase, since those are set independently of the
   family. */
.mp-navbar a {
  padding: 8px 27px;
  border-right: 4px solid #ffffff;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  text-transform: uppercase;
}

/* Navbar link colors (moved here from an inline <style> in each master), with focus matching hover. */
.menu {
  color: #ffffff;
}

.menu:hover,
.menu:focus {
  color: #ccffcc;
  text-decoration: none;
}

.mp-navbar a:focus {
  outline-color: #ccffcc;
  outline-offset: -4px;
}

.mp-category-links {
  padding: 20px;
  margin-top: 50px;
  background: #ffffff;
  /* This text is joined mostly by &nbsp; (inherited from the original content), which makes
     one long unbreakable run - let it break as a last resort instead of forcing the container
     (and the page) wider than the viewport. */
  overflow-wrap: break-word;
}

/* Only the portfolio masters have a category-links bar directly above the content - give the
   content area the same gap below it that the old spacer image gave on those masters. */
.mp-category-links + .mp-content {
  margin-top: 50px;
}

/* ===== Blog-listing pattern (Default.aspx root, NewSite/Default.aspx, permalink/Default.aspx,
   posts/Default.aspx) ===== */

.post-banner {
  background: #ffffff;
  padding: 4px;
  margin-bottom: 8px;
}

.blog-item {
  background: #ffffff;
  padding: 8px;
  margin-bottom: 9px;
}

/* An <h2> (so screen readers can jump between posts); margin reset keeps the old div look. */
.blog-headline-title {
  margin: 0;
  background: #eeeeee;
  /* 10px on the left (6px more than the other sides) indents every line of a wrapped headline
     evenly - this replaces the old leading &nbsp;, which only indented the first line. */
  padding: 4px 4px 4px 10px;
  text-align: left;
  /* Falls back to the headline's original font (arial,helvetica) if Open Sans doesn't load. */
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-size: 20pt;
  font-weight: 400;
}

.blog-headline-meta {
  padding: 4px;
  text-align: right;
}

.pager-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: 4px;
}

.pager-nav-prev {
  text-align: left;
}

.pager-nav-next {
  text-align: right;
}

/* ===== login.aspx ===== */

.login-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1fr);
  column-gap: 5px;
  padding: 5px;
}

.login-col {
  vertical-align: top;
}

.login-divider {
  vertical-align: top;
}

/* ===== Portfolio gallery grid (database-stored content, PageId 20-23) ===== */

/* The live GeneralPages.Text content repeats <td width="90%">description</td>
   <td width="10%">thumbnail</td> pairs (verified via a read-only DB query). Plain CSS
   attribute selector - it doesn't touch the stored HTML, the FormView/Label bindings, or any
   ASP.NET control. Stacked on mobile only (see breakpoint below); left as a normal 2-column
   row on desktop, matching how it always rendered. */

/* Headings inside database-stored GeneralPages content (portfolio project titles like "BLS.gov",
   the contact page's name) are all <font size=5>. Styled here so the stored HTML is untouched;
   only the font family changes - size=5 still sets the size.
   :not(:has(font)) skips the Code page's (PageId 30) outer <font size=5>, which wraps its whole
   body - only its inner <font size=5> titles ("C#", "SQL") are headings.
   If Open Sans doesn't load, each heading falls back to the font its stored face= attribute
   named: Arial for the portfolio titles, Verdana for the contact page's name. */
.mp-content font[size="5"]:not(:has(font)) {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 400;
}

.mp-content font[size="5"][face^="Verdana"]:not(:has(font)) {
  font-family: "Open Sans", Verdana, Arial, Helvetica, sans-serif;
}

/* ===== Mobile phone breakpoint ===== */
@media (max-width: 767px), (max-height: 480px) and (orientation: landscape) {
  body {
    font-size: 1.05em;
  }

  /* Safety net for arbitrary HTML rendered by DB-bound controls (blog/general-page/portfolio
     Label and FormView content, authored via the admin WYSIWYG editor) - never overflow a
     narrow phone viewport, without touching that stored markup. Deliberately scoped to the
     mobile breakpoint only: at desktop widths these same DB-stored images (e.g. the 340px-wide
     portfolio gallery thumbnails) are meant to render at their natural declared size, with the
     browser's table auto-layout widening the thumbnail column to fit - exactly how the site
     looked before this project. Applying max-width unconditionally broke that, shrinking the
     thumbnails on desktop too. */
  img {
    max-width: 100%;
    height: auto;
  }

  table {
    max-width: 100%;
  }

  /* Embedded content (e.g. YouTube videos pasted into a blog post, which default to a
     fixed width="560" HTML attribute) needs the same treatment - CSS max-width overrides
     the HTML width attribute and keeps it from forcing the page wider than the viewport. */
  iframe {
    max-width: 100%;
  }

  .mp-header,
  .mp-header--nc {
    grid-template-columns: 1fr;
    text-align: center;
  }

  /* Stacked under the logo, the tagline's leading <br /> (there to drop it down beside the
     logo on desktop) pushes it against the navbar - drop the <br /> and pad it evenly
     instead. The logo goes block-level so the inline-image baseline gap doesn't add extra
     space above the tagline only. */
  .mp-logo img {
    display: block;
    margin: 0 auto;
  }

  .mp-tagline {
    padding: 10px 0 28px;
  }

  .mp-tagline br {
    display: none;
  }

  /* Keep the boxed nav links side by side and left-aligned like desktop (BLOG flush with the
     bar's edge), with narrower padding so all three fit on a phone. */
  .mp-navbar a {
    padding: 8px 14px;
  }

  .pager-nav {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }

  .pager-nav-prev,
  .pager-nav-next {
    text-align: center;
  }

  .login-grid {
    grid-template-columns: 1fr;
  }

  .login-divider {
    text-align: center;
  }

  td[width="90%"],
  td[width="10%"] {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Stretch the gallery thumbnails edge to edge with a ~10px border, like blog images, instead
     of stopping at their 340px declared width. The gallery table (and the thumbnail cell's own
     padding) is widened/trimmed so the image can use the full content width.
     Only the width="340" thumbnails - the 160px phone mockups beside some of them (Pub, Rhyme
     Highlighter) stay their natural size. margin: 0 cancels the stored hspace="10" on the
     websites page, which on top of width: 100% made each image 20px wider than the screen
     (horizontal scrollbar, images shifted right); the cell padding supplies the 10px instead. */
  table:has(td[width="10%"]) {
    width: 100% !important;
  }

  td[width="10%"] {
    padding: 4px 10px !important;
  }

  td[width="10%"] img[width="340"] {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
  }

  /* generalpages/Default.aspx (e.g. the contact page, PageId 1). Its database-stored content is
     a cellpadding="25" table with two side-by-side 50% cells (name/location | contact details),
     the right one holding a fixed width="400" table - together far wider than a phone. Stack the
     two outer cells (only the top-level ones: "span >" skips the inner table's own 50% cells,
     which keep the "cell phone:" / number pairs side by side), trim the padding, and let the
     inner table shrink to fit. */
  .general-page span > table > tbody > tr > td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
    padding: 10px !important;
    text-align: left;
  }

  .general-page table[width="400"] {
    width: auto !important;
  }
}