/*
Theme Name: MCT Cyber Ocean
Description: Custom dark theme for My Computer Therapy
Template: generatepress
Version: 1.1
*/

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

:root {
  --background-dark: #0a0d13;
  --surface-dark: #12151a;
  --background-light: #ffffff;
  --text-light: #ecf0f3;
  --text-dark: #000000;
  --text-primary: #d0dbe3;
  --accent-primary: #14d6f5;
  --accent-secondary: #00ffbb;
  --accent-tertiary: #aa8cff;
  --border-radius: 14px;
  --shadow: 0 10px 50px rgba(0,0,0,0.8);
  --blur: 12px;
}

/* ============================= */
/* 🌐 Global Reset + Base Styles */
/* ============================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--background-dark);
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

/* ============================= */
/* 🏛️ Containers                */
/* ============================= */

.site-header,
.site-footer,
.container,
.single-post-container {
  background: var(--surface-dark);
  color: var(--text-light);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--blur));
  padding: 40px;
  margin: 30px auto;
  max-width: 1100px;
}

/* ============================= */
/* 🧭 Navigation                 */
/* ============================= */

.nav-menu,
.footer-menu {
  display: flex;
  gap: 20px;
  justify-content: center;
  list-style: none;
  padding: 0;
}

.nav-menu a,
.footer-menu a {
  color: var(--text-light);
  text-decoration: none;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 10px;
  transition: background 0.3s ease;
}

.nav-menu a:hover,
.footer-menu a:hover {
  background: var(--accent-secondary);
  color: var(--text-dark);
}

/* ============================= */
/* 🎯 Buttons & CTAs             */
/* ============================= */

.mct-cta,
.read-more {
  display: inline-block;
  padding: 12px 20px;
  margin: 10px 0;
  border-radius: var(--border-radius);
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
}

.mct-cta {
  background: var(--accent-tertiary);
  color: var(--background-light);
}

.mct-cta.alt {
  background: var(--accent-primary);
  color: var(--text-dark);
}

.mct-cta.contact {
  background: var(--accent-secondary);
  color: var(--surface-dark);
}

.mct-cta:hover,
.read-more:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px var(--accent-primary);
}

.read-more {
  background: var(--accent-primary);
  color: var(--text-dark);
}

.read-more:hover {
  background: var(--accent-secondary);
}

/* ============================= */
/* 🖼️ Hero + Sections           */
/* ============================= */

.hero-slide {
  text-align: center;
  padding: 80px 20px;
  background: var(--background-dark);
  color: var(--text-light);
}

.section-slide,
.cta-slide,
.contact-slide {
  margin: 60px auto;
  padding: 40px;
  background: var(--surface-dark);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

/* ============================= */
/* 📝 Post Cards                 */
/* ============================= */

.latest-posts {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  margin-top: 60px;
}

.post-card {
  background: #1a1f27;
  padding: 20px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  max-width: 320px;
  flex: 1 1 300px;
  text-align: center;
}

.post-card img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* ============================= */
/* 📻 Radio Embed                */
/* ============================= */

.radio-container iframe {
  width: 100%;
  height: 150px;
  border: none;
  margin-top: 40px;
  border-radius: var(--border-radius);
}

/* ============================= */
/* 🌊 Shell Layout               */
/* ============================= */

.ocean-shell {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 2fr) 1fr;
  gap: 30px;
  width: 100%;
  margin: 0;
  padding: 0;
}

.left-channel,
.right-channel {
  background: var(--surface-dark);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 30px 20px;
}

.center-channel {
  padding: 30px 20px 0;
  background: transparent;
  max-width: 900px;
  margin: 0 auto;
}

/* ============================= */
/* 📱 Responsive Layout          */
/* ============================= */

@media (max-width: 900px) {
  .ocean-shell {
    grid-template-columns: 1fr;
  }

  .left-channel,
  .right-channel {
    display: none;
  }
}

/* ============================= */
/* 🚫 Remove GeneratePress Limits*/
/* ============================= */

#page.site,
.container {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* ============================= */
/* 🧹 WordPress Editor Styling   */
/* ============================= */

/* Force light background in the block editor */
.editor-styles-wrapper {
  background: var(--background-light) !important;
  color: var(--text-dark) !important;
}

.editor-styles-wrapper p,
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6,
.editor-styles-wrapper li,
.editor-styles-wrapper a {
  color: var(--text-dark) !important;
}

.editor-post-title__block .editor-post-title__input {
  color: var(--text-dark) !important;
}

/* Optionally: Add dark editor mode */
/*
body.block-editor-page.dark-editor .editor-styles-wrapper {
  background: var(--background-dark) !important;
  color: var(--text-primary) !important;
}
*/