/*
Theme Name: Matters
Theme URI: https://matters.id.au
Author: Ian Matters
Description: A WordPress theme built from the stylesheet of matters.id.au: deep red header band, brighter red navigation bar with flyout menus, cream content area, dark footer with a site map, and the site's block, photo, quotation and list utility classes. Self-contained: no external fonts, scripts or trackers.
Version: 1.1.3
Requires at least: 5.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: matters
*/

/* Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { background: #222; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #222; color: #222;
  font: 400 15px/1.6 Ubuntu, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}
img { border: 0; max-width: 100%; height: auto; }
figure { margin: 1em 40px; }
pre { overflow: auto; }
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }

.container { position: relative; width: 98%; max-width: 960px; margin: 0 auto; padding: 0 11px; }
.container::after, .row::after, .clear-fix::after { content: ""; display: table; clear: both; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
  position: fixed; top: 6px; left: 6px; z-index: 100; width: auto; height: auto; clip: auto;
  padding: 10px 16px; background: #fff; color: #8b1515; font-weight: 600;
}

/* Header ---------------------------------------------------------------- */
#header-box { background: #8b1515; }
#header-content { width: 98%; max-width: 960px; margin: 0 auto; padding: 0 11px; }
#header-main { padding-top: 20px; }
#site-logo { margin: 10px 10px 20px 0; }
#site-logo img { display: inline-block; }
#site-name { font-size: 2.3em; line-height: 1.3; }
#site-name a { color: #fff; font-weight: normal; letter-spacing: .2px; text-decoration: none; }
#site-name a:hover { text-decoration: underline; }
#site-slogan {
  font-family: "Noto Serif", Georgia, "Times New Roman", Times, serif;
  font-size: 1em; font-style: italic; color: #fff; text-shadow: 1px 1px 0 #222; padding-bottom: 20px;
}

/* Navigation (desktop: flyout bar) -------------------------------------- */
#menu-box { background: #a61919; border: 1px solid #a61919; margin-bottom: 0; }
.nav-toggle, button.nav-toggle { display: none; }

.primary-menu, .primary-menu ul { margin: 0; padding: 0; list-style: none; }
.primary-menu { display: flex; flex-wrap: wrap; }
.primary-menu li { position: relative; margin: 0; white-space: nowrap; list-style: none; }
.primary-menu a {
  display: block; position: relative; padding: .75em 1em; color: #fff;
  background: #a61919; text-decoration: none;
}
#wrap .primary-menu a, .primary-menu a:hover { color: #fff; text-decoration: none; }
.primary-menu li:hover > a, .primary-menu li:focus-within > a, .primary-menu a:focus { background: #f22424; }
.primary-menu .current-menu-item > a, .primary-menu .current_page_item > a,
.primary-menu .current-menu-ancestor > a, .primary-menu .current_page_ancestor > a { background: #d92121; }
.primary-menu .current-menu-item > a:hover, .primary-menu .current_page_item > a:hover { background: #f22424; }

.primary-menu .sub-menu, .primary-menu .children {
  position: absolute; display: none; top: 100%; left: 0; z-index: 99; min-width: 12em;
  background: #a61919; box-shadow: 2px 2px 6px rgba(0, 0, 0, .2);
}
.primary-menu .sub-menu .sub-menu, .primary-menu .children .children { top: 0; left: 100%; }
.primary-menu li:hover > .sub-menu, .primary-menu li:focus-within > .sub-menu,
.primary-menu li:hover > .children, .primary-menu li:focus-within > .children,
.primary-menu li.is-open > .sub-menu, .primary-menu li.is-open > .children { display: block; }

.primary-menu .menu-item-has-children > a, .primary-menu .page_item_has_children > a { padding-right: 2.5em; }
.primary-menu .menu-item-has-children > a::after, .primary-menu .page_item_has_children > a::after {
  content: ""; position: absolute; top: 50%; right: 1em; margin-top: -3px; width: 0; height: 0;
  border: 5px solid transparent; border-top-color: rgba(255, 255, 255, .5);
}
.primary-menu li:hover > a::after, .primary-menu li:focus-within > a::after { border-top-color: #fff; }
.primary-menu ul .menu-item-has-children > a::after, .primary-menu ul .page_item_has_children > a::after {
  margin-top: -5px; margin-right: -3px; border-color: transparent; border-left-color: rgba(255, 255, 255, .5);
}
.primary-menu ul li:hover > a::after, .primary-menu ul li:focus-within > a::after { border-left-color: #fff; }

:focus-visible { outline: 2px solid #8b1515; outline-offset: 2px; }
#menu-box :focus-visible, #sitemap-box :focus-visible, #credits :focus-visible { outline-color: #fff; outline-offset: -3px; }

/* Content --------------------------------------------------------------- */
#wrap { font-size: 1.1em; color: #555; background: #eeede5; }
#wrap .container { background: #eeede5; }
.site-main { padding: 20px 0 30px; }
#wrap a { color: #8b1515; text-decoration: none; }
#wrap a:hover { color: #8b1515; text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { letter-spacing: normal; font-weight: normal; font-style: normal; margin: 0; }
h1 { font-size: 35px; line-height: 140%; margin-bottom: 14px; }
h2 { font-size: 28px; line-height: 130%; margin-bottom: 10px; }
h3 { font-size: 21px; line-height: 130%; margin-bottom: 8px; }
h4 { font-size: 17px; line-height: 125%; margin-bottom: 8px; }
h5 { font-size: 14px; line-height: 120%; margin-bottom: 8px; }
h6 { font-size: 13px; line-height: 120%; margin-bottom: 8px; }
h1 a, h2 a, h3 a, h4 a, h5 a { font-weight: inherit; text-decoration: none; }
.entry-content > h3, .entry-content > h2, .entry-content > h4 { margin-top: 1.4em; }

p { margin: 0 0 .9em; }
ul, ol { margin: 0 0 .9em 3em; padding: 0; list-style-position: outside; }
ul { list-style-type: disc; }
ol { list-style-type: decimal; }
ul ul, ol ol, ul ol, ol ul { margin-top: .7em; margin-bottom: 0; }
li { margin-bottom: .7em; }
.entry-meta { margin: 0 0 1em; font-size: .85em; color: #777; }

hr { border: 0; border-top: 1px solid #ccc; height: 0; margin: 10px 0; width: 100%; }
table { font-size: 1em; width: 350px; max-width: 100%; margin-bottom: 20px; border-collapse: collapse; border-spacing: 0; }
.wp-block-table table, .entry-content table.wide { width: 100%; }
table td, table th { border: 1px solid #ccc; padding: 5px 10px; text-align: left; }
table tr { background: #eee; }
table tr:nth-child(even), table tr.even { background: #f7f7f7; }
blockquote { margin: 0 0 1.5em; padding: 0 0 0 1em; border-left: 5px solid #bbb; }
code { padding: 0 .3em; background: #f1f1f1; border: 1px solid #e1e1e1; border-radius: 4px; font-size: 90%; }
pre { margin: 0 0 1.5em; padding: 1em; background: #f1f1f1; border: 1px solid #e1e1e1; }
pre code { padding: 0; border: 0; background: none; }

/* WordPress alignment and captions */
.alignleft { float: left; margin: .3em 1.25em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.25em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption, .wp-block-image figure { max-width: 100%; margin-left: 0; margin-right: 0; }
.wp-caption-text, figcaption { font-size: .85em; color: #777; text-align: center; }
.sticky { border-left: 5px solid #8b1515; padding-left: 12px; }

/* Posts list and navigation */
.post-list article { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #ccc; }
.post-list article:last-child { border-bottom: 0; }
.nav-links { display: flex; justify-content: space-between; gap: 1em; flex-wrap: wrap; margin: 1.5em 0; }
.page-numbers { padding: 2px 8px; }
.page-numbers.current { background: #8b1515; color: #fff; }
.date-stamp, .obscure { color: #6f6f66; font-size: .7em; }

/* Forms ------------------------------------------------------------------ */
input[type="email"], input[type="number"], input[type="search"], input[type="text"],
input[type="tel"], input[type="url"], input[type="password"], textarea, select {
  height: 38px; padding: 6px 10px; font: inherit; color: #222; background: #fff;
  border: 1px solid #d1d1d1; border-radius: 4px; box-shadow: none;
}
textarea { width: 100%; height: auto; min-height: 90px; }
input[type="email"]:focus, input[type="search"]:focus, input[type="text"]:focus,
input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus { border-color: #8b1515; outline: 0; }
label { display: block; margin-bottom: .5rem; font-weight: 600; }
.button, button, input[type="submit"] {
  display: inline-block; height: 38px; padding: 0 30px; color: #555; text-align: center;
  font: 600 11px/38px Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .1rem; text-transform: uppercase;
  white-space: nowrap; background: transparent; border: 1px solid #bbb; border-radius: 4px; cursor: pointer;
}
.button:hover, button:hover, input[type="submit"]:hover, .button:focus, button:focus, input[type="submit"]:focus { color: #333; border-color: #888; }
.search-form { display: flex; gap: 8px; max-width: 28em; margin-bottom: 1em; }
.search-form label { flex: 1; margin: 0; font-weight: normal; }
.search-field { width: 100%; }
.comment-respond .submit, .search-submit { color: #fff; background: #8b1515; border-color: #8b1515; }
.comment-respond .submit:hover, .search-submit:hover { color: #fff; background: #a61919; border-color: #a61919; }
.comments-area { margin-top: 30px; padding-top: 15px; border-top: 1px solid #ccc; }
.comment-list { list-style: none; margin-left: 0; }
.comment-list .children { list-style: none; margin-left: 2em; }

/* Grid (from the site stylesheet) --------------------------------------- */
.column, .columns { width: 100%; float: left; }
@media (min-width: 550px) {
  .column, .columns { margin-left: 4%; }
  .column:first-child, .columns:first-child { margin-left: 0; }
  .one.column, .one.columns { width: 4.6667%; } .two.columns { width: 13.3333%; }
  .three.columns { width: 22%; } .four.columns { width: 30.6667%; } .five.columns { width: 39.3333%; }
  .six.columns { width: 48%; } .seven.columns { width: 56.6667%; } .eight.columns { width: 65.3333%; }
  .nine.columns { width: 74%; } .ten.columns { width: 82.6667%; } .eleven.columns { width: 91.3333%; }
  .twelve.columns { width: 100%; margin-left: 0; }
  .one-third.column { width: 30.6667%; } .two-thirds.column { width: 65.3333%; } .one-half.column { width: 48%; }
}

/* Utility classes (from the site stylesheet) ---------------------------- */
.align-left { text-align: left; } .align-right { text-align: right; } .align-justify { text-align: justify; }
.align-centre, .align-center { text-align: center; }
.image-centre, .image-center { display: block; margin-left: auto; margin-right: auto; }
.largest { font-size: 2em; } .larger { font-size: 1.4em; } .smaller { font-size: .7em; }
.spacer { margin: 0 20px; } .clear { clear: both; } .hide { display: none; }
.bottom-line { border-bottom: 2px solid #bbb; margin-bottom: 15px; }
.border { border: 1px solid #ccc; } .rounded { border-radius: 6px; }
.italic { font-style: italic; } .underline { text-decoration: underline; }
.shadow { box-shadow: 0 8px 6px -6px #4a4a4a; }
.attention { background: #ff0; border: 1px solid #dd0; padding: 0 2px 2px; }
ul.no-indent { margin-left: 0; padding-left: 0; } ul.none { list-style-type: none; }
ul.circle { list-style-type: circle; } ul.square { list-style-type: square; }

.grey { color: #777; } .red { color: #c00; } .orange { color: #c60; } .green { color: #080; }
.blue { color: #007fff; } .indigo { color: #7f00ff; } .violet { color: #c0c; }

hr.black, hr.grey, hr.red, hr.orange, hr.yellow, hr.green, hr.cyan, hr.blue, hr.magenta, hr.violet {
  height: 2px; margin: 10px 0; border: 0; background: var(--hr, #bbb);
}
hr.black { --hr: #444; } hr.red { --hr: #f00; } hr.orange { --hr: #ff7f00; } hr.yellow { --hr: #ffcf00; }
hr.green { --hr: #0f0; } hr.cyan { --hr: #0ff; } hr.blue { --hr: #00f; } hr.magenta, hr.violet { --hr: #f0f; }

.photo, .photo-with-title { margin: 0 0 30px; }
.photo img, .photo-with-title img {
  display: block; margin: 0 auto; max-width: 938px; width: auto; padding: 10px; background: #fff;
  border: 1px solid #ccc; box-shadow: 0 8px 6px -6px #4a4a4a;
}
.photo-with-title img { padding: 10px 10px 30px; margin-bottom: -20px; }
.photo-with-title p { font-size: .8em; text-align: center; line-height: 1; }

.quotation {
  margin: 15px 0; padding: 15px 10px 0; font: italic 1.5em "Noto Serif", Georgia, "Times New Roman", Times, serif;
  background: #eee; border: 1px solid #ccc; text-align: center;
}
.quotation p { color: #333; display: inline; }
.quotation::before { content: "\201C"; color: #ccc; font-size: 2em; margin-right: 5px; vertical-align: -.3em; }
.quotation::after { content: "\201D"; color: #ccc; font-size: 2em; vertical-align: -.3em; }

.block-white, .block-grey, .block-red, .block-orange, .block-yellow, .block-green, .block-cyan, .block-blue, .block-magenta, .block-violet {
  margin: 15px 0 20px; padding: 10px 12px 0 10px; min-width: 110px; background: var(--c-bg, #fff); border: 1px solid var(--c-bd, #ccc);
}
.sticky-note-white, .sticky-note-grey, .sticky-note-red, .sticky-note-orange, .sticky-note, .sticky-note-yellow,
.sticky-note-green, .sticky-note-cyan, .sticky-note-blue, .sticky-note-magenta, .sticky-note-violet {
  min-height: 20em; padding: 10px; font-size: .9em; margin: 0 auto 20px; background: var(--c-bg, #fff); border: 1px solid var(--c-bd, #ccc);
}
.sticky-note ul, [class^="sticky-note-"] ul { margin-left: 1.2em; }
.block-grey, .sticky-note-grey { --c-bg: #eee; --c-bd: #ccc; }
.block-red, .sticky-note-red { --c-bg: #ffe5e5; --c-bd: #ffabab; --c-bold: #ffabab; }
.block-orange, .sticky-note-orange { --c-bg: #fff2e5; --c-bd: #ffd5ab; --c-bold: #ffd5ab; }
.block-yellow, .sticky-note, .sticky-note-yellow { --c-bg: #ffffe5; --c-bd: #fff0ab; --c-bold: #ffffab; }
.block-green, .sticky-note-green { --c-bg: #e5ffe5; --c-bd: #abffab; --c-bold: #abffab; }
.block-cyan, .sticky-note-cyan { --c-bg: #e5ffff; --c-bd: #abffff; --c-bold: #abffff; }
.block-blue, .sticky-note-blue { --c-bg: #e5e5ff; --c-bd: #ababff; --c-bold: #ababff; }
.block-magenta, .block-violet, .sticky-note-magenta, .sticky-note-violet { --c-bg: #ffe5ff; --c-bd: #ffabff; --c-bold: #ffabff; }
.bold.block-red, .bold.block-orange, .bold.block-yellow, .bold.block-green, .bold.block-cyan, .bold.block-blue,
.bold.block-magenta, .bold.block-violet, .bold.sticky-note, .bold[class*="sticky-note-"] { background: var(--c-bold); }
.block-white ul, .block-white ol, .block-grey ul, .block-grey ol, .block-red ul, .block-red ol, .block-orange ul, .block-orange ol,
.block-yellow ul, .block-yellow ol, .block-green ul, .block-green ol, .block-cyan ul, .block-cyan ol,
.block-blue ul, .block-blue ol, .block-magenta ul, .block-magenta ol, .block-violet ul, .block-violet ol { margin-left: 1.5em; }

#wide-list, .wide-list { margin: 10px 0 20px; }
#wide-list ul, .wide-list ul { margin-left: 0; }
#wide-list li, .wide-list li {
  list-style: none; margin-bottom: 15px; padding: 10px 20px 10px 10px; text-align: left;
  background: #eee; border: 1px solid #ccc; border-left: 5px solid #bbb;
}
#wide-list a, .wide-list a { font-size: 1.2em; }

.outline-red, .sideline-red, .headline-red, .baseline-red { --line: #f00; }
.outline-orange, .sideline-orange, .headline-orange, .baseline-orange { --line: #ff7f00; }
.outline-yellow, .sideline-yellow, .headline-yellow, .baseline-yellow { --line: #ffcf00; }
.outline-green, .sideline-green, .headline-green, .baseline-green { --line: #0f0; }
.outline-cyan, .sideline-cyan, .headline-cyan, .baseline-cyan { --line: #0ff; }
.outline-blue, .sideline-blue, .headline-blue, .baseline-blue { --line: #00f; }
.outline-magenta, .outline-violet, .sideline-magenta, .sideline-violet,
.headline-magenta, .headline-violet, .baseline-magenta, .baseline-violet { --line: #f0f; }
.outline, .outline-white, .outline-grey, .outline-red, .outline-orange, .outline-yellow, .outline-green, .outline-cyan, .outline-blue, .outline-magenta, .outline-violet { border: 2px solid var(--line, #bbb); }
.sideline, .sideline-white, .sideline-grey, .sideline-red, .sideline-orange, .sideline-yellow, .sideline-green, .sideline-cyan, .sideline-blue, .sideline-magenta, .sideline-violet { border-left: 5px solid var(--line, #bbb); }
.headline, .headline-white, .headline-grey, .headline-red, .headline-orange, .headline-yellow, .headline-green, .headline-cyan, .headline-blue, .headline-magenta, .headline-violet { border-top: 5px solid var(--line, #bbb); }
.baseline, .baseline-white, .baseline-grey, .baseline-red, .baseline-orange, .baseline-yellow, .baseline-green, .baseline-cyan, .baseline-blue, .baseline-magenta, .baseline-violet { border-bottom: 5px solid var(--line, #bbb); }

/* Footer: site map and credits ------------------------------------------ */
#footer { background: #222; }
#sitemap-box { border-top: 1px solid #000; background: #222; }
#sitemap { padding-top: 10px; padding-bottom: 10px; line-height: 1.4em; }
#sitemap ul { list-style: none; margin: 0; padding: 0; }
#sitemap .sitemap-menu { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 6em; }
#sitemap .sitemap-menu > li { margin: 0 0 5px; }
#sitemap .sitemap-menu > li > a { font-size: 1em; }
#sitemap ul ul { margin: 2px 0 10px; font-size: .8em; }
#sitemap ul ul li { margin: 0; padding: 3px 0 3px 7px; border-left: 1px solid #777; }
#sitemap a { color: #ccc; text-decoration: none; }
#sitemap .current-menu-item > a, #sitemap .current_page_item > a { color: #fff; }
#sitemap a:hover { color: #fff !important; text-decoration: underline; }
#credits { color: #bbb; background: #222; font-size: .8em; line-height: 1.5em; padding: 10px 0 20px; }
#credits p { margin: 0; }
#credits a { color: #bbb; text-decoration: none; }
#credits a:hover { color: #fff; text-decoration: underline; }

/* Narrow screens (the site's 767px breakpoint) --------------------------- */
@media only screen and (max-width: 767px) {
  #header-box { background: #eeede5; }
  #site-name a { color: #8b1515; }
  #site-slogan { color: #444; text-shadow: none; }
  #menu-box { margin-bottom: 0; background: #8b1515; border: 1px solid #ccc; }

  button.nav-toggle {
    display: block; width: 100%; height: auto; margin: 0; padding: 0 6px; border: 0; border-radius: 0;
    background: #8b1515; color: #fff; font: 400 28px/36px Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 0; text-align: left; text-transform: none;
  }
  button.nav-toggle:hover, button.nav-toggle:focus { background: #ec6c45; color: #fff; }

  .primary-menu { display: none; flex-direction: column; }
  .primary-menu.is-open { display: flex; }
  .primary-menu li { white-space: normal; }
  .primary-menu a { background: #8b1515; border-top: 1px solid #ba3814; padding: .5em 10px; }
  .primary-menu li:hover > a, .primary-menu li:focus-within > a, .primary-menu a:focus { background: #ec6c45; }
  .primary-menu .current-menu-item > a, .primary-menu .current_page_item > a,
  .primary-menu .current-menu-ancestor > a, .primary-menu .current_page_ancestor > a { background: #ba3814; }
  .primary-menu .sub-menu, .primary-menu .children {
    position: static; display: block; min-width: 0; box-shadow: none; background: #8b1515;
  }
  .primary-menu .sub-menu a, .primary-menu .children a { padding-left: 28px; }
  .primary-menu .sub-menu .sub-menu a, .primary-menu .children .children a { padding-left: 46px; }
  .primary-menu .menu-item-has-children > a, .primary-menu .page_item_has_children > a { padding-right: 10px; }
  .primary-menu .menu-item-has-children > a::after, .primary-menu .page_item_has_children > a::after { display: none; }

  #footer, #credits { background: #eeede5; }
  #credits { color: #000; }
  #credits a, #credits a:hover { color: #8b1515; }
}

@media (max-width: 549px) {
  .photo-with-title { margin-bottom: 15px; }
  .photo-with-title img { padding-bottom: 10px; }
  .photo-with-title p { color: transparent; }
  #wide-list a, .wide-list a { font-size: 1em; }
  figure { margin-left: 0; margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print {
  #menu-box, #sitemap-box, .skip-link { display: none; }
  html, body, #wrap, #header-box, #footer, #credits { background: #fff; color: #000; }
  #site-name a, #site-slogan { color: #000; text-shadow: none; }
}