/*
Theme Name: NCBD Newsroom
Theme URI: https://www.ncbusinessdesk.com
Author: Magic Mile Media, Inc.
Description: A clean, responsive news theme built for NC Business Desk.
Version: 1.3.4
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: ncbd-newsroom
*/

:root {
  --ncbd-navy: hsl(212 31% 16%);
  --ncbd-navy-2: hsl(212 27% 22%);
  --ncbd-accent: hsl(17 37% 49%);
  --ncbd-paper: rgb(243 242 241);
  --ncbd-white: #fff;
  --ncbd-ink: hsl(212 31% 16%);
  --ncbd-muted: #68717a;
  --ncbd-line: rgb(28 40 53 / 22%);
  --ncbd-max: 1180px;
  --ncbd-reading: 760px;
  --ncbd-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ncbd-sans: "Source Sans 3", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ncbd-paper);
  color: var(--ncbd-ink);
  font-family: var(--ncbd-sans);
  font-size: 18px;
  line-height: 1.6;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }

a:hover, a:focus-visible { color: var(--ncbd-accent); }

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.screen-reader-text:focus {
  clip: auto;
  clip-path: none;
  background: var(--ncbd-white);
  color: var(--ncbd-navy);
  height: auto;
  left: 1rem;
  padding: .75rem 1rem;
  top: 1rem;
  width: auto;
  z-index: 10000;
}

.site-shell { min-height: 100vh; display: flex; flex-direction: column; }

.site-main { flex: 1; }

.site-main h1 { text-align: center; }

.site-header {
  background: var(--ncbd-paper);
  border-bottom: 1px solid var(--ncbd-navy);
}

.header-inner {
  align-items: center;
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  margin: 0 auto;
  max-width: var(--ncbd-max);
  min-height: 132px;
  padding: 1.35rem 1.5rem;
}

.brand-link { display: inline-block; flex: 0 1 520px; text-decoration: none; }

.brand-logo { width: min(100%, 520px); }

.menu-toggle {
  appearance: none;
  background: var(--ncbd-navy);
  border: 0;
  color: var(--ncbd-white);
  cursor: pointer;
  display: none;
  font: 700 .85rem/1 var(--ncbd-sans);
  letter-spacing: .08em;
  padding: .8rem 1rem;
  text-transform: uppercase;
}

.primary-nav ul {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1rem;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-nav a {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .045em;
  text-decoration: none;
  text-transform: uppercase;
}

.primary-nav .nav-cta a {
  background: var(--ncbd-accent);
  color: var(--ncbd-white);
  padding: .58rem .75rem;
}

.latest-heading-wrap {
  margin: 0 auto;
  max-width: var(--ncbd-max);
  padding: 1rem 1.5rem 0;
}

.latest-heading {
  font-family: var(--ncbd-serif);
  font-size: clamp(4.5rem, 11vw, 9.7rem);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: .9;
  margin: .55rem 0 .35rem;
  text-align: center;
}

.news-field { background: var(--ncbd-accent); padding: 2.25rem 1.5rem 4rem; }

.news-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 auto;
  max-width: var(--ncbd-max);
}

.story-card { background: var(--ncbd-navy); color: var(--ncbd-white); min-width: 0; }

.story-card-image-link { display: block; overflow: hidden; }

.story-card-image,
.story-card-placeholder {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
}

.story-card-image { transition: transform .25s ease; }

.story-card:hover .story-card-image { transform: scale(1.015); }

.story-card-placeholder {
  align-items: center;
  background: var(--ncbd-paper);
  color: var(--ncbd-navy);
  display: flex;
  font: 600 2rem/1 var(--ncbd-serif);
  justify-content: center;
}

.story-card-body { padding: 1.15rem 1.2rem 1.35rem; }

.story-card-category,
.eyebrow {
  color: #d69173;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}

a.story-card-category,
a.eyebrow { text-decoration: none; }

a.story-card-category:hover,
a.story-card-category:focus-visible,
a.eyebrow:hover,
a.eyebrow:focus-visible { text-decoration: underline; }

.story-card-title {
  font-family: var(--ncbd-sans);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.08;
  margin: .4rem 0 .85rem;
}

.story-card-title a { color: var(--ncbd-white); text-decoration: none; }

.story-card-title a:hover,
.story-card-title a:focus-visible { color: #f0b49b; }

.story-card-excerpt { color: rgb(255 255 255 / 84%); font-size: .92rem; margin: 0 0 1rem; }

.story-card-date { color: rgb(255 255 255 / 67%); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }

.pagination-wrap { grid-column: 1 / -1; }

.pagination-wrap .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }

.pagination-wrap a,
.pagination-wrap .current {
  background: var(--ncbd-navy);
  color: var(--ncbd-white);
  display: inline-block;
  padding: .5rem .8rem;
  text-decoration: none;
}

.pagination-wrap .current { background: var(--ncbd-white); color: var(--ncbd-navy); }

.article-wrap,
.page-wrap,
.archive-intro {
  margin: 0 auto;
  max-width: var(--ncbd-max);
  padding: 3.5rem 1.5rem;
}

.article-header,
.article-body,
.article-footer,
.page-content { margin-left: auto; margin-right: auto; max-width: var(--ncbd-reading); }

.article-title,
.page-title,
.archive-title {
  font-family: var(--ncbd-serif);
  font-size: clamp(3rem, 7vw, 6.4rem);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: .95;
  margin: .55rem 0 1.2rem;
}

.article-title { font-size: clamp(2rem, 4.69vw, 4.288rem); }

.article-meta { color: var(--ncbd-muted); font-size: .86rem; }

.article-featured {
  margin: 2rem auto 2.75rem;
  max-width: 980px;
}

.article-featured img { max-height: 82vh; object-fit: contain; width: 100%; }

.article-body { font-size: 1.08rem; }

.article-body > *:first-child { margin-top: 0; }

.article-body p { margin: 0 0 1.35em; }

.article-body h2,
.article-body h3,
.page-content h2,
.page-content h3 { font-family: var(--ncbd-serif); line-height: 1.1; }

.article-body a,
.page-content a { color: var(--ncbd-navy); font-weight: 650; }

.article-footer {
  border-top: 1px solid var(--ncbd-line);
  margin-top: 2.5rem;
  padding-top: 1.25rem;
}

.article-tags { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 1rem 0 0; padding: 0; }

.article-tags a {
  border: 1px solid var(--ncbd-line);
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .04em;
  padding: .3rem .55rem;
  text-decoration: none;
  text-transform: uppercase;
}

.post-navigation { border-top: 1px solid var(--ncbd-line); margin-top: 3rem; padding-top: 2rem; }

.post-navigation .nav-links { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }

.post-navigation a { font-weight: 700; }

.archive-intro { padding-bottom: 1.5rem; }

.archive-title { margin-bottom: .5rem; }

.archive-description { max-width: var(--ncbd-reading); }

.empty-state { grid-column: 1 / -1; background: var(--ncbd-paper); padding: 2rem; }

.search-form { display: flex; gap: .5rem; margin-top: 1rem; }

.search-field { border: 1px solid var(--ncbd-navy); flex: 1; font: inherit; min-width: 0; padding: .75rem; }

.search-submit {
  background: var(--ncbd-navy);
  border: 0;
  color: var(--ncbd-white);
  cursor: pointer;
  font: 700 .8rem/1 var(--ncbd-sans);
  padding: .85rem 1rem;
  text-transform: uppercase;
}

.site-footer { background: var(--ncbd-navy); color: var(--ncbd-white); margin-top: auto; }

.footer-inner {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(220px, 1fr) 2fr;
  margin: 0 auto;
  max-width: var(--ncbd-max);
  padding: 3rem 1.5rem;
}

.footer-logo { filter: brightness(0) invert(1); max-width: 390px; opacity: .94; }

.footer-nav { display: flex; flex-wrap: wrap; gap: .65rem 1.2rem; justify-content: flex-end; }

.footer-nav a { font-size: .82rem; font-weight: 700; text-decoration: none; text-transform: uppercase; }

@media (max-width: 900px) {
  .header-inner { align-items: flex-start; min-height: auto; }
  .brand-link { flex-basis: 390px; }
  .menu-toggle { display: block; flex: 0 0 auto; }
  .primary-nav { display: none; width: 100%; }
  .primary-nav.is-open { display: block; }
  .header-inner { flex-wrap: wrap; }
  .primary-nav ul { align-items: stretch; flex-direction: column; }
  .primary-nav a { display: block; padding: .45rem 0; }
  .primary-nav .nav-cta a { padding: .65rem .75rem; text-align: center; }
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  body { font-size: 17px; }
  .header-inner { padding: 1rem; }
  .brand-link { flex-basis: calc(100% - 96px); }
  .latest-heading-wrap { padding: 1.25rem 1rem .35rem; }
  .latest-heading { font-size: clamp(3.6rem, 20vw, 6rem); }
  .news-field { padding: 1.25rem 1rem 3rem; }
  .news-grid { gap: 1.2rem; grid-template-columns: 1fr; }
  .story-card-body { padding: 1.2rem; }
  .article-wrap, .page-wrap, .archive-intro { padding: 2.5rem 1rem; }
  .article-featured { margin: 1.5rem -1rem 2rem; }
  .post-navigation .nav-links { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; padding: 2.5rem 1rem; }
  .footer-nav { justify-content: flex-start; }
}


/* NCBD submission form */
.page-content .wpcf7 { margin-top: 2rem; }

.ncbd-form-note { color: var(--ncbd-muted); font-size: .95rem; }

.ncbd-form-grid {
  display: grid;
  gap: 1.1rem 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 1.5rem 0;
}

.ncbd-form-grid label {
  display: block;
  font-weight: 700;
}

.ncbd-form-grid .ncbd-form-wide { grid-column: 1 / -1; }

.ncbd-form-grid input:not([type="file"]),
.ncbd-form-grid select,
.ncbd-form-grid textarea,
.ncbd-form-grid input[type="file"] {
  background: var(--ncbd-white);
  border: 1px solid var(--ncbd-line);
  border-radius: 0;
  box-sizing: border-box;
  color: var(--ncbd-ink);
  font: inherit;
  margin-top: .4rem;
  padding: .8rem .9rem;
  width: 100%;
}

.ncbd-form-grid textarea { min-height: 18rem; resize: vertical; }

.wpcf7-acceptance label { align-items: flex-start; display: flex; gap: .65rem; }
.wpcf7-acceptance input { margin-top: .3rem; }

.wpcf7-submit {
  background: var(--ncbd-navy);
  border: 0;
  color: var(--ncbd-white);
  cursor: pointer;
  font: 800 .85rem/1 var(--ncbd-sans);
  letter-spacing: .03em;
  padding: 1rem 1.35rem;
  text-transform: uppercase;
}

.wpcf7-submit:hover,
.wpcf7-submit:focus { background: var(--ncbd-accent); }

.wpcf7 form .wpcf7-response-output { margin: 1.5rem 0 0; padding: .9rem 1rem; }

@media (max-width: 700px) {
  .ncbd-form-grid { grid-template-columns: 1fr; }
  .ncbd-form-grid .ncbd-form-wide { grid-column: auto; }
}


/* Page calls to action */
.page-content .wp-block-button__link,
.page-content .wp-element-button,
.page-content .wp-block-button__link:hover,
.page-content .wp-block-button__link:focus-visible,
.page-content .wp-element-button:hover,
.page-content .wp-element-button:focus-visible {
    color: var(--ncbd-white);
}

/* Footer social links */
.footer-social-link {
    align-items: center;
    display: inline-flex;
    justify-content: center;
}
.footer-social-link svg {
    fill: currentColor;
    height: 1.3rem;
    width: 1.3rem;
}


/* Mobile header and footer alignment */
@media (max-width: 900px) {
  .header-inner {
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  .brand-link {
    flex: none;
    max-width: 390px;
    min-width: 0;
    width: 100%;
  }

  .menu-toggle {
    align-items: center;
    align-self: center;
    background: transparent;
    color: transparent;
    display: inline-flex;
    font-size: 0;
    height: 44px;
    justify-content: center;
    justify-self: end;
    padding: 0;
    position: relative;
    width: 44px;
  }

  .menu-toggle::before {
    background: var(--ncbd-navy);
    border-radius: 2px;
    box-shadow: 0 -8px 0 var(--ncbd-navy), 0 8px 0 var(--ncbd-navy);
    content: "";
    height: 3px;
    width: 30px;
  }

  .menu-toggle:focus-visible {
    outline: 2px solid var(--ncbd-accent);
    outline-offset: 3px;
  }

  .primary-nav {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .footer-inner {
    justify-items: center;
    text-align: center;
  }

  .footer-logo {
    margin-inline: auto;
  }

  .footer-nav {
    align-items: center;
    justify-content: center;
    width: 100%;
  }
}