/* ==========================================================================
   VFW Post 3063 — style.css
   Mobile-first responsive CSS.
   Fonts: Merriweather (body), Montserrat (nav/UI), Inconsolata (code).
   Critical breakpoint: 910px (mobile → desktop).
   ========================================================================== */

/* ---------- Reset & Box Model ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* ---------- Base Typography ---------- */

body {
  font-family: Merriweather, Georgia, serif;
  font-size: 1rem;
  line-height: 1.75;
  color: #1a1a1a;
  background-color: #1a1a1a;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  margin: 0 0 1.75em;
  clear: both;
}

h1 {
  font-size: 1.75rem;
  line-height: 1.25;
}

h2 {
  font-size: 1.4375rem;
  line-height: 1.2173913043;
}

h3 {
  font-size: 1.1875rem;
  line-height: 1.2631578947;
}

h4, h5, h6 {
  font-size: 1rem;
  line-height: 1.75;
}

p {
  margin: 0 0 1.75em;
}

/* ---------- Links ---------- */

a {
  color: #007acc;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #686868;
}

/* Content links get a subtle underline via box-shadow */
.entry-content a {
  box-shadow: 0 1px 0 0 currentColor;
}

.entry-content a:hover,
.entry-content a:focus {
  box-shadow: none;
}

/* ---------- Code ---------- */

pre,
code,
kbd,
tt,
var {
  font-family: Inconsolata, monospace;
  font-size: 1rem;
}

pre {
  background: #f7f7f7;
  border: 1px solid #d1d1d1;
  line-height: 1.75;
  margin: 0 0 1.75em;
  max-width: 100%;
  overflow: auto;
  padding: 1.75em;
  white-space: pre-wrap;
  word-wrap: break-word;
}

code {
  background: #f7f7f7;
  padding: 0.125em 0.25em;
}

pre code {
  background: none;
  padding: 0;
}

/* ---------- Site Container ---------- */

.site {
  max-width: 1320px;
  margin: 0 auto;
  background: #fff;
}

/* ---------- Header ---------- */

.site-header {
  padding: 1.75em 7.6923%;
}

.site-title {
  font-family: Montserrat, "Helvetica Neue", sans-serif;
  font-size: 1.4375rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

.site-title a {
  color: #1a1a1a;
}

.site-title a:hover,
.site-title a:focus {
  color: #007acc;
}

.site-description {
  font-family: Montserrat, "Helvetica Neue", sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  color: #686868;
  margin: 0.25em 0 0;
  letter-spacing: 0.076923077em;
  font-style: italic;
}

/* ---------- Header Image ---------- */

.site-header-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Navigation (mobile-first) ---------- */

/* Menu toggle button — visible on mobile */
.menu-toggle {
  display: inline-block;
  font-family: Montserrat, "Helvetica Neue", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.076923077em;
  line-height: 1;
  padding: 0.75em 1.5em;
  margin-top: 1.25em;
  background: #1a1a1a;
  color: #fff;
  border: 2px solid #1a1a1a;
  cursor: pointer;
}

.menu-toggle:hover,
.menu-toggle:focus {
  background: #007acc;
  border-color: #007acc;
}

/* Mobile: nav hidden by default */
.site-header-menu {
  display: none;
}

.site-header-menu.toggled-on {
  display: block;
  padding-top: 1em;
}

/* Nav list reset */
.main-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Nav link styling (shared mobile/desktop) */
.main-navigation a {
  display: block;
  padding: 0.84375em 0;
  color: #1a1a1a;
  font-family: Montserrat, "Helvetica Neue", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.076923077em;
  line-height: 1.6153846154;
  border-bottom: 1px solid #d1d1d1;
}

.main-navigation > ul > li:first-child > a {
  border-top: 1px solid #d1d1d1;
}

.main-navigation a:hover,
.main-navigation a:focus {
  color: #007acc;
}

/* Mobile: submenu items indented */
.main-navigation ul ul a {
  padding-left: 1.5em;
}

/* Mobile: submenus hidden until toggled */
.main-navigation ul ul {
  display: none;
}

.main-navigation ul ul.toggled-on {
  display: block;
}

/* Parent items need relative positioning */
.menu-item-has-children {
  position: relative;
}

/* Dropdown toggle chevron button for mobile submenus */
.dropdown-toggle {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid #d1d1d1;
  border-left: 1px solid #d1d1d1;
  color: #1a1a1a;
  cursor: pointer;
  font-size: 0.75rem;
}

.dropdown-toggle .icon {
  display: inline-block;
  transition: transform 0.15s ease;
}

.dropdown-toggle.toggled-on .icon {
  transform: rotate(180deg);
}

/* ---------- Content Layout ---------- */

.site-content {
  padding: 3.5em 7.6923% 0;
}

/* ---------- Entry Styles ---------- */

.entry-header {
  margin-bottom: 1.75em;
}

.entry-title {
  margin-bottom: 0;
}

.entry-title a {
  color: #1a1a1a;
}

.entry-title a:hover,
.entry-title a:focus {
  color: #007acc;
}

.entry-meta {
  font-family: Montserrat, "Helvetica Neue", sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.076923077em;
  color: #686868;
  line-height: 1.6153846154;
  margin-top: 0.5em;
}

.entry-meta a {
  color: #686868;
}

.entry-meta a:hover {
  color: #007acc;
}

/* List page entry summaries */
.entry-summary {
  margin-bottom: 3.5em;
  padding-bottom: 3.5em;
  border-bottom: 1px solid #d1d1d1;
}

.entry-summary:last-of-type {
  border-bottom: none;
}

.page-header {
  margin-bottom: 3.5em;
}

.page-title {
  margin-bottom: 0;
}

/* ---------- Content Elements (WordPress HTML) ---------- */

figure {
  margin: 0 0 1.75em;
}

figcaption {
  color: #686868;
  font-size: 0.8125rem;
  font-style: italic;
  line-height: 1.6153846154;
  padding-top: 0.4375em;
}

/* ---------- Galleries (WordPress block markup) ---------- */

/* Posts imported from WordPress wrap galleries in
   <figure class="wp-block-gallery columns-N is-cropped">
     <ul class="blocks-gallery-grid"><li class="blocks-gallery-item">...
   Without these rules the <ul> falls back to a bulleted vertical list. */

.wp-block-gallery {
  margin: 0 0 1.75em;
}

/* .entry-content ul sets padding-left: 1.25em and out-specifies a lone
   class selector, so match its specificity to reset the list indent. */
.blocks-gallery-grid,
.entry-content .blocks-gallery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Mobile-first: one image per row. Columns apply at the wide breakpoint. */
.blocks-gallery-item {
  display: flex;
  margin: 0;
  width: 100%;
}

.blocks-gallery-item figure {
  display: flex;
  flex-direction: column;
  margin: 0;
  width: 100%;
}

.blocks-gallery-item img {
  display: block;
  height: auto;
  width: 100%;
}

/* is-cropped equalises heights within a row, as WordPress did. */
.wp-block-gallery.is-cropped .blocks-gallery-item img {
  flex: 1;
  height: 100%;
  object-fit: cover;
}

.blocks-gallery-item figcaption {
  padding-top: 0.4375em;
}

/* One gallery in the archive has no images. Hide the whole figure so its
   bottom margin doesn't leave a phantom gap in the middle of the post. */
.wp-block-gallery:has(.blocks-gallery-grid:empty) {
  display: none;
}

blockquote {
  border-left: 4px solid #1a1a1a;
  color: #686868;
  font-size: 1.1875rem;
  font-style: italic;
  line-height: 1.4736842105;
  margin: 0 0 1.75em;
  padding: 0 0 0 1.263em;
}

blockquote p:last-child {
  margin-bottom: 0;
}

blockquote cite {
  color: #1a1a1a;
  font-size: 1rem;
  font-style: normal;
  line-height: 1.75;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 1.75em;
}

th,
td {
  border: 1px solid #d1d1d1;
  padding: 0.4375em 0.875em;
}

th {
  font-weight: 700;
}

.entry-content ul,
.entry-content ol {
  margin: 0 0 1.75em;
  padding-left: 1.25em;
}

.entry-content li {
  margin-bottom: 0.25em;
}

hr {
  border: 0;
  border-top: 1px solid #d1d1d1;
  margin: 1.75em 0;
}

mark,
ins {
  background: #007acc;
  color: #fff;
  padding: 0.125em 0.25em;
  text-decoration: none;
}

/* Embedded iframes (Google Forms, calendars) */
iframe {
  max-width: 100%;
}

/* WordPress alignment classes */
.alignleft {
  float: left;
  margin: 0.4375em 1.75em 1.75em 0;
}

.alignright {
  float: right;
  margin: 0.4375em 0 1.75em 1.75em;
}

.aligncenter {
  display: block;
  margin: 0 auto 1.75em;
}

/* ---------- Sidebar Widgets ---------- */

.sidebar {
  margin-top: 3.5em;
}

.widget {
  margin-bottom: 3.5em;
}

.widget-title {
  font-family: Montserrat, "Helvetica Neue", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.076923077em;
  line-height: 1.6153846154;
  margin-bottom: 1.75em;
}

.widget img {
  max-width: 150px;
  display: block;
}

.social-icons {
  display: flex;
  gap: 0.75em;
}

.social-icons a {
  display: block;
}

.social-icons img {
  max-width: 40px;
  height: auto;
}

.widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.widget li {
  border-top: 1px solid #d1d1d1;
  padding: 0.4375em 0;
}

/* Sidebar links are blue like any other link, and grey on hover. This used to be
   inverted — dark by default, blue on hover — which made them not look like links.
   The base `a` rules already do the right thing, so there is no override here. */

/* Links in sidebar prose get the same underline as links in article text.
   Links in sidebar lists (recent news, and so on) do not, which is how the
   previous site behaved. */
.widget p a {
  box-shadow: 0 1px 0 0 currentColor;
}

.widget p a:hover,
.widget p a:focus {
  box-shadow: none;
}

.widget time {
  display: block;
  color: #686868;
  font-family: Montserrat, "Helvetica Neue", sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.076923077em;
  text-transform: uppercase;
}

/* ---------- Pagination ---------- */

.pagination {
  font-family: Montserrat, "Helvetica Neue", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  margin: 1.75em 0 3.5em;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}

.page-item {
  margin: 0 0.25em 0.25em 0;
}

.page-link {
  display: block;
  padding: 0.5em 1em;
  border: 1px solid #d1d1d1;
  color: #1a1a1a;
}

.page-link:hover {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}

.page-item.active .page-link {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}

.page-item.disabled .page-link {
  color: #d1d1d1;
  pointer-events: none;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid #d1d1d1;
  padding: 1.75em 7.6923%;
  margin-top: 3.5em;
}

.footer-navigation ul {
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
}

.footer-navigation li {
  display: inline-block;
  margin-right: 0.5em;
}

.footer-navigation a {
  font-family: Montserrat, "Helvetica Neue", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.076923077em;
  color: #1a1a1a;
}

.footer-navigation a:hover {
  color: #007acc;
}

.site-info {
  color: #686868;
  font-size: 0.8125rem;
  font-family: Montserrat, "Helvetica Neue", sans-serif;
}

.site-info a {
  color: #686868;
}

.site-info a:hover {
  color: #007acc;
}

/* ==========================================================================
   Desktop: ≥910px — horizontal nav, two-column layout
   ========================================================================== */

@media (min-width: 56.875em) {
  /* Gallery columns — gap is 1em, so each item is (100% - gaps) / N */
  .columns-2 .blocks-gallery-item {
    width: calc((100% - 1em) / 2);
  }

  .columns-3 .blocks-gallery-item {
    width: calc((100% - 2em) / 3);
  }

  .columns-4 .blocks-gallery-item {
    width: calc((100% - 3em) / 4);
  }


  /* Show nav, hide toggle */
  .menu-toggle {
    display: none;
  }

  .site-header-menu {
    display: block;
    padding: 0;
    margin-top: 1.75em;
  }

  /* Horizontal nav bar */
  .main-navigation > ul {
    display: inline-flex;
    border-top: 1px solid #d1d1d1;
    border-bottom: 1px solid #d1d1d1;
  }

  .main-navigation > ul > li {
    position: relative;
    border-right: 1px solid #d1d1d1;
  }

  .main-navigation > ul > li:first-child {
    border-left: 1px solid #d1d1d1;
  }

  .main-navigation a {
    border-bottom: none;
    padding: 0.84375em 0.875em;
  }

  .main-navigation > ul > li:first-child > a {
    border-top: none;
  }

  /* Hide mobile dropdown toggle on desktop */
  .dropdown-toggle {
    display: none;
  }

  /* Desktop dropdowns: hidden by default, shown on hover/focus */
  .main-navigation ul ul,
  .main-navigation ul ul.toggled-on {
    display: none;
    position: absolute;
    top: 100%;
    left: -1px;
    z-index: 99;
    background: #fff;
    border: 1px solid #d1d1d1;
    min-width: 240px;
  }

  .main-navigation li:hover > ul,
  .main-navigation li:hover > ul.toggled-on,
  .main-navigation li:focus-within > ul,
  .main-navigation li:focus-within > ul.toggled-on {
    display: block;
  }

  .main-navigation ul ul a {
    padding-left: 0.875em;
    border-bottom: 1px solid #d1d1d1;
  }

  .main-navigation ul ul li:last-child a {
    border-bottom: none;
  }

  /* Two-column content + sidebar */
  .site-content {
    display: flex;
    gap: 0;
  }

  .content-area {
    flex: 1;
    min-width: 0;
    padding-right: 2em;
  }

  .sidebar {
    flex: 0 0 250px;
    margin-top: 0;
    padding-left: 2em;
    border-left: 1px solid #d1d1d1;
  }

  /* Footer nav spacing */
  .footer-navigation li {
    margin-right: 1em;
  }
}

/* ==========================================================================
   Large screens: ≥985px — heading size increase
   ========================================================================== */

@media (min-width: 61.5625em) {

  h1 {
    font-size: 2.0625rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  .site-title {
    font-size: 1.75rem;
  }
}

/* ---------- Search ---------- */

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.search-form {
  display: flex;
  gap: 0.5em;
  margin: 0 0 1.75em;
}

.search-form input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 0.5em 0.75em;
  border: 1px solid #d1d1d1;
  font-family: inherit;
  font-size: 0.9375rem;
  color: #1a1a1a;
}

.search-form input[type="search"]:focus {
  border-color: #007acc;
  outline: 2px solid #007acc;
  outline-offset: -2px;
}

.search-form button {
  padding: 0.5em 1em;
  background: #1a1a1a;
  color: #fff;
  border: 2px solid #1a1a1a;
  font-family: Montserrat, "Helvetica Neue", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.076923077em;
  text-transform: uppercase;
  cursor: pointer;
}

.search-form button:hover,
.search-form button:focus {
  background: #007acc;
  border-color: #007acc;
}

.search-status {
  color: #686868;
  font-size: 0.9375rem;
  margin: 0 0 1.75em;
}

.search-results {
  list-style: none;
  margin: 0;
  padding: 0;
}

.search-result {
  border-top: 1px solid #d1d1d1;
  padding: 1.25em 0;
}

.search-result h3 {
  font-size: 1.25rem;
  margin: 0 0 0.25em;
}

.search-meta {
  color: #686868;
  font-family: Montserrat, "Helvetica Neue", sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.076923077em;
  text-transform: uppercase;
  margin: 0 0 0.5em;
}

.search-excerpt {
  margin: 0;
  color: #1a1a1a;
}