/* PiratePalooza responsive layer — added in version 1.1.0.
   Desktop retains the original 900px parchment / wood / brass appearance.
   This file is enqueued after style.css and the Twenty Twenty-One parent. */

/* -------------------------------------
   Common: no horizontal page overflow
   ------------------------------------- */
#page, #content, #primary, #main {
  min-width: 0;
  max-width: 100%;
}

#masthead, #drewcontentbox001, #stretchypants,
footer#colophon, footer#colophon.site-footer {
  width: 100%;
  max-width: 900px;
  box-sizing: border-box;
}

#masthead {
  background-image: url('../images/2012_banner.jpg');
  background-size: 100% auto;
  background-repeat: no-repeat;
}

#stretchypants { min-width: 0; align-items: stretch; }
#mybigpackage { width: 70%; flex: 0 1 70%; min-width: 0; }
.main-content-area { width: 100%; min-width: 0; float: none; box-sizing: border-box; }
#sidebar { width: 30%; flex: 0 0 30%; min-width: 0; }
.main-content-area article { box-sizing: border-box; min-width: 0; }
.main-content-area article .entry-content { min-width: 0; overflow-wrap: break-word; }
#main .main-content-area article img, .main-content-area article video,
.main-content-area article embed, .main-content-area article object,
#sidebar img {
  max-width: 100%;
  height: auto;
}
#sidebar .sidebarSearch input[type="search"] {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: auto;
  font-size: 14px;
  line-height: 1.2;
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.main-content-area article iframe { max-width: 100%; }
.main-content-area article pre, .main-content-area article code {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.main-content-area article pre { overflow-x: auto; white-space: pre-wrap; }
.main-content-area .wp-block-table { max-width: 100%; overflow-x: auto; }
.main-content-area .wp-block-table table { width: 100%; }
.main-content-area article .wp-block-embed__wrapper { max-width: 100%; }
.main-content-area article iframe.youtubefix,
.main-content-area article iframe[src*="youtube.com"],
.main-content-area article iframe[src*="youtu.be"],
.main-content-area article iframe[src*="vimeo.com"] {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto !important;
  aspect-ratio: 16 / 9;
}

/* Keep parent-theme content widths from imposing a second narrow column. */
#main #stretchypants, #main #drewcontentbox001,
#main #mybigpackage, #main .main-content-area {
  max-width: 900px;
}

.pirate-mobile-navigation { display: none; }

@media (max-width: 899px) {
  /* More-specific base selectors also need the narrower tablet cap. */
  #main #drewcontentbox001, #main #stretchypants { max-width: 680px; }
  .main-content-area article .post-date {
    position: relative;
    top: auto;
    left: auto;
    display: block;
    width: 130px;
    height: 73px;
    margin: 5px 0 0 12px;
    background-size: 130px 73px;
  }
  .main-content-area article .post-categories,
  .main-content-area article .post-meta {
    box-sizing: border-box;
    width: 100%;
    float: none;
    max-width: 100%;
    white-space: normal;
  }
  /* One comfortable reading column. The sidebar follows the articles. */
  #masthead { max-width: 900px; min-height: 0; padding: 0 !important; }
  #drewcontentbox001, #stretchypants {
    width: 100%;
    max-width: 680px;
    margin-inline: auto;
  }
  #stretchypants {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
  }
  #mybigpackage {
    width: 100%;
    max-width: none;
    flex: none;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  #mybigpackage .main-content-area { width: 100%; max-width: none; }
  #sidebar {
    width: 100%;
    flex: none;
    max-width: none;
    margin: 0 auto;
    padding: 10px 0 16px;
    text-align: center;
  }
  #brassbit, #sidebarFoot,
  .sidebarSearch, .sidebarArchive, #sidebar .side-widget {
    margin-inline: auto;
    max-width: 260px;
  }
  #brassbit { background-position: center top; }
  #sidebar .siteNavi { display: none; } /* Top menu replaces it on small displays. */
  #sidebar .widget-area { max-width: 520px; margin: 0 auto; }
  #sidebar .twitter, #sidebar .rPhone { margin-inline: auto; }
  #sidebar .sidebarSearch h3, #sidebar .sidebarArchive h3 {
    max-width: 260px;
    margin-inline: auto;
    background-position: center top;
  }
  #sidebar .sidebarSearch, #sidebar .sidebarArchive { background-position: center bottom; }
  #sidebar form#searchform { margin-inline: auto; }
  #sidebar .sidebarSearch input[type="search"] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 6px;
    border: 1px solid #aa9257;
    border-radius: 4px;
    background: #f5ecd0;
    color: #33240f;
  }
  #sidebar select { max-width: 100%; }
  #sidebar #sidebarFoot { background-position: center top; }

  /* Built-in, keyboard-accessible details menu; no JS dependency. */
  .pirate-mobile-navigation {
    display: block;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 0 8px 8px;
    box-sizing: border-box;
    color: #f4dfa7;
    font-family: Georgia, 'Times New Roman', serif;
  }
  .pirate-mobile-navigation details {
    border: 1px solid #8d7537;
    background: #322719 url('../images/woodtone_002.png') repeat;
  }
  .pirate-mobile-navigation summary {
    display: list-item;
    cursor: pointer;
    padding: 11px 16px;
    font-size: 1rem;
    font-weight: bold;
    color: #f0d88f;
    list-style-position: inside;
  }
  .pirate-mobile-navigation summary:focus-visible,
  .pirate-mobile-navigation a:focus-visible {
    outline: 2px solid #e7c75f;
    outline-offset: -2px;
  }
  .pirate-mobile-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0 10px 12px;
  }
  .pirate-mobile-navigation li { margin: 0; padding: 0; }
  .pirate-mobile-navigation a {
    display: block;
    padding: 9px 14px;
    border-bottom: 1px solid rgba(228, 199, 117, .25);
    color: #f4e4ae;
    text-decoration: none;
    font-size: .95rem;
    line-height: 1.4;
  }
  .pirate-mobile-navigation a:hover,
  .pirate-mobile-navigation a[aria-current] { background: rgba(229, 197, 112, .18); }

  /* Parchment text, headings, media and comment forms must fit. */
  .main-content-area article { margin-right: 14px; }
  .main-content-area article .entry-header,
  .main-content-area article .entry-content,
  .main-content-area article .entry-footer { max-width: 100%; }
  .main-content-area article .entry-content,
  article.post > .entry-content {
    width: auto;
    margin: 10px 20px 18px 26px;
    padding: 0;
    max-width: calc(100% - 46px);
  }
  .main-content-area article figure,
  .main-content-area article .wp-block-image { max-width: 100%; }
  .single-post figure img {
    width: auto;
    max-width: 100%;
    height: auto;
    margin-left: 0;
  }
  .main-content-area article figcaption.wp-element-caption {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 8px 0 16px;
    padding: 0 8px;
  }
  .main-content-area article .wp-block-group { max-width: 100%; }
  body.single-post article .wp-block-group {
    width: auto;
    margin-inline: 0 !important;
  }
  .main-content-area ul.wp-block-list,
  body.single-post ul.wp-block-list,
  .post > div > ol.wp-block-list { max-width: 100%; }
  .main-content-area article blockquote,
  .post > div > blockquote { margin: 14px 8px !important; }
  #postNavigation {
    float: none;
    clear: both;
    width: auto;
    max-width: 100%;
    margin: 12px 14px;
  }
  #postNavigation ul {
    float: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 10px;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }
  #postNavigation li.prevPost, #postNavigation li.nextPost {
    float: none;
    flex: 0 1 250px;
    max-width: 100%;
  }
  #postNavigation li a { max-width: 100%; }
  #postNavigation li.prevPost a, #postNavigation li.nextPost a {
    box-sizing: border-box;
    padding-right: 0;
  }
  #returnhome { max-width: calc(100% - 26px); }

  /* Footer remains inside the banner's overall width. */
  footer#colophon, footer#colophon.site-footer {
    display: block;
    max-width: 680px;
    padding-inline: 0;
    margin-inline: auto;
  }
  footer#colophon .site-info { width: 100%; max-width: 100%; }
  footer#colophon nav.footer-navigation {
    margin: 0 auto;
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
  }
  footer#colophon ul.footer-navigation-wrapper {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  #comments, .comments-area, #respond { min-width: 0; max-width: 100%; }
  #commentform, form#commentform {
    float: none;
    box-sizing: border-box;
    width: calc(100% - 32px);
    max-width: 100%;
    margin: 0 16px;
  }
  #commentform textarea, #commentform input { max-width: 100%; }
  #comments li.comment { box-sizing: border-box; max-width: calc(100% - 24px); }
}

@media (max-width: 600px) {
  /* Let the header illustration scale naturally with the viewport. */
  #masthead { width: 100%; aspect-ratio: 900 / 289; }
  .brasstop001 { height: 22px; }
  .main-content-area { border-width: 4px; }
  .main-content-area article {
    width: calc(100% - 16px);
    margin: 10px 8px 22px;
    padding: 0;
    background-size: 100% auto;
  }
  .main-content-area article .entry-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    margin-bottom: 0 !important;
    background-size: 100% auto;
  }
  .main-content-area article .entry-header h2,
  .main-content-area article h2.entry-title,
  #main .main-content-area article h1.entry-title {
    float: none;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 6px 18px 8px;
    margin: 0 0 8px;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: clamp(1.38rem, 5.4vw, 1.9rem) !important;
    line-height: 1.22;
    overflow-wrap: anywhere;
  }
  .main-content-area article .entry-header h2 a,
  .main-content-area article h2.entry-title a { overflow-wrap: anywhere; }
  .main-content-area article .post-date {
    position: relative;
    top: auto;
    left: auto;
    flex: none;
    box-sizing: border-box;
    display: block;
    width: 130px;
    height: 73px;
    margin: 2px 0 0 4px;
    padding: 0;
    background-size: 130px 73px;
  }
  .main-content-area article > .post-date { /* Excerpt date precedes its header. */
    margin: 4px 0 0 6px;
  }
  .main-content-area article .post-date .date-day { padding-top: 13px; }
  .main-content-area article .post-categories,
  .main-content-area article .post-meta,
  article > header > p.post-meta {
    float: none;
    box-sizing: border-box;
    width: 100%;
    padding: 0 18px 10px;
    margin: 0;
    white-space: normal;
    text-overflow: clip;
    overflow: visible;
  }
  .main-content-area article .entry-content,
  article.post > .entry-content {
    width: auto;
    max-width: none;
    margin: 8px 16px 12px;
    font-size: clamp(1rem, 3.6vw, 1.12rem);
    line-height: 1.5;
  }
  .main-content-area article .entry-content > * { max-width: 100%; }
  .main-content-area article .entry-content ul,
  .main-content-area article .entry-content ol,
  .post > div > ol.wp-block-list,
  ul.wp-block-list {
    box-sizing: border-box;
    width: 100% !important;
    margin: 12px 0 !important;
    padding-left: 22px;
  }
  .main-content-area article .entry-content li { overflow-wrap: anywhere; }
  .main-content-area article figure,
  .main-content-area article .wp-block-image {
    width: 100%;
    max-width: 100%;
    margin: 8px 0 !important;
  }
  img.attachment-post-thumbnail.size-post-thumbnail.wp-post-image {
    box-sizing: border-box;
    width: 100% !important;
    margin: 0 0 12px;
  }
  .main-content-area article .wp-block-group,
  body.single-post article .wp-block-group { margin-left: 0 !important; }
  .postFoot { background-size: 100% auto; height: 40px; }

  /* Reflow decorative links and sprite-based previous/next buttons. */
  #returnhome {
    box-sizing: border-box;
    float: none;
    width: calc(100% - 28px);
    max-width: none;
    height: auto;
    min-height: 54px;
    margin: 12px 14px 8px;
    padding: 8px 12px;
    background: #dfc78b;
    border: 2px solid #917137;
    border-radius: 4px;
  }
  #returnhome p, #singleArticle {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 0 4px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  p.return a {
    display: block;
    text-indent: 0;
    text-align: center;
    font-size: .8rem;
    line-height: 1.4;
  }
  #postNavigation li.prevPost, #postNavigation li.nextPost {
    float: none;
    flex: 1 1 130px;
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 36px;
  }
  #postNavigation li.prevPost a, #postNavigation li.nextPost a {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 36px;
    padding: 8px;
    background: #d5bb73;
    border: 1px solid #917137;
    border-radius: 4px;
    color: #443315;
    text-decoration: none;
    text-align: center;
  }
  #postNavigation span.prevLeft, #postNavigation span.nextRight {
    visibility: visible;
  }
  div.keepdigging { font-size: clamp(4rem, 18vw, 8rem); padding-top: 18px; }
  #blathertease li { white-space: normal; padding-right: 6px; }
  p.search-result-count { float: none; padding: 8px 18px; }
  .main-content-area .page-header h2.page-title {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 14px;
    font-size: clamp(1.2rem, 5vw, 1.8rem);
  }
  footer#colophon .site-name { padding: 6px 10px; }
  footer#colophon ul.footer-navigation-wrapper li {
    float: none;
    width: 100%;
    margin: 0 0 6px;
  }
  #sidebar .sidebarArchive select { font-size: 1rem; }
  #sidebar .sidebarSearch, #sidebar .sidebarArchive { margin-bottom: 24px !important; }
}

@media (max-width: 360px) {
  .main-content-area article .entry-content,
  article.post > .entry-content { margin-inline: 12px; }
  .main-content-area article .entry-header h2,
  .main-content-area article h2.entry-title { padding-inline: 12px; }
  #postNavigation ul { flex-direction: column; }
}

/* --------------------------------------------------------------
   v1.2 — the journal/pen ornament belongs on the two-column page.
   When content collapses to one column, show the date as typography
   on the very same parchment as the title and content. This also
   removes the duplicate paper "cap" that produced a dark seam.
   -------------------------------------------------------------- */
@media (max-width: 899px) {
  /* The repeating parchment goes all the way across the post. */
  .main-content-area article {
    background-size: 100% auto;
  }
  .main-content-area article .entry-header {
    background-image: none;
    background-color: transparent;
    min-height: 0;
    height: auto;
  }

  /* Applies to both single posts (date within header) and archives
     (date immediately before header). */
  .main-content-area article .post-date,
  .main-content-area article > .post-date {
    position: static;
    inset: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4em;
    box-sizing: border-box;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 15px 24px 2px;
    background: none;
    color: #81522c;
    font: 600 0.82rem/1.35 Georgia, 'Times New Roman', serif;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-align: left;
  }
  .main-content-area article .post-date .date-day,
  .main-content-area article .post-date .date-month,
  .main-content-area article .post-date .date-year {
    display: inline;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    text-transform: inherit;
  }
  .main-content-area article .post-date .date-year {
    font-weight: 400;
    letter-spacing: 0.05em;
  }
  .main-content-area article .entry-header h2,
  .main-content-area article h2.entry-title,
  #main .main-content-area article h1.entry-title {
    padding-top: 10px;
    margin-top: 0;
  }
}

@media (max-width: 600px) {
  /* Override older phone rules that retained the scaled book artwork. */
  .main-content-area article .post-date,
  .main-content-area article > .post-date {
    margin: 0;
    padding: 14px 18px 2px;
    width: auto;
    height: auto;
    background: none;
  }
  .main-content-area article .post-date .date-day {
    padding: 0;
  }
  .main-content-area article .entry-header h2,
  .main-content-area article h2.entry-title,
  #main .main-content-area article h1.entry-title {
    padding-top: 8px;
    padding-bottom: 10px;
  }
}

@media (max-width: 360px) {
  .main-content-area article .post-date,
  .main-content-area article > .post-date { padding-inline: 12px; }
}