/*
Theme Name: Systemsgrit
Theme URI: https://systemsgritlabs.com
Author: Systemsgrit Ltd
Description: Custom theme for Systemsgrit Ltd — senior AI and security advisory.
Version: 0.1.0
Requires PHP: 8.0
Text Domain: systemsgrit
*/

:root {
  --accent: #b3852b;
  --accent-2: #a9761d;
  --navy: #14171f;
  --navy-2: #191c24;
  --navy-3: #1c1f29;
  --cream: #f6f3ec;
  --bg: #faf8f4;
  --line: #e7e1d6;
  --ink: #191b21;
  --muted: #565963;
  --muted-dark: #b7bac4;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}
h1, h2, h3 { font-family: "Source Serif 4", Georgia, serif; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
a.textlink { color: #6b4a12; text-decoration: underline; text-underline-offset: 2px; } /* darkened + underlined: WCAG requires a non-color cue for links inline with body text */
a.textlink:hover { color: #4a3208; }
img { max-width: 100%; }
.container { max-width: 1180px; margin: 0 auto; padding-left: 48px; padding-right: 48px; }
.show-mobile { display: none; }
@media (max-width: 900px) {
  .container { padding-left: 24px; padding-right: 24px; }
  .hide-mobile { display: none !important; }
  .show-mobile { display: inline-flex !important; }
  .stack-mobile { flex-direction: column !important; }
  .grid-mobile-1 { grid-template-columns: 1fr !important; }
}
.mobile-menu-toggle {
  background: none; border: 1px solid var(--line); border-radius: 3px; padding: 8px 10px;
  color: var(--ink); align-items: center; justify-content: center; cursor: pointer;
}
.mobile-menu-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mobile-menu {
  border-top: 1px solid var(--line); background: var(--bg);
  padding: 20px 24px 24px; flex-direction: column; gap: 4px;
}
.mobile-menu:not([hidden]) { display: flex; }
.mobile-menu-list { display: flex; flex-direction: column; }
.mobile-menu-list-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mobile-menu-list-items li { border-bottom: 1px solid var(--line); }
.mobile-menu-list-items a { display: block; padding: 14px 4px; font-size: 16px; color: var(--ink); }
.mobile-menu-list-items li.current-menu-item a,
.mobile-menu-list-items li.current_page_item a { color: #6b4a12; font-weight: 600; }
@media (max-width: 480px) {
  .nav-inner { gap: 8px; height: auto; padding-top: 14px; padding-bottom: 14px; }
  .brand-name { font-size: 17px; }
  .nav-inner .btn-primary { padding: 9px 12px; font-size: 12px; }
}

.nav { width: 100%; background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-name { font-family: "Source Serif 4", serif; font-size: 21px; letter-spacing: 0.04em; font-weight: 600; }
.nav-links { display: flex; align-items: center; }
.nav-links-list { display: flex; align-items: center; gap: 36px; font-size: 15px; color: #4a4d57; list-style: none; margin: 0; padding: 0; }
.nav-links-list a { display: block; }
.nav-links-list a.active,
.nav-links-list li.current-menu-item a,
.nav-links-list li.current_page_item a { color: #6b4a12; font-weight: 600; } /* nav bg is always light; darkened for WCAG AA */

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link.screen-reader-text:focus {
  position: fixed !important; top: 8px; left: 8px; width: auto; height: auto;
  padding: 12px 18px; background: var(--navy); color: var(--cream);
  z-index: 999; border-radius: 3px; clip: auto; font-size: 14px; font-weight: 600;
}
.btn-primary {
  background: var(--accent); color: #1c1305; padding: 12px 22px; border-radius: 3px;
  font-size: 14px; font-weight: 600; white-space: nowrap; display: inline-block; border: none; cursor: pointer;
  font-family: inherit;
}
.btn-primary.lg { padding: 15px 28px; font-size: 15px; }
.btn-outline {
  border: 1px solid #454956; color: var(--cream); padding: 15px 28px; border-radius: 3px;
  font-size: 15px; font-weight: 500; display: inline-block;
}
.btn-dark {
  background: #1c1305; color: var(--cream); padding: 15px 30px; border-radius: 3px;
  font-size: 15px; font-weight: 600; white-space: nowrap; display: inline-block;
}

.footer { width: 100%; background: var(--navy); padding: 64px 0 32px; }
.footer-top { display: flex; justify-content: space-between; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid #2b2e38; }
.footer-brand { max-width: 280px; display: flex; flex-direction: column; gap: 14px; }
.footer-cols { display: flex; gap: 64px; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col .label { font-size: 13px; color: #8b8e98; font-weight: 600; margin-bottom: 4px; }
.footer-col a, .footer-col div.item { font-size: 14px; color: #d8dae1; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 24px; font-size: 13px; color: #8b8e98; }
.footer-bottom .legal { display: flex; gap: 24px; }

section.eyebrow, .eyebrow { font-size: 13px; letter-spacing: 0.14em; color: var(--accent); font-weight: 600; }

/* Systemsgrit x WPForms — full brand pass, replacing WPForms' default UI kit */
.wpforms-container { font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif !important; }

.wpforms-container .wpforms-field { padding: 0 0 22px 0 !important; }

.wpforms-container .wpforms-field-label {
  font-family: "IBM Plex Sans", sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #191b21 !important;
  letter-spacing: 0.01em;
  margin-bottom: 8px !important;
}
.wpforms-container .wpforms-field-required { color: #a9761d !important; }
.wpforms-container .wpforms-field-sublabel {
  font-size: 12px !important;
  color: #6b6e78 !important;
  margin-top: 5px !important;
}

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="url"],
.wpforms-container input[type="number"],
.wpforms-container select,
.wpforms-container textarea {
  border: 1px solid #d8d0bd !important;
  border-radius: 4px !important;
  padding: 13px 14px !important;
  font-size: 15px !important;
  color: #191b21 !important;
  background-color: #fff !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: none !important;
}
.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder { color: #9497a1 !important; opacity: 1; }

.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(179, 133, 43, 0.15) !important;
}

.wpforms-container select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23565963' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
  padding-right: 40px !important;
}

.wpforms-container .wpforms-field-row {
  display: flex !important;
  gap: 16px !important;
  width: 100% !important;
  justify-content: flex-start !important;
}
.wpforms-container .wpforms-field-row::before,
.wpforms-container .wpforms-field-row::after {
  content: none !important;
  display: none !important;
}
.wpforms-container .wpforms-field-row .wpforms-field-row-block {
  padding: 0 !important;
  margin: 0 !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  float: none !important;
  width: auto !important;
}

/* Submit button — matches Systemsgrit's primary CTA styling exactly */
.wpforms-container .wpforms-submit-container button[type="submit"],
.wpforms-container button.wpforms-submit {
  background-color: var(--accent) !important;
  border: none !important;
  border-radius: 3px !important;
  color: #1c1305 !important;
  font-family: "IBM Plex Sans", sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 15px 28px !important;
  transition: background-color 0.15s ease;
}
.wpforms-container .wpforms-submit-container button[type="submit"]:hover,
.wpforms-container button.wpforms-submit:hover {
  background-color: #a9761d !important;
}

.wpforms-container .wpforms-error-container,
.wpforms-container label.wpforms-error {
  color: #c0392b !important;
  font-size: 13px !important;
  margin-top: 6px !important;
}
.wpforms-container .wpforms-field.wpforms-has-error input,
.wpforms-container .wpforms-field.wpforms-has-error select,
.wpforms-container .wpforms-field.wpforms-has-error textarea {
  border-color: #c0392b !important;
}

/* Blog content -- styles any post written in the plain block editor (headings,
   paragraphs, lists, quotes, images, tables, FAQ details/summary) so a future
   author never has to hand-write inline styles to match the site's design. */
.entry-content { display: flex; flex-direction: column; gap: 22px; }
.entry-content > *:first-child { margin-top: 0; }
.entry-content p { font-size: 16.5px; line-height: 1.8; color: #33353d; margin: 0; }
.entry-content h2 { font-family: "Source Serif 4", Georgia, serif; font-size: 22px; font-weight: 500; color: #191b21; margin-top: 12px; }
.entry-content h3 { font-size: 18px; font-weight: 600; color: #191b21; margin-top: 6px; }
.entry-content ul, .entry-content ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.entry-content li { font-size: 16px; line-height: 1.7; color: #33353d; }
.entry-content a { color: #6b4a12; text-decoration: underline; text-underline-offset: 2px; }
.entry-content a:hover { color: #4a3208; }
.entry-content strong { color: #191b21; }
.entry-content blockquote {
  padding: 24px; background: #faf5ea; border-left: 3px solid #b3852b; border-radius: 4px;
  margin: 4px 0; font-size: 16px; line-height: 1.65; color: #33353d;
}
.entry-content blockquote p { font-size: inherit; line-height: inherit; }
.entry-content img { max-width: 100%; border-radius: 4px; display: block; }
.entry-content figure { margin: 8px 0; }
.entry-content figcaption { font-size: 12px; color: #5b5e68; margin-top: 8px; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 15px; }
.entry-content table th, .entry-content table td { padding: 10px 12px; border: 1px solid #e7e1d6; text-align: left; }
.entry-content details { border-bottom: 1px solid #e7e1d6; padding: 16px 0; }
.entry-content summary { font-size: 16px; font-weight: 600; color: #191b21; cursor: pointer; }
.entry-content details p { margin-top: 10px; font-size: 15px; }
.entry-content hr { border: none; border-top: 1px solid #e7e1d6; margin: 8px 0; }

.cat-chip {
  padding: 8px 16px; border: 1px solid #e7e1d6; border-radius: 20px;
  font-size: 13px; color: #33353d; background: #fff;
}
.cat-chip:hover { border-color: #b3852b; color: #6b4a12; }
.cat-chip.active { background: #14171f; color: #f6f3ec; border-color: #14171f; }

.sg-pagination { display: flex; gap: 8px; margin-top: 48px; flex-wrap: wrap; }
.sg-pagination a, .sg-pagination span.current {
  padding: 10px 16px; border: 1px solid #e7e1d6; border-radius: 3px;
  font-size: 14px; color: #33353d;
}
.sg-pagination span.current { background: #14171f; color: #f6f3ec; border-color: #14171f; }
.sg-pagination a:hover { border-color: #b3852b; color: #6b4a12; }

.sg-embed-loading {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; color: #565963; font-size: 14px;
}
.sg-embed-spinner {
  width: 32px; height: 32px; border: 3px solid #e7e1d6; border-top-color: #b3852b;
  border-radius: 50%; animation: sg-spin 0.8s linear infinite;
}
@keyframes sg-spin { to { transform: rotate(360deg); } }

/* Insights newsletter signup -- an accordion reveal beneath the CTA row.
   Collapsed by default (hidden attribute, removed from the a11y tree and tab
   order); opening removes `hidden` then adds .is-open on the next frame so
   the browser animates from the true starting state instead of snapping. */
.insights-subscribe-toggle { flex-shrink: 0; }
.insights-subscribe-toggle[hidden] { display: none; }
.insights-subscribe-panel {
  max-height: 0; opacity: 0; transform: translateY(-6px); margin-top: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.25s ease, margin-top 0.35s ease;
}
.insights-subscribe-panel.is-open {
  max-height: 440px; opacity: 1; transform: translateY(0); margin-top: 24px;
}
.insights-subscribe-panel-inner {
  position: relative;
  background: #faf5ea; border: 1px solid #eee6d6; border-radius: 4px;
  padding: 24px 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}

.insights-subscribe-form { width: 100%; max-width: 440px; }
.insights-subscribe-form .wpforms-container { margin: 0 !important; }
.insights-subscribe-form form { display: flex !important; flex-direction: column; gap: 14px; }
.insights-subscribe-form .wpforms-field-container { margin: 0 !important; display: flex; flex-direction: column; gap: 14px; }
.insights-subscribe-form .wpforms-field { padding: 0 !important; width: 100%; }
.insights-subscribe-form .wpforms-field input {
  width: 100%; padding: 12px 14px !important; border-radius: 3px !important; font-size: 14px !important;
  background-color: #fff !important;
}
.insights-subscribe-form .wpforms-submit-container {
  margin: 0 !important; padding: 0 !important; display: block !important; width: auto;
}
.insights-subscribe-panel .insights-subscribe-panel-inner .insights-subscribe-form button[type="submit"] {
  width: auto; padding: 9px 14px !important; white-space: nowrap;
  background-color: #b3852b !important; color: #1c1305 !important;
}
.insights-subscribe-panel .insights-subscribe-panel-inner .insights-subscribe-form button[type="submit"]:hover { background-color: #a9761d !important; }
.insights-subscribe-form .wpforms-confirmation-container-full {
  background: transparent !important; border: none !important; padding: 6px 0 !important;
  color: #1c1305 !important; font-weight: 600 !important; font-size: 15px !important;
}
.insights-subscribe-cancel {
  background: none; border: none; padding: 4px; cursor: pointer;
  color: #565963; font-size: 13px; text-decoration: none; text-underline-offset: 2px;
  font-family: inherit;
}
.insights-subscribe-cancel:hover,
.insights-subscribe-cancel:focus-visible { color: #33353d; text-decoration: underline; }
@media (min-width: 901px) {
  .insights-subscribe-cancel { position: absolute; top: 24px; right: 28px; }
}
@media (max-width: 900px) {
  .insights-subscribe-panel-inner { padding: 20px; }
}

.wpforms-confirmation-container-full {
  background: #faf5ea !important;
  border: 1px solid #e7e1d6 !important;
  border-radius: 4px !important;
  padding: 24px !important;
  color: #191b21 !important;
}