@charset "utf-8";
/* The Punctuation Guide - Layout and Navigation (2026) */
/* Scope: shared structural layout, header/nav systems, footer layout, and page TOC layout. */

@media screen {
  /* Section separators for content pages. */
  div#main-content > section {
    padding-bottom: 40px;
    border-bottom: 5px grey solid;
  }

  div#main-content section:last-of-type {
    border-bottom: none;
  }

  /* Site title bar shown across pages. */
  div#site-title {
    background-color: var(--color-primary);
    border-bottom: 2px solid var(--color-border);
    outline: none;
    padding: 5% 0 0 0;
    text-align: center;
  }

  span#site-title-punctuation {
    position: relative;
  }

  span#site-title-pilcrow {
    position: absolute;
    right: 1%;
    bottom: 23%;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66.6 67.6'%3E%3Cdefs%3E%3Cstyle%3E.title-pilcrow%7Bstroke:%23000;stroke-miterlimit:10;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3EP%3C/title%3E%3Cpath class='title-pilcrow' d='M41.76,10.9H4L7.68.5H45.4Zm-33,56.2H.7L24,.5h8.06ZM25,67.1H17L40.3.5h8.06ZM40.12,36.48H29.22L41.82.5H52.73a15.4,15.4,0,0,1,8.88,2.31,9.84,9.84,0,0,1,4.22,6.4,17.45,17.45,0,0,1-1,9.3,26.53,26.53,0,0,1-5.55,9.26,26.92,26.92,0,0,1-8.75,6.4A24.58,24.58,0,0,1,40.12,36.48Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.4));
  }

  span#site-title-dot-com {
    display: none;
  }

  span#site-title-p {
    visibility: hidden;
  }

  /* Site-wide top navigation and dropdown. */
  #site-wide-nav {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--color-border);
    background: var(--color-bg-nav);
  }

  ul.site-wide-nav-items {
    display: flex;
    flex: 1;
  }

  .site-wide-nav-items li {
    flex: 1;
  }

  .site-wide-nav-items a {
    display: block;
    min-width: 40px;
    padding: 6px;
    text-align: center;
    background: var(--color-bg-nav);
    color: var(--color-text);
  }

  .site-wide-nav-items a:link,
  .site-wide-nav-items a:visited {
    color: var(--color-text);
  }

  .site-wide-nav-items a:hover,
  .site-wide-nav-items a:focus {
    color: var(--color-primary);
    background: #343434;
    outline: none;
    transition: var(--transition-fast);
  }

  .site-wide-nav-items a:link.active {
    color: #343434;
    background: var(--color-primary);
  }

  .site-wide-nav-items a.active {
    color: #343434;
    background: var(--color-primary);
    border-left: 2px solid var(--color-border);
    border-right: 2px solid var(--color-border);
  }

  nav#site-wide-nav ul.site-wide-nav-items:first-child li:first-child a.active {
    border-left: none;
  }

  nav#site-wide-nav ul.site-wide-nav-items:last-child li:last-child a.active {
    border-right: none;
  }

  .site-wide-nav-items span.text-item {
    display: none;
  }

  .site-wide-nav-items li.dropdown-item {
    position: relative;
  }

  .site-wide-nav-items li.dropdown-item > a .visual-mark {
    display: inline-block;
    transform-origin: center;
    transition: transform 220ms ease;
  }

  .site-wide-nav-items li.dropdown-item:hover > a .visual-mark,
  .site-wide-nav-items li.dropdown-item:focus-within > a .visual-mark {
    transform: scaleX(-1);
  }

  .site-wide-nav-items ul.dropdown-content {
    display: block;
    position: absolute;
    right: 0;
    top: 100%;
    min-width: 320px;
    z-index: 30;
    padding: 8px;
    border: 1px solid #D6D6D6;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    pointer-events: none;
    transition:
      opacity 180ms ease,
      transform 180ms ease,
      visibility 0ms linear 180ms;
  }

  .site-wide-nav-items li.dropdown-item:hover ul.dropdown-content,
  .site-wide-nav-items li.dropdown-item:focus-within ul.dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition:
      opacity 180ms ease,
      transform 180ms ease,
      visibility 0ms linear 0ms;
  }

  .site-wide-nav-items ul.dropdown-content a {
    z-index: 20;
    padding: 10px 12px;
    text-align: left;
    border: 0 !important;
    border-radius: 8px;
  }

  .site-wide-nav-items ul.dropdown-content a:hover,
  .site-wide-nav-items ul.dropdown-content a:focus {
    background: #F3F3F3;
    color: #111111;
    outline: none;
  }

  /* Footer layout blocks. */
  footer {
    background-color: var(--color-bg-light);
    padding: var(--spacing-xs);
  }

  #return-to-top {
    float: left;
    position: relative;
    margin-left: 10px;
    margin-top: 8px;
    height: 35px;
    width: 50px;
  }

  #return-to-top-text {
    position: absolute;
    left: 80%;
    bottom: 20%;
    width: 110px;
    color: var(--color-text-muted);
  }

  span#return-to-top-icon {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cstyle%3Epath%7Bfill:%23595959;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Ecircle-up%3C/title%3E%3Cpath d='M0 16c0 8.837 7.163 16 16 16s16-7.163 16-16-7.163-16-16-16-16 7.163-16 16zM29 16c0 7.18-5.82 13-13 13s-13-5.82-13-13 5.82-13 13-13 13 5.82 13 13z'%3E%3C/path%3E%3Cpath d='M22.086 20.914l2.829-2.829-8.914-8.914-8.914 8.914 2.828 2.828 6.086-6.086z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
  }

  span#return-to-top-icon:hover {
    bottom: 5px;
  }

  #about-guide {
    margin-bottom: 5px;
    text-align: right;
  }

  div#about-guide span {
    padding-left: 5px;
  }

  #copyright {
    color: var(--color-text-light);
    text-align: right;
  }

  #copyright span:nth-child(2) {
    display: none;
  }

  /* Adds separation between "Privacy policy" and "Accessibility" in standard footers. */
  #copyright span:nth-child(5) {
    margin-left: 0.35em;
  }

  /* Content column + optional left TOC column layout. */
  .contains-page-nav {
    display: flex;
    justify-content: space-around;
  }

  #main-content {
    max-width: 800px;
    margin-right: auto;
    margin-left: auto;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
    flex-shrink: 70;
  }

  #page-navigation {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: var(--spacing-sm);
    align-self: flex-start;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    margin-right: var(--spacing-sm);
    margin-top: var(--spacing-md);
    flex-shrink: 20;
  }

  #page-navigation ul {
    margin: 0;
    padding: 0;
    max-width: 350px;
    min-width: 250px;
  }

  #page-navigation a {
    display: block;
    padding: 2px var(--spacing-sm);
    color: var(--color-text-nav);
  }

  #page-navigation .subsections a {
    padding-left: 50px;
  }

  #page-navigation a:hover {
    background-color: var(--color-bg-hover);
    transition: var(--transition-fast);
  }

  #page-navigation li.active {
    background-color: var(--color-bg-hover);
  }

  #page-navigation li.active a {
    color: var(--color-text);
  }

  div#page-navigation > ul > li {
    margin-top: 10px;
  }
}