@charset "utf-8";
/* ==========================================================================
   Interact 2005 — General Modern Stylesheet
   Applies the homepage's modern design system to all other pages
   (Contact Us, Privacy Policy, Archives, etc.)
   Link this AFTER zbench/style.css so it overrides the legacy theme:
   <link rel="stylesheet" type="text/css" href="/css/style-modern.css">
   ========================================================================== */

:root {
  --ink: #0f1216;
  --paper: #faf9f6;
  --card: #ffffff;
  --gold: #d2b064;
  --gold-deep: #a8813f;
  --line: #e7e3da;
  --muted: #5b6068;
  --accent: #171e23;
  --radius: 18px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0 !important;
  font-family: Inter, sans-serif !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  line-height: 1.7 !important;
}

a { color: var(--gold-deep) !important; text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 {
  font-family: "Space Grotesk", sans-serif !important;
  letter-spacing: -0.02em;
}

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

.clear { clear: both; }

/* ---------------- Navigation ----------------
   NOTE: inner pages render #nav with NO wrapper div — it holds
   #menus (which itself contains TWO separate <ul> lists: "Home"
   and the page list) plus an empty #search. There is no
   .nav-inside / #menus-dt like the homepage markup implies, so
   we style the real elements directly and use #nav itself as the
   flex/centering container. */
#nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(23, 30, 35, 0.92) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(210, 176, 100, 0.25);
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* keep an optional .nav-inside working too, in case a page does wrap it */
.nav-inside {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

#menus, #menus-dt {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

/* #menus wraps two <ul> elements as flex children — flatten them
   into the same row and strip their own list styling too */
#menus ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

#menus li a, #menus-dt li a {
  color: rgb(242, 238, 227) !important;
  font-weight: 500;
  font-size: 0.92rem;
  padding: 9px 16px;
  border-radius: 999px;
  display: inline-block;
  transition: 0.25s;
}

#menus li a:hover, #menus-dt li a:hover,
#menus li.current_page_item a, #menus-dt li.current_page_item a {
  background: var(--gold) !important;
  color: rgb(23, 30, 35) !important;
  text-decoration: none;
}

#menus-m { display: none; list-style: none; margin: 0; padding: 0; }
#search:empty { display: none; }

/* ---------------- Header ----------------
   NOTE: inner pages render #header WITHOUT a .site_title wrapper —
   h1/h2 sit as direct children of #header, followed by a
   div.clear. Style those elements directly. Also #header sits
   INSIDE #wrapper alongside #content and #sidebar-border (unlike
   the homepage, where header lives outside wrapper), so it must
   span the full grid width or the 2-column grid mis-places it. */
#header {
  background: linear-gradient(135deg, rgb(23, 30, 35) 0%, rgb(36, 46, 54) 60%, rgb(23, 30, 35) 100%) !important;
  padding: 70px 40px 90px;
  position: relative;
  overflow: hidden;
  grid-column: 1 / -1;
  border-radius: var(--radius) var(--radius) 0 0;
  margin-bottom: -46px;
  z-index: 2;
}

#header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(210, 176, 100, 0.18), transparent 55%);
}

#header h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  margin: 0;
  color: rgb(255, 255, 255) !important;
  position: relative;
  z-index: 2;
}

#header h1 a { color: rgb(255, 255, 255) !important; }

#header h1::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  background: var(--gold);
  margin-top: 18px;
  border-radius: 2px;
}

#header h2:not(:empty) {
  color: rgb(200, 205, 210) !important;
  font-family: Inter, sans-serif !important;
  font-weight: 400;
  font-size: 1.05rem;
  margin: 16px 0 0;
  position: relative;
  z-index: 2;
}

#header h2:empty { display: none; }
#header .clear { display: none; }

/* backward-compat: still support .site_title if some page has it */
.site_title { max-width: 1180px; margin: 0 auto; position: relative; z-index: 2; }
.site_title h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin: 0; color: rgb(255, 255, 255) !important; }
.site_title h1 a { color: rgb(255, 255, 255) !important; }
.site_title h2 { color: rgb(200, 205, 210) !important; font-weight: 400; font-size: 1.05rem; margin: 16px 0 0; }

/* ---------------- Layout wrapper ----------------
   #wrapper contains #header, #content, #sidebar-border as direct
   siblings on inner pages. Use named grid areas so header always
   spans the full width regardless of source order, with content
   and sidebar sitting in the row below it. */
#wrapper {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 60px;
  display: grid;
  grid-template-columns: 1fr 340px;
  grid-template-areas: "header header" "content sidebar";
  gap: 32px;
  position: relative;
}

#content {
  grid-area: content;
  background: var(--card) !important;
  border-radius: var(--radius);
  padding: 44px;
  box-shadow: rgba(23, 30, 35, 0.25) 0px 20px 50px -20px;
  position: relative;
  z-index: 5;
}

#sidebar-border { grid-area: sidebar; position: relative; z-index: 5; }

.title {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  margin: 0 0 18px;
  color: var(--ink) !important;
}

.post-info-top {
  display: flex;
  gap: 18px;
  font-size: 0.85rem;
  color: var(--muted) !important;
  padding-bottom: 20px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.post-info-top a { color: var(--muted) !important; }
.post-info-top a:hover { color: var(--gold-deep) !important; }

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

.entry p { margin: 0 0 18px; color: rgb(42, 47, 52) !important; }

.entry b {
  display: inline-block;
  font-family: "Space Grotesk", sans-serif !important;
  color: var(--accent) !important;
  font-size: 1.25rem;
  position: relative;
  padding-left: 16px;
  margin-top: 10px;
}

.entry b::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  background: var(--gold);
  border-radius: 2px;
}

.entry a { border-bottom: 1px dotted var(--gold-deep); }

/* ---------------- Comments ---------------- */
#comments-div {
  margin-top: 40px;
  padding: 26px 30px;
  background: var(--paper) !important;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  border: 1px solid var(--line);
}

#comments-div h2 { margin: 0; font-size: 1.2rem; }

#comments-addcomment a {
  background: var(--accent) !important;
  color: rgb(255, 255, 255) !important;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 0.85rem;
}

#comments-addcomment a:hover { background: var(--gold-deep) !important; text-decoration: none; }

.comment-respond {
  margin-top: 30px;
  padding: 32px;
  background: rgb(23, 30, 35) !important;
  color: rgb(242, 238, 227) !important;
  border-radius: 16px;
}

.comment-reply-title { margin-top: 0; font-size: 1.3rem; color: rgb(255, 255, 255) !important; }
.comment-reply-title small a { color: var(--gold) !important; }

.comment-form label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: rgb(200, 205, 210) !important;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: rgb(242, 238, 227);
  font-family: Inter, sans-serif;
  margin-top: 6px;
}

.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--gold);
}

.comment-form input[type="submit"] {
  background: var(--gold);
  color: rgb(23, 30, 35);
  font-weight: 600;
  padding: 11px 22px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: 0.25s;
}

.comment-form input[type="submit"]:hover { background: var(--gold-deep); color: #fff; }

.smilies { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0; }
.smilies img { opacity: 0.75; transition: opacity 0.2s; }
.smilies img:hover { opacity: 1; }

.comment-note {
  font-size: 0.8rem;
  color: rgb(154, 161, 168);
  background: rgba(255, 255, 255, 0.05);
  padding: 14px;
  border-radius: 10px;
}

.comment-note code { color: rgb(210, 176, 100); word-break: break-all; }

/* ---------------- Sidebar / Widgets ---------------- */
#sidebar-border { position: relative; }

.rss {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: rgb(23, 30, 35);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 10px 18px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.rss:hover { text-decoration: none; background: var(--gold-deep); color: rgb(255, 255, 255); }

.widget {
  background: var(--card) !important;
  border-radius: 16px;
  padding: 26px;
  margin-bottom: 22px;
  box-shadow: rgba(23, 30, 35, 0.25) 0px 10px 30px -18px;
  border: 1px solid var(--line);
}

.widgettitle {
  font-size: 1rem;
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent) !important;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--gold);
  display: inline-block;
}

.widget ul { list-style: none !important; margin: 0; padding: 0; }
.widget ul li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.widget ul li:last-child { border-bottom: none; }
.widget ul li a { color: var(--ink) !important; }
.widget ul li a:hover { color: var(--gold-deep) !important; }

#calendar_wrap table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
#calendar_wrap caption { font-weight: 600; padding-bottom: 10px; color: var(--accent) !important; }
#calendar_wrap th { color: var(--muted) !important; padding: 6px 0; font-weight: 500; }
#calendar_wrap td { text-align: center; padding: 7px 0; border-radius: 6px; color: rgb(42, 47, 52); }
#calendar_wrap td#today { background: var(--gold) !important; color: rgb(23, 30, 35) !important; font-weight: 700; }
#calendar_wrap tfoot a { font-size: 0.78rem; }

.textwidget li { list-style: none; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.textwidget li:last-child { border-bottom: none; }

#recentcomments li { font-size: 0.85rem; color: var(--muted) !important; }
#recentcomments li a { color: var(--ink) !important; }

/* ---------------- Contact Form 7 styling ---------------- */
.wpcf7 { margin-top: 10px; }

.wpcf7-form p { margin: 0 0 18px; }

.wpcf7-form label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted) !important;
  margin-bottom: 8px;
}

.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%;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, sans-serif;
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(210, 176, 100, 0.2);
}

.wpcf7-form textarea { min-height: 160px; resize: vertical; }

.wpcf7-form input[type="submit"] {
  background: var(--accent);
  color: rgb(255, 255, 255);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 13px 28px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: 0.25s;
}

.wpcf7-form input[type="submit"]:hover { background: var(--gold-deep); }

.wpcf7-not-valid-tip {
  color: #c0392b;
  font-size: 0.8rem;
  margin-top: 6px;
  display: block;
}

.wpcf7-response-output {
  margin-top: 20px;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 0.85rem;
  border: 1px solid var(--line);
}

/* ---------------- Static / legal pages (Privacy Policy, etc.) ---------------- */
.entry ul, .entry ol { margin: 0 0 18px; padding-left: 22px; color: rgb(42, 47, 52); }
.entry ul li, .entry ol li { margin-bottom: 8px; }
.entry h3 { color: var(--accent) !important; margin: 30px 0 14px; font-size: 1.3rem; }

/* ---------------- Footer ---------------- */
#footer { background: var(--accent) !important; color: rgb(200, 205, 210) !important; padding: 34px 24px; text-align: center; }
#footer-inside p { margin: 0 0 8px; font-size: 0.9rem; }
#footer-inside a { color: var(--gold) !important; }
#back-to-top a { color: var(--gold) !important; }

/* ---------------- Responsive ---------------- */
@media (max-width: 960px) {
  #wrapper { grid-template-columns: 1fr; grid-template-areas: "header" "content" "sidebar"; }
  #header { margin-bottom: -30px; }
  #content { padding: 28px; }
}

@media (max-width: 640px) {
  #menus, #menus-dt { gap: 2px; }
  #menus li a, #menus-dt li a { padding: 7px 11px; font-size: 0.82rem; }
  #header { padding: 50px 20px 70px; }
  .comment-respond, .wpcf7-form { padding: 22px; }
}