/*
 * Theme Stylesheet: DACdbPlus Demo Theme
 *
 * Contains all visual styling for the DACdbPlus shortcode documentation theme.
 * Styles cover layout, header, navigation, shortcode demos, and responsive grid layouts.
 *
 * This file is manually maintained and part of the version-controlled theme package.
 *
 * @author   Rob Moore
 * @company  Member Minder Pro, LLC
 * @license  GPL-2.0-or-later
 * @since    1.2.0
 */

/* --------------------------------------
  Global Styles
-------------------------------------- */
body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f8f8f8;
  overflow-x: hidden; /* Prevent horizontal scrolling when panel is open */
}

main {
  margin: 1rem 2rem;
  transition: margin-right 0.3s ease; /* Smooth transition when panel opens */
}

/* Main content shifts when panel is open */
body.panel-open main {
  margin-right: 320px; /* Match panel width */
}

/* --------------------------------------
  Header
-------------------------------------- */
.site-header {
  background-color: #0f2661;
  color: #fff;
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: padding-right 0.3s ease; /* Smooth transition when panel opens */
}

/* Header also shifts when panel is open */
body.panel-open .site-header {
  padding-right: 320px; /* Match panel width */
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: relative;
}

.site-header h1 {
  margin: 0;
  font-size: 2rem;
}

.site-header a {
  color: #fff;
  text-decoration: none;
}

/* --------------------------------------
  Navigation
-------------------------------------- */
.site-nav {
  display: flex;
  align-items: center;
}

.site-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1rem;
}

.site-nav a {
  color: #fff;
  text-decoration: none;
  padding: 0.5em 1em;
  border-radius: 4px;
}

.site-nav a:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transition: background-color 0.2s ease;
}

/* --------------------------------------
  Shortcodes Panel
-------------------------------------- */
.shortcodes-panel {
  position: fixed;
  top: 0;
  right: -320px; /* Start offscreen */
  width: 320px;
  height: 100vh;
  background: #fff;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.15);
  z-index: 1100;
  transition: right 0.3s ease;
  overflow-y: auto;
}

body.panel-open .shortcodes-panel {
  right: 0; /* Slide in */
}

.shortcodes-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #0f2661;
  color: white;
  position: sticky;
  top: 0;
  z-index: 10;
}

.shortcodes-panel-header h3 {
  margin: 0;
  font-size: 1.2rem;
}

#close-shortcodes-panel {
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  line-height: 1;
}

.shortcodes-panel-content {
  padding: 1rem;
}

.shortcodes-panel-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.shortcodes-panel-content li {
  margin-bottom: 0.75rem;
}

.shortcodes-panel-content a {
  display: block;
  color: #0f2661;
  text-decoration: none;
  padding: 0.5rem;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.shortcodes-panel-content a:hover {
  background: #f0f0f0;
  text-decoration: underline;
}

#shortcodes-panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

body.panel-open #shortcodes-panel-overlay {
  opacity: 1;
  visibility: visible;
}

#shortcodes-panel-toggle {
  cursor: pointer;
}

/* --------------------------------------
  Copyable Shortcode
-------------------------------------- */
.copyable-shortcode {
  display: inline-block;
  cursor: pointer;
  background: #f3f3f3;
  padding: 0.25em 0.5em;
  border-radius: 4px;
  font-family: monospace;
  font-size: 1.2rem;
  white-space: nowrap;
  overflow-x: auto;
  max-width: 100%;
  transition: background 0.2s;
}

.copyable-shortcode:hover,
.copyable-shortcode:focus {
  background: #e0e0e0;
}

.copyable-shortcode.copied {
  background: #d4edda;
  color: #155724;
}

/* --------------------------------------
  Archive: DACdbPlus Function Grid
-------------------------------------- */
.dacdbplus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.dacdbplus-archive-item {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 1rem;
  background: #fff;
  transition: box-shadow 0.2s ease;
}

.dacdbplus-archive-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.dacdbplus-archive-item .function-title a {
  font-size: 1.1rem;
  font-weight: bold;
  text-decoration: none;
  color: #005427;
}

.dacdbplus-archive-item .function-shortcode-wrapper {
  margin-top: 1rem;
  font-family: monospace;
  background: #f3f3f3;
  padding: 0.5rem;
  border-radius: 4px;
  cursor: pointer;
}

/* --------------------------------------
  Single: DACdbPlus Function Layout
-------------------------------------- */
#dacdbplus-single .attribute {
  margin-bottom: 2em;
  padding: 1em;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #f9f9f9;
}

#dacdbplus-single .attribute h3 code {
  font-size: 1.1em;
  background: #e5e5e5;
  padding: 0.1em 0.4em;
  border-radius: 4px;
}

#dacdbplus-single .attribute-flags {
  list-style: none;
  padding: 0;
  margin: 0.5em 0 1em;
  display: flex;
  gap: 1em;
  font-size: 0.9em;
  color: #555;
}

#dacdbplus-single .attribute-values ul {
  padding-left: 1.2em;
}

#dacdbplus-single pre {
  background: #222;
  color: #eee;
  padding: 0.75em;
  border-radius: 4px;
  overflow-x: auto;
}

/* Function details layout - absolute positioning for precise control */
.function-details-grid {
  position: relative;
  margin-top: 2rem;
  min-height: 400px;
}

/* The attributes panel - positioned absolutely */
.function-attributes {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 1rem;
  overflow-y: auto;
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 1;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* The shortcode box with margins to accommodate the attributes panel */
.function-shortcode-box {
  margin-left: 330px; /* 300px width + 30px spacing */
  transition: margin-left 0.3s ease;
}

/* When drawer is closed */
.drawer-closed .function-attributes {
  transform: translateX(-330px);
  opacity: 0;
  pointer-events: none;
}

.drawer-closed .function-shortcode-box {
  margin-left: 0; /* Take up full width */
}

/* For small screens: stack vertically */
@media (max-width: 767px) {
  .function-attributes {
    position: relative;
    width: 100%;
    margin-bottom: 1rem;
  }
  
  .function-shortcode-box {
    margin-left: 0;
    margin-top: 330px; /* Push down when attributes are visible on mobile */
    transition: margin-top 0.3s ease;
  }
  
  .drawer-closed .function-shortcode-box {
    margin-top: 0; /* Remove top margin when drawer is closed */
  }
  
  .drawer-closed .function-attributes {
    transform: translateY(-330px);
  }
  
  /* Adjust panel for mobile */
  .shortcodes-panel {
    width: 280px;
    right: -280px;
  }
  
  body.panel-open .shortcodes-panel {
    right: 0;
  }
  
  body.panel-open main,
  body.panel-open .site-header {
    padding-right: 0; /* Don't adjust main content on mobile */
    margin-right: 0;
  }
}

/* For medium-to-large screens: side-by-side */
@media (min-width: 768px) {
  .function-details-grid {
    grid-template-columns: minmax(300px, 1fr) 3fr;
  }
  
  .function-details-grid.drawer-closed {
    grid-template-columns: 0fr 1fr;
  }
}

.function-shortcode-wrapper {
  margin-top: 1rem;
  background: #f3f3f3;
  padding: 1rem;
  font-family: monospace;
  border-radius: 4px;
  cursor: pointer;
}

/* Shortcode Output Display */
.function-shortcode-output {
  margin-top: 1rem;
  padding: 1rem;
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 6px;
}

/* --------------------------------------
  DACdbPlus Function Demo Block
-------------------------------------- */
.dacdbplus-function-demo-output {
  background: #fafafa;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin: 2rem 0;
}

.dacdbplus-function-demo-output code {
  white-space: nowrap;
}

.dacdbplus-function-demo-output.centered {
  text-align: center;
}

/* --------------------------------------
  Admin Dashboard Version Badge
-------------------------------------- */

#wp-admin-bar-dacdbplus-version .ab-item {
  border-radius: 3px !important;
  color: white !important;
  height: auto !important;
}

#wp-admin-bar-dacdbplus-version.dacdbplus-version-alpha .ab-item {
  background-color: hsl(0, 80%, 48%) !important;
}

#wp-admin-bar-dacdbplus-version.dacdbplus-version-beta .ab-item {
  background-color: hsl(39, 60%, 48%) !important;
}

#wp-admin-bar-dacdbplus-version.dacdbplus-version-release .ab-item {
  background-color: #841c30 !important;
}

/* --------------------------------------
  DACdbPlus Settings Form in Header
-------------------------------------- */

/* Header form alignment */
.site-header .dacdb-config-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.site-header .dacdb-config-form input[type="text"],
.site-header .dacdb-config-form select {
  padding: 0.25rem 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9rem;
}


/* Ensure both buttons look identical */
#submit, #reset-settings {
  padding: 0.4rem 0.8rem;
  background-color: #0078D4; /* Blue color, same as the submit button */
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  width: auto;
}

#submit:hover, #reset-settings:hover {
  background-color: #005fa3; /* Darker blue on hover */
}

/* DACdbPlus Function Toggle */
/* Drawer toggle behavior */
.drawer-toggle-btn {
  display: inline-block;
  margin-bottom: 1rem;
  cursor: pointer;
  background: #005427;
  color: #fff;
  padding: 0.5em 1em;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  transition: background 0.2s ease, transform 0.2s ease;
  width: auto;
  text-align: center;
}

.drawer-toggle-btn:hover {
  background: #003914;
}

.drawer-toggle-btn:active {
  transform: scale(0.98);
}

/* Add a more prominent look on mobile */
@media (max-width: 767px) {
  .drawer-toggle-btn {
    display: block;
    width: 100%;
    padding: 0.75em 1em;
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }
}

/* --------------------------------------
  Mobile Navigation
-------------------------------------- */
@media (min-width: 768px) {
  .mobile-nav-toggle {
      display: none;
  }
}

@media (max-width: 767px) {
  .site-nav {
      position: fixed;
      inset: 0 0 0 30%;
      background: white;
      padding: min(30vh, 10rem) 2em;
      transform: translateX(100%);
      transition: transform 350ms ease-out;
      z-index: 1001;
  }
  
  .site-nav[data-visible="true"] {
      transform: translateX(0%);
  }
  
  .site-nav ul {
      flex-direction: column;
  }
  
  .mobile-nav-toggle {
      position: absolute;
      z-index: 9999;
      background: transparent;
      border: 0;
      padding: 0.5em;
      width: 2rem;
      aspect-ratio: 1;
      top: 2rem;
      right: 2rem;
  }
  
  .mobile-nav-toggle .hamburger {
      display: block;
      position: relative;
  }
  
  .mobile-nav-toggle .hamburger,
  .mobile-nav-toggle .hamburger::before,
  .mobile-nav-toggle .hamburger::after {
      width: 2em;
      height: 3px;
      background-color: var(--clr-neutral-900, black);
      transition: transform 350ms ease-in-out;
  }
  
  .mobile-nav-toggle .hamburger::before,
  .mobile-nav-toggle .hamburger::after {
      content: '';
      position: absolute;
      left: 0;
  }
  
  .mobile-nav-toggle .hamburger::before { top: 6px; }
  .mobile-nav-toggle .hamburger::after { bottom: 6px; }
  
  .mobile-nav-toggle[aria-expanded="true"] .hamburger {
      transform: rotate(45deg);
  }
  
  .mobile-nav-toggle[aria-expanded="true"] .hamburger::before {
      transform: translateY(-6px) rotate(-90deg);
  }
  
  .mobile-nav-toggle[aria-expanded="true"] .hamburger::after {
      transform: translateY(6px) rotate(90deg);
  }
}

/* For the case where no attributes exist, make sure the output box takes full width */
.function-details-grid--no-attributes .function-shortcode-box {
  margin-left: 0;
  width: 100%;
}

/* Ensure the .function-details-grid--no-attributes doesn't need a minimum height */
.function-details-grid--no-attributes {
  min-height: auto;
}