/* ==========================================================================
   Interact 2005 — Sitewide General Stylesheet (v2)
   Works with the real zBench theme markup on every page (Home, Contact Us,
   Privacy Policy, single posts). Does NOT depend on extra wrapper divs or
   ids that only exist on one page (no .nav-inside, no #menus-dt/#menus-m
   assumptions) — only on selectors present in every page's HTML.
   Drop into /wp-content/themes/zbench/ (or /css/) and link on every page.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

* {
  box-sizing: border-box !important;
}

html {
  scroll-behavior: smooth !important;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Inter', Arial, sans-serif !important;
  background: #faf9f6 !important;
  color: #0f1216 !important;
  line-height: 1.7 !important;
}

a {
  color: #a8813f !important;
  text-decoration: none !important;
}

a:hover {
  text-decoration: underline !important;
}

h1, h2, h3, h4 {
  font-family: 'Space Grotesk', Arial, sans-serif !important;
  letter-spacing: -0.02em !important;
  color: #0f1216 !important;
}

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

.clear {
  clear: both !important;
}

/* ==========================================================================
   NAV — targets #nav > #menus > ul > li > a directly.
   No dependency on .nav-inside, #menus-dt or #menus-m (those don't exist
   on every page). Works whether there are one or several <ul> inside #menus.
   ========================================================================== */
#nav {
  background: #171e23 !important;
  border-bottom: 1px solid rgba(210,176,100,0.25) !important;
  overflow: hidden !important;
  width: 100% !important;
}

#nav #menus {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 14px 24px !important;
  overflow: hidden !important;
}

#nav #menus ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: left !important;
}

#nav #menus ul li {
  float: left !important;
  margin: 0 6px 0 0 !important;
  list-style: none !important;
}

#nav #menus ul li a {
  color: #f2eee3 !important;
  font-weight: 500 !important;
  font-size: 0.92rem !important;
  padding: 9px 16px !important;
  border-radius: 999px !important;
  display: inline-block !important;
}

#nav #menus ul li a:hover,
#nav #menus ul li.current_page_item a {
  background: #d2b064 !important;
  color: #171e23 !important;
  text-decoration: none !important;
}

#search {
  display: none !important;
}

/* ==========================================================================
   HEADER — always its own full-width dark band, regardless of whether the
   theme places it before #wrapper (homepage) or inside #wrapper
   (contact/privacy pages). No negative-margin overlap trick, so it can't
   break depending on nesting.
   ========================================================================== */
#header {
  display: block !important;
  width: 100% !important;
  background: #171e23 !important;
  background-image: linear-gradient(135deg, #171e23 0%, #242e36 60%, #171e23 100%) !important;
  padding: 60px 24px 70px !important;
  margin: 0 0 40px 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* If #header ends up nested inside #wrapper (which has max-width + padding),
   pull it back out to full width and cancel the parent's padding on its
   own row using negative margins matched to the wrapper's padding. */
#wrapper > #header {
  margin-left: -24px !important;
  margin-right: -24px !important;
  width: calc(100% + 48px) !important;
}

#header h1,
.site_title h1 {
  font-size: 2.4rem !important;
  margin: 0 !important;
  color: #ffffff !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#header h1 a,
.site_title h1 a {
  color: #ffffff !important;
}

#header h2,
.site_title h2 {
  max-width: 1180px !important;
  margin: 16px auto 0 !important;
  color: #c8cdd2 !important;
  font-family: 'Inter', Arial, sans-serif !important;
  font-weight: 400 !important;
  font-size: 1.05rem !important;
}

#header h2:empty,
.site_title h2:empty {
  margin: 0 !important;
}

/* ==========================================================================
   LAYOUT — float based, works whether #wrapper contains #header + #content
   + #sidebar-border, or just #content + #sidebar-border.
   ========================================================================== */
#wrapper {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 24px 60px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#content {
  float: left !important;
  width: 66% !important;
  background: #ffffff !important;
  border-radius: 18px !important;
  padding: 44px !important;
  margin-right: 32px !important;
  box-shadow: 0 20px 50px -20px rgba(23,30,35,0.25) !important;
  box-sizing: border-box !important;
}

#sidebar-border {
  float: right !important;
  width: 30% !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   POST / ENTRY CONTENT
   ========================================================================== */
.title {
  font-size: 2rem !important;
  margin: 0 0 18px !important;
  color: #0f1216 !important;
}

.post-info-top {
  overflow: hidden !important;
  font-size: 0.85rem !important;
  color: #5b6068 !important;
  padding-bottom: 20px !important;
  margin-bottom: 28px !important;
  border-bottom: 1px solid #e7e3da !important;
}

.post-info-top span {
  float: left !important;
  margin-right: 18px !important;
}

.post-info-top a {
  color: #5b6068 !important;
}

.post-info-top a:hover {
  color: #a8813f !important;
}

.entry img.aligncenter {
  margin: 0 auto 8px !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.2) !important;
}

.entry p {
  margin: 0 0 18px !important;
  color: #2a2f34 !important;
}

.entry b {
  display: inline-block !important;
  font-family: 'Space Grotesk', Arial, sans-serif !important;
  color: #171e23 !important;
  font-size: 1.25rem !important;
  padding-left: 16px !important;
  margin-top: 10px !important;
  border-left: 4px solid #d2b064 !important;
}

.entry a {
  border-bottom: 1px dotted #a8813f !important;
}

/* ==========================================================================
   CONTACT FORM 7 — styling for the .wpcf7 form used on Contact Us
   ========================================================================== */
.wpcf7 {
  font-size: 0.95rem !important;
}

.wpcf7-form p {
  margin: 0 0 16px !important;
}

.wpcf7-form label {
  display: block !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #5b6068 !important;
  margin-bottom: 6px !important;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.wpcf7-form select {
  width: 100% !important;
  padding: 12px 14px !important;
  border: 1px solid #e7e3da !important;
  border-radius: 10px !important;
  background: #faf9f6 !important;
  color: #0f1216 !important;
  font-family: 'Inter', Arial, sans-serif !important;
  font-size: 0.95rem !important;
  box-sizing: border-box !important;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
  outline: none !important;
  border-color: #d2b064 !important;
  background: #ffffff !important;
}

.wpcf7-form textarea {
  min-height: 140px !important;
  resize: vertical !important;
}

.wpcf7-form input[type="submit"] {
  background: #171e23 !important;
  color: #ffffff !important;
  border: none !important;
  padding: 12px 28px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}

.wpcf7-form input[type="submit"]:hover {
  background: #a8813f !important;
}

.wpcf7-response-output {
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 0.85rem !important;
  margin-top: 16px !important;
}

/* ==========================================================================
   COMMENTS
   ========================================================================== */
#comments-div {
  margin-top: 40px !important;
  padding: 26px 30px !important;
  background: #faf9f6 !important;
  border-radius: 14px !important;
  border: 1px solid #e7e3da !important;
  overflow: hidden !important;
}

#comments-div h2 {
  margin: 0 !important;
  font-size: 1.2rem !important;
  float: left !important;
}

#comments-addcomment {
  float: right !important;
}

#comments-addcomment a {
  background: #171e23 !important;
  color: #ffffff !important;
  padding: 9px 18px !important;
  border-radius: 999px !important;
  font-size: 0.85rem !important;
}

#comments-addcomment a:hover {
  background: #a8813f !important;
  text-decoration: none !important;
}

.comment-respond {
  margin-top: 30px !important;
  padding: 32px !important;
  background: #171e23 !important;
  color: #f2eee3 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

.comment-reply-title {
  margin-top: 0 !important;
  font-size: 1.3rem !important;
  color: #ffffff !important;
}

.comment-reply-title small a {
  color: #d2b064 !important;
}

.comment-form label {
  font-size: 0.78rem !important;
  letter-spacing: 0.08em !important;
  color: #c8cdd2 !important;
}

.smilies {
  overflow: hidden !important;
  margin: 16px 0 !important;
}

.smilies a {
  float: left !important;
  margin: 0 6px 6px 0 !important;
}

.smilies img {
  opacity: 0.75 !important;
}

.smilies img:hover {
  opacity: 1 !important;
}

.comment-note {
  font-size: 0.8rem !important;
  color: #9aa1a8 !important;
  background: rgba(255,255,255,0.05) !important;
  padding: 14px !important;
  border-radius: 10px !important;
}

.comment-note code {
  color: #d2b064 !important;
  word-break: break-all !important;
}

/* ==========================================================================
   SIDEBAR / WIDGETS
   ========================================================================== */
.rss, .rss_text, #rss_wrap a {
  display: inline-block !important;
  background: #d2b064 !important;
  color: #171e23 !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  margin-bottom: 20px !important;
}

.rss:hover, #rss_wrap a:hover {
  text-decoration: none !important;
  background: #a8813f !important;
  color: #ffffff !important;
}

.widget {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 26px !important;
  margin-bottom: 22px !important;
  box-shadow: 0 10px 30px -18px rgba(23,30,35,0.25) !important;
  border: 1px solid #e7e3da !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.widgettitle {
  font-size: 1rem !important;
  margin: 0 0 16px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #171e23 !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid #d2b064 !important;
  display: inline-block !important;
}

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

.widget ul li {
  padding: 9px 0 !important;
  border-bottom: 1px solid #e7e3da !important;
  font-size: 0.92rem !important;
  list-style: none !important;
}

.widget ul li:last-child {
  border-bottom: none !important;
}

.widget ul li a {
  color: #0f1216 !important;
}

.widget ul li a:hover {
  color: #a8813f !important;
}

#calendar_wrap table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 0.85rem !important;
}

#calendar_wrap caption {
  font-weight: 600 !important;
  padding-bottom: 10px !important;
  color: #171e23 !important;
}

#calendar_wrap th {
  color: #5b6068 !important;
  padding: 6px 0 !important;
  font-weight: 500 !important;
}

#calendar_wrap td {
  text-align: center !important;
  padding: 7px 0 !important;
  border-radius: 6px !important;
  color: #2a2f34 !important;
}

#calendar_wrap td a {
  color: #a8813f !important;
  font-weight: 600 !important;
}

#calendar_wrap td#today {
  background: #d2b064 !important;
  color: #171e23 !important;
  font-weight: 700 !important;
}

#calendar_wrap tfoot a {
  font-size: 0.78rem !important;
}

/* Blogroll widget: <li> tags sit directly inside .textwidget without a
   wrapping <ul> in the real markup — style the li directly instead of
   assuming a ul parent. */
.textwidget {
  display: block !important;
}

.textwidget ul,
.textwidget {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.textwidget li {
  display: block !important;
  list-style: none !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid #e7e3da !important;
  font-size: 0.9rem !important;
}

.textwidget li:last-child {
  border-bottom: none !important;
}

#recentcomments li {
  font-size: 0.85rem !important;
  color: #5b6068 !important;
}

#recentcomments li a {
  color: #0f1216 !important;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
#footer {
  background: #171e23 !important;
  color: #c8cdd2 !important;
  padding: 34px 24px !important;
  text-align: center !important;
  clear: both !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#footer-inside p {
  margin: 0 0 8px !important;
  font-size: 0.9rem !important;
}

#footer-inside a {
  color: #d2b064 !important;
}

#back-to-top a {
  color: #d2b064 !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 960px) {
  #content {
    float: none !important;
    width: 100% !important;
    margin-right: 0 !important;
    padding: 28px !important;
  }
  #sidebar-border {
    float: none !important;
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  #nav #menus ul li a {
    padding: 7px 11px !important;
    font-size: 0.82rem !important;
  }
  #header {
    padding: 40px 20px 50px !important;
  }
  .comment-respond {
    padding: 22px !important;
  }
}