/*
Theme Name: Torvexis
Version: 1.1
*/

/* ===== VARIABLES ===== */
:root {
 --primary: #2B3328;
 --accent: #5E6946;
 --dark: #3C493A;
 --attention: #E97451;
 --nav: #2B3328;
 --background: #C1C1BB;
 --surface: #F1F1EA;
 --white: #EBEDEF;
 --black: #1E1E1E;
 --text: #2B3328;
 --muted: #7D7D75;
 --highlight: #E97451;
}

/* ===== GLOBAL STYLES ===== */
body {
 background-color: var(--background);
 color: var(--text);
 font-family: 'Segoe UI', Roboto, sans-serif;
 line-height: 1.6;
 margin: 0;
 padding: 0;
}

body::before {
 content: "";
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: var(--hero-overlay-height, 0px);
 background: var(--primary);
 z-index: -1;
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
 color: var(--primary);
 margin: 0 0 0.5em;
 font-weight: 600;
}

.hero-heading {
 color: var(--white);
 margin: 0 0 0.5em;
 font-weight: 600;
 font-size: 2em;
 line-height: 1.2;
 display: block;
}

.special-header {
 color: var(--white);
}

a {
 color: var(--primary);
 text-decoration: none;
}

a:hover {
 text-decoration: underline;
}

blockquote {
 font-style: italic;
 margin: 1rem 0;
 padding-left: 1rem;
 border-left: 4px solid var(--accent);
}

.text-center {
 text-align: center;
}

.text-muted {
 color: var(--muted);
}

/* ===== COMPONENTS ===== */
button,
input[type="submit"] {
 background-color: var(--attention);
 color: var(--white);
 border: none;
 padding: 0.6em 1.2em;
 border-radius: 4px;
 cursor: pointer;
 font-size: 1em;
}

button:hover,
input[type="submit"]:hover {
 background-color: #d65f40;
}

button:focus,
input[type="submit"]:focus {
 outline: 2px solid var(--attention);
 outline-offset: 2px;
}

.card {
 background-color: var(--surface);
 padding: 1.5rem;
 border-radius: 8px;
 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
 transition: transform 0.2s ease, box-shadow 0.2s ease;
 max-width: 300px;
 flex: 1 1 280px;
}

.card h3 {
 margin-top: 0.5rem;
}

.card p {
 font-size: 0.95rem;
 color: var(--muted);
}

.card-link {
 text-decoration: none !important;
 color: inherit;
 display: block;
 transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-link h3,
.card-link p {
 text-decoration: none !important;
}

.card-link:hover .card {
 transform: translateY(-6px);
 box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.card-link:focus {
 outline: 2px solid var(--attention);
 outline-offset: 2px;
}

/* ===== LAYOUT UTILITIES ===== */
.container {
 max-width: 1200px;
 margin: 0 auto;
 padding: 2rem 1.5rem;
}

.card-wrapper {
 display: flex;
 flex-wrap: wrap;
 gap: 2rem;
 justify-content: center;
 margin-top: 2rem;
}

section > .card-group,
section > .flex-grid,
section > .card-wrapper {
 display: flex;
 flex-wrap: wrap;
 gap: 2rem;
 justify-content: center;
 margin-top: 2rem;
}

/* ===== NAVIGATION ===== */
.sticky-wrapper {
 position: sticky;
 top: 0;
 z-index: 999;
 background: transparent;
 display: flex;
 justify-content: center;
 padding: 0.5rem 1rem;
}

.nav-inner {
 background: var(--white);
 border-radius: 16px;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 padding: 0.75rem 1.5rem;
 display: flex;
 align-items: center;
 justify-content: space-between;
 max-width: 1200px;
 width: 100%;
}

.logo {
 font-weight: bold;
 font-size: 1.3rem;
 color: var(--primary);
}

.nav-inner nav {
 display: flex;
 gap: 1.5rem;
}

.nav-inner nav a {
 color: var(--text);
 text-decoration: none;
 font-weight: 500;
}

.nav-inner nav a:hover {
 color: var(--primary);
 text-decoration: underline;
}

.nav-inner nav a:focus {
 outline: 2px solid var(--attention);
 outline-offset: 2px;
}

/* ===== SECTIONS ===== */
.image-placeholder {
 width: 100%;
 height: 160px;
 background-color: var(--black);
 border-radius: 4px;
 margin-bottom: 1rem;
}

/* ===== BACKGROUND EFFECTS ===== */
.bg-cover {
 position: relative;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 z-index: 0;
}

.bg-cover::before {
 content: "";
 position: absolute;
 inset: 0;
 background-color: var(--black);
 opacity: 0.3;
 z-index: 0;
}

.bg-cover .container {
 position: relative;
 z-index: 1;
}

/* ===== MAJORDOMO PAGE STYLES ===== */

/* Hero */
.mj-hero {
  background: var(--primary);
  padding: 4rem 1.5rem 3rem;
  text-align: center;
}

.mj-hero-inner {
  max-width: 800px;
  margin: 0 auto;
}

.mj-product-name {
  font-size: 3rem;
  font-weight: 700;
  color: var(--white);
  margin: 0;
  letter-spacing: -0.02em;
}

.mj-product-by {
  font-size: 0.95rem;
  color: var(--accent);
  font-weight: 500;
  margin: 0.25rem 0 1.5rem;
  letter-spacing: 0.05em;
}

.mj-tagline {
  font-size: 1.25rem;
  color: var(--background);
  line-height: 1.5;
  max-width: 600px;
  margin: 0 auto 2.5rem;
}

.mj-hero-screenshot {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.mj-hero-screenshot img {
  width: 100%;
  display: block;
}

.mj-hero-screenshot .mj-placeholder {
  height: 400px;
}

/* Placeholders */
.mj-placeholder {
  background: linear-gradient(135deg, var(--dark), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--background);
  font-size: 0.9rem;
  font-style: italic;
  min-height: 200px;
}

/* Section layouts */
.mj-section {
  padding: 4rem 1.5rem;
}

.mj-section-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.mj-section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.mj-section-header h2 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

.mj-section-header p {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 600px;
  margin: 0 auto;
}

/* Alternating feature rows */
.mj-feature-row {
  display: flex;
  align-items: center;
  gap: 3rem;
  margin-bottom: 4rem;
}

.mj-feature-row:last-child {
  margin-bottom: 0;
}

.mj-feature-row.reverse {
  flex-direction: row-reverse;
}

.mj-feature-text {
  flex: 1;
}

.mj-feature-text h3 {
  font-size: 1.35rem;
  margin-bottom: 0.5rem;
}

.mj-feature-text p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

.mj-feature-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.mj-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3em 0.75em;
  border-radius: 4px;
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--background);
}

.mj-feature-image {
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.mj-feature-image img {
  width: 100%;
  display: block;
}

/* Audience cards */
.mj-audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.mj-audience-card {
  background: var(--surface);
  border-radius: 8px;
  padding: 1.75rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.mj-audience-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

.mj-audience-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

.mj-audience-card p {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0;
}

/* Capabilities grid */
.mj-cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
}

.mj-cap-item {
  background: var(--surface);
  border-radius: 8px;
  padding: 1.25rem;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.mj-cap-item h4 {
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
}

.mj-cap-item p {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}

/* Architecture strip */
.mj-arch {
  background: var(--primary);
  padding: 3rem 1.5rem;
}

.mj-arch-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.mj-arch h2 {
  color: var(--white);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.mj-arch p {
  color: var(--background);
  margin-bottom: 2rem;
}

.mj-arch-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.mj-arch-badge {
  background: var(--dark);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.5em 1em;
  border-radius: 6px;
  border: 1px solid var(--accent);
}

/* Footer */
.mj-footer {
  text-align: center;
  padding: 2rem 1.5rem;
  color: var(--muted);
  font-size: 0.85rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .mj-product-name {
    font-size: 2.2rem;
  }

  .mj-tagline {
    font-size: 1.05rem;
  }

  .mj-hero-screenshot .mj-placeholder {
    height: 220px;
  }

  .mj-feature-row,
  .mj-feature-row.reverse {
    flex-direction: column;
  }

  .mj-feature-image {
    width: 100%;
  }

  .nav-inner nav {
    gap: 0.75rem;
  }

  .nav-inner nav a {
    font-size: 0.9rem;
  }
}