/* ========================================
   CalProgs Prism Website Template System
   Copyright (c) 2025 CalProgs
   Template Version: 1.25.10181225
   File: common/styles.css
   ========================================
   Custom CSS classes to replace Tailwind dependencies
   No build process required - direct CSS
   ======================================== */

/* ========================================
   CSS RESET - Essential browser normalization
   Replaces Tailwind's base reset styles
   ======================================== */

/* Basic reset similar to Tailwind's preflight */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

body {
  margin: 0;
  padding: 0;
  line-height: inherit;
}

/* Remove default margins */
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
}

/* Remove list styles */
ol, ul {
  list-style: none;
  padding: 0;
}

/* Images and media */
img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
}

img, video {
  max-width: 100%;
  height: auto;
}

/* Form elements */
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

/* Links */
a {
  color: inherit;
  text-decoration: inherit;
}

/* Hidden elements */
[hidden] {
  display: none;
}

/* ========================================
   FOOTER COMPONENT STYLES
   ======================================== */

/* Footer container - replaces: fixed bottom-0 left-0 right-0 z-20 backdrop-blur-sm */
.prism-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Footer inner container - replaces: w-full px-2 py-2 */
.prism-footer-inner {
  width: 100%;
  padding: 0.5rem;
}

/* Footer content layout - replaces: flex items-center justify-between */
.prism-footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Footer links - replaces: text-xs sm:text-sm transition-colors hover:opacity-75 */
.prism-footer-link {
  font-size: 0.75rem; /* 12px */
  transition: opacity 0.2s ease;
  text-decoration: none;
}

.prism-footer-link:hover {
  opacity: 0.75;
}

/* Environment badge container - replaces: flex items-center space-x-2 */
.prism-env-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Environment badge - replaces: hidden px-2 py-1 text-xs sm:text-sm rounded font-bold text-white */
.prism-env-badge {
  display: none;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem; /* 12px */
  border-radius: 0.25rem;
  font-weight: bold;
  color: white;
}

.prism-env-badge.show {
  display: inline-block;
}

/* Copyright container - replaces: flex items-center space-x-4 */
.prism-copyright-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Copyright text - replaces: text-xs sm:text-sm */
.prism-copyright-text {
  font-size: 0.75rem; /* 12px */
}

/* Environment badge colors - replaces Tailwind bg-* classes */
.prism-env-local {
  background-color: #2563eb; 
}

.prism-env-staging {
  background-color: #ea580c; 
}

.prism-env-dev {
  background-color: #9333ea; 
}

.prism-env-production {
  background-color: #16a34a; 
}

/* Responsive text sizing - replaces sm:text-sm */
@media (min-width: 640px) {
  .prism-footer-link,
  .prism-env-badge,
  .prism-copyright-text {
    font-size: 0.875rem; /* 14px */
  }
}

/* ========================================
   HEADER LOGO COMPONENT STYLES
   ======================================== */

/* Base logo styles */
.prism-logo {
  object-fit: cover;
  filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.15));
}

/* Logo container for non-circular logos */
.prism-logo-container {
  height: auto;
  filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.15));
  display: inline-block;
}

.prism-logo-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========================================
   HEADER MENU BUTTON STYLES
   ======================================== */

/* Menu button - replaces: px-2 py-2 mr-2 rounded-lg shadow-lg transition-all flex items-center justify-end */
.prism-menu-button {
  padding: 0.5rem;
  margin-right: 0.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  border: none;
}

/* Menu icon - replaces: material-symbols-outlined text-2xl */
.prism-menu-icon {
  font-family: 'Material Symbols Outlined';
  font-size: 1.5rem;
  line-height: 1;
}

/* Menu dropdown container - replaces: relative */
.prism-menu-container {
  position: relative;
}

/* Menu dropdown - replaces: hidden absolute top-full right-0 mt-4 backdrop-blur-sm filter drop-shadow-xl p-2 z-30 */
.prism-menu-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 1rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
  padding: 0.5rem;
  z-index: 30;
}

.prism-menu-dropdown.show {
  display: block;
}

/* Menu items container - replaces: flex flex-col space-y-2 */
.prism-menu-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ========================================
   HEADER STRUCTURE STYLES
   ======================================== */

/* Header navigation - replaces: sticky top-0 z-20 backdrop-blur-sm filter drop-shadow-lg */
.prism-header-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
}

/* Header inner container - replaces: w-full pr-3 py-2 */
.prism-header-inner {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 0;
}

/* Header content layout - replaces: relative flex justify-end items-center */
.prism-header-content {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Logo link container - replaces: px-4 flex absolute top-1 left-0 */
.prism-logo-link {
  padding-left: 1rem;
  padding-right: 1rem;
  display: flex;
  position: absolute;
  top: 0.25rem;
  left: 0;
}

/* Header title - replaces: px-4 text-xl font-extrabold filter drop-shadow-xl */
.prism-header-title {
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1.25rem;
  font-weight: 800;
  filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.15));
}

/* ========================================
   PAGE CONTAINER AND BACKGROUND STYLES
   ======================================== */

/* Body base styles - replaces: min-h-screen */
.prism-layout-body {
  min-height: calc(100vh - 62px); /* Subtract header height (60px) with small buffer */
}

/* Main page container - replaces: relative z-10 min-h-screen flex flex-col */
.prism-main-container {
  position: relative;
  z-index: 10;
  min-height: calc(100vh - 62px); /* Subtract header height (60px) with small buffer */
  display: flex;
  flex-direction: column;
}

/* Navigation mode variant - no min-height for non-scroll mode */
.prism-main-container.no-min-height {
  min-height: auto;
}

/* ========================================
   NAVIGATION MENU ITEM STYLES
   ======================================== */

/* Menu separator - replaces: border-t border-gray-300 my-1 */
.prism-menu-separator {
  border-top: 1px solid #d1d5db; /* gray-300 */
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

/* Menu item base - replaces: flex items-center justify-end px-2 py-1 rounded shadow-lg transition-colors font-bold whitespace-nowrap */
.prism-menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s ease, color 0.2s ease;
  font-weight: bold;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.prism-menu-item:hover {
  opacity: 0.9;
}

/* Menu item icon - replaces: material-symbols-outlined ml-2 */
.prism-menu-item-icon {
  font-family: 'Material Symbols Outlined';
  margin-left: 0.5rem;
  font-size: 20px;
  vertical-align: middle;
}

/* ========================================
   CONTENT SECTIONS AND CONTAINERS
   ======================================== */

/* Main content container - replaces: grow + container mx-auto px-4 py-8 pb-8 */
.prism-main-content {
  flex-grow: 1;
}

/* Container variants for different modes */

.prism-main-content.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 2rem; /* pb-8 equivalent */
}

.prism-main-content.scroll-padding {
  padding-bottom: 2rem;
  /* padding-top removed - now handled by first section wrapper */
}

.prism-main-content.single-padding {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Wide mode should never have side padding or bottom padding */
.prism-main-content.wide {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

/* Wide mode container should always fill viewport height */
.prism-main-container.wide-mode {
  min-height: 100vh;
}

/* Section base styles for both modes */
.prism-section {
  position: relative;
}

/* Scroll mode sections - replaces various py-* classes */
.prism-section-scroll-top {
  padding-top: 5rem; /* pt-20 = 80px */
  padding-bottom: 4rem; /* pb-16 */
}

.prism-section-scroll-bottom {
  padding-top: 4rem; /* pt-16 */
  padding-bottom: 5rem; /* pb-20 = 80px */
}

.prism-section-scroll-center {
  padding-top: 1rem; /* py-4 */
  padding-bottom: 1rem;
}

/* Single mode sections - replaces flex + alignment classes */
.prism-section-single {
  display: flex;
  justify-content: center;
  padding-top: 4rem; /* py-16 */
  padding-bottom: 4rem;
  box-sizing: border-box; /* Include padding in height calculation */
}

/* Height calculation for wide mode */
.prism-main-container.wide-mode .prism-section-single {
  height: calc(100vh - 4rem); /* Full viewport minus footer height plus margin buffer */
}

/* Height calculation for non-wide mode - account for header height */
.prism-main-container:not(.wide-mode) .prism-section-single {
  height: calc(100vh - 6rem); /* Header height (~60px) + footer buffer */
}

.prism-section-single.top {
  align-items: flex-start;
}

.prism-section-single.bottom {
  align-items: flex-end;
  padding-top: 4rem; /* pt-16 */
}

.prism-section-single.center {
  align-items: center;
}

/* Section page states */
.prism-section-hidden {
  display: none;
}

/* Fallback section styling - replaces: max-w-2xl mx-auto p-8 text-center */
.prism-section-fallback {
  max-width: 42rem; /* max-w-2xl */
  margin-left: auto;
  margin-right: auto;
  padding: 2rem;
  text-align: center;
}

/* Fallback headings - replaces: text-4xl font-bold mb-4, text-3xl font-bold mb-4 */
.prism-section-fallback h1 {
  font-size: 2.25rem; /* text-4xl */
  font-weight: bold;
  margin-bottom: 1rem;
}

.prism-section-fallback h2 {
  font-size: 1.875rem; /* text-3xl */
  font-weight: bold;
  margin-bottom: 1rem;
}

/* ========================================
   SECTION WRAPPER STYLES
   ======================================== */

/* Section wrapper base - replaces: mx-auto */
.prism-section-wrapper {
  margin-left: auto;
  margin-right: auto;
}

/* Section layout helpers - basic structure without visual styling */
.prism-section-layout {
  padding: 2rem; /* Standard layout padding for content areas */
  border-radius: 0.5rem; /* Basic rounded corners */
}

.prism-section-layout.portal {
  padding: 0; /* Remove padding for seamless portal layout */
  border-radius: 0.5rem; /* Keep rounded corners for portal layouts */
}

.prism-section-layout.portal.header {
  padding: 1rem; /* Restore padding for portal headers that need visual separation */
  border-radius: 0.5rem; /* Rounded corners for portal header */
}

.prism-section-layout.portal.module {
  padding: 0; /* No padding for module page wrappers */
  border-radius: 0.5rem; /* Rounded corners for portal modules */
}

.prism-section-shadow {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.prism-section-blur {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}


/* ========================================
   NAVIGATION CONTAINER STYLES
   ======================================== */

/* Navigation container - replaces: w-full px-2 py-2 */
.prism-nav-container {
  width: 100%;
  padding-left: 0.5rem; /* px-2 = 8px */
  padding-right: 0.5rem;
  padding-top: 0.5rem; /* py-2 = 8px */
  padding-bottom: 0.5rem;
}

/* ========================================
   FORM ELEMENT STYLES
   ======================================== */

/* Form input base - replaces: w-full px-4 py-2 */
.prism-form-input {
  width: 100%;
  padding-left: 1rem; /* px-4 = 16px */
  padding-right: 1rem;
  padding-top: 0.5rem; /* py-2 = 8px */
  padding-bottom: 0.5rem;
}

/* Submit button base - replaces: w-full px-6 py-3 */
.prism-form-submit {
  width: 100%;
  padding-left: 1.5rem; /* px-6 = 24px */
  padding-right: 1.5rem;
  padding-top: 0.75rem; /* py-3 = 12px */
  padding-bottom: 0.75rem;
}

/* ========================================
   UTILITY SPACING CLASSES
   ======================================== */

/* Individual padding classes for specific components */
.prism-px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } /* px-2 = 8px */
.prism-px-4 { padding-left: 1rem; padding-right: 1rem; } /* px-4 = 16px */
.prism-py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } /* py-1 = 4px */
.prism-py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } /* py-2 = 8px */

/* Menu button specific styles - replaces: px-2 py-2 */
.prism-menu-button {
  padding: 0.5rem; /* px-2 py-2 = 8px all around */
}

/* Header text padding - replaces: px-4 */
.prism-header-text {
  padding-left: 1rem; /* px-4 = 16px */
  padding-right: 1rem;
}

/* Menu item specific padding - replaces: px-2 py-1 */
.prism-menu-item-padding {
  padding-left: 0.5rem; /* px-2 = 8px */
  padding-right: 0.5rem;
  padding-top: 0.25rem; /* py-1 = 4px */
  padding-bottom: 0.25rem;
}

/* Section wrapper classes - replaces: w-full px-8, pb-16 */
.prism-section-outer-wrapper {
  width: 100%; /* w-full */
  padding-left: 2rem; /* px-8 = 32px */
  padding-right: 2rem;
  /* Let content determine height naturally */
}

/* First section in scroll mode needs top padding to clear header */
.prism-section-outer-wrapper.first-section-scroll {
  padding-top: 0rem; /* 32px to clear sticky header */
}

.prism-section-contact-padding {
  padding-bottom: 4rem; /* pb-16 = 64px */
}

/* Additional padding utilities for library.php */
.prism-py-8 { padding-top: 2rem; padding-bottom: 2rem; } /* py-8 = 32px */
.prism-p-0 { padding: 0; } /* p-0 = 0 */

/* ========================================
   ICON COLOR UTILITIES
   ======================================== */

/* Material Symbols color utilities */
.prism-icon-green {
  color: #059669; 
}

.prism-icon-blue {
  color: #2563eb; 
}

/* About page specific classes */
.prism-about-section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 140px);
}

.prism-section-header {
  text-align: center;
  margin-bottom: 2rem; /* mb-8 = 32px */
}

.prism-section-title {
  font-size: 1.875rem; /* text-3xl = 30px */
  font-weight: bold;
  margin-bottom: 1rem; /* mb-4 = 16px */
}

/* Responsive title sizing */
@media (min-width: 768px) {
  .prism-section-title {
    font-size: 2.25rem; /* md:text-4xl = 36px */
  }
}

.prism-section-content {
  max-width: none;
}

.prism-error-text {
  color: rgb(239 68 68); 
}

/* Navigation and header classes */
.prism-nav-sticky {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(4px);
  filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
}

.prism-nav-inner {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.prism-nav-home-link {
  padding-left: 1rem;
  padding-right: 1rem;
  display: flex;
  position: absolute;
  top: 0.25rem;
  left: 0;
  background-color: transparent;
}

.prism-logo-image {
  object-fit: cover;
  filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
}

/* Only force square aspect ratio for round logos */
.prism-logo-image.rounded-full {
  aspect-ratio: 1;
  border-radius: 50%;
}

.prism-menu-container {
  position: relative;
}

.prism-menu-button {
  margin-right: 0.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.prism-menu-icon {
  font-size: 1.5rem; /* text-2xl */
}

.prism-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 1rem;
  backdrop-filter: blur(4px);
  filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
  padding: 0.5rem;
  z-index: 30;
}

.prism-dropdown-inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* space-y-2 */
}

/* Section heading */
.prism-section-heading {
  font-size: 1.875rem; /* text-3xl */
  font-weight: bold;
  margin-bottom: 1.5rem; /* mb-6 */
}

/* Contact form classes */
.prism-contact-form {
  margin-top: 2rem; /* mt-8 */
}

.prism-contact-form > * + * {
  margin-top: 1.5rem; /* space-y-6 */
}

/* Honeypot field - hidden from humans to trap bots */
.prism-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.prism-form-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem; /* mb-2 */
}

.prism-required {
  color: rgb(248 113 113); 
}

.prism-form-error {
  color: rgb(252 165 165); 
  font-size: 0.875rem; /* text-sm */
}

.prism-form-input {
  border: 1px solid;
  border-radius: 0.25rem;
}

.prism-form-input:focus {
  outline: none;
}

.prism-form-submit {
  font-weight: bold;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  transition: background-color 0.2s, color 0.2s;
}

.prism-form-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.prism-success-message {
  margin-top: 1.5rem; /* mt-6 */
  padding: 1rem; /* p-4 */
  background-color: rgb(20 83 45 / 0.5); 
  border: 1px solid rgb(21 128 61); 
  border-radius: 0.25rem;
  color: rgb(134 239 172); 
}

.prism-warning-box {
  margin-top: 2rem; /* mt-8 */
  padding: 1.5rem; /* p-6 */
  background-color: rgb(120 53 15 / 0.5); 
  border: 1px solid rgb(161 98 7); 
  border-radius: 0.25rem;
  color: rgb(254 240 138); 
  text-align: center;
}

.prism-warning-title {
  font-size: 1.25rem; /* text-xl */
  font-weight: 600; /* font-semibold */
  margin-bottom: 0.5rem; /* mb-2 */
}

/* Markdown element classes from library.php */
.prism-markdown-h1 {
  font-size: 1.875rem; /* text-3xl */
  font-weight: bold;
  margin-bottom: 0.75rem; /* mb-3 */
}

@media (min-width: 768px) {
  .prism-markdown-h1 {
    font-size: 2.25rem; /* md:text-4xl */
  }
}

.prism-markdown-h2 {
  font-size: 1.5rem; /* text-2xl */
  font-weight: bold;
  margin-top: 0.75rem; /* my-3 */
  margin-bottom: 0.75rem;
}

.prism-markdown-h3 {
  font-size: 1.25rem; /* text-xl */
  font-weight: 600; /* font-semibold */
  margin-top: 0.75rem; /* my-3 */
  margin-bottom: 0.75rem;
}

.prism-markdown-p {
  margin-top: 0.75rem; /* my-3 */
  margin-bottom: 0.75rem;
}

.prism-markdown-ul {
  list-style-type: disc;
  list-style-position: inside;
  margin-top: 0.75rem; /* my-3 */
  margin-bottom: 0.75rem;
}

.prism-markdown-ul > li + li {
  margin-top: 0.5rem; /* space-y-2 */
}

.prism-markdown-ol {
  list-style-type: decimal;
  list-style-position: inside;
  margin-top: 0.75rem; /* my-3 */
  margin-bottom: 0.75rem;
}

.prism-markdown-ol > li + li {
  margin-top: 0.5rem; /* space-y-2 */
}

.prism-markdown-hr {
  border-top-width: 1px;
  margin-top: 0.75rem; /* my-3 */
  margin-bottom: 0.75rem;
}

.prism-markdown-img {
  max-width: 100%; /* max-w-full */
  height: auto;
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* shadow-lg */
  margin-top: 0.75rem; /* my-3 */
  margin-bottom: 0.75rem;
}

/* Text emphasis classes */
.prism-text-bold {
  font-weight: bold;
}

.prism-text-italic {
  font-style: italic;
}

/* Markdown link styling */
.prism-markdown-link {
  color: rgb(37 99 235); 
  text-decoration: underline;
}

.prism-markdown-link:hover {
  color: rgb(59 130 246); 
}

/* Preview-specific markdown colors (blue theme for preview) */
.prism-preview-h1 {
  color: rgb(30 64 175); 
}

.prism-preview-h2,
.prism-preview-h3 {
  color: rgb(29 78 216); 
}

.prism-preview-p,
.prism-preview-ul,
.prism-preview-ol {
  color: rgb(30 64 175); 
}

.prism-preview-hr {
  border-color: rgb(96 165 250); 
}

/* Notification system classes */
.prism-notification-container {
  position: fixed;
  bottom: 1.5rem; /* bottom-6 */
  right: 1.5rem; /* right-6 */
}

.prism-notification-container > * + * {
  margin-top: 0.5rem; /* space-y-2 */
}

.prism-notification {
  transform: translateX(0);
  transition: transform 300ms ease-in-out;
}

.prism-notification-hidden {
  transform: translateX(100%); /* translate-x-full */
}

.prism-notification-content {
  padding: 0.75rem 1.5rem; /* py-3 px-6 */
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* shadow-lg */
  color: white;
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
  min-width: 20rem; /* min-w-80 */
  max-width: 24rem; /* max-w-96 */
}

.prism-notification-success {
  background-color: rgb(22 163 74); 
}

.prism-notification-error {
  background-color: rgb(220 38 38); 
}

.prism-notification-warning {
  background-color: rgb(234 88 12); 
}

.prism-notification-info {
  background-color: rgb(37 99 235); 
}

.prism-notification-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.prism-notification-close {
  margin-left: 1rem; /* ml-4 */
  color: rgba(255, 255, 255, 0.8); 
  background: none;
  border: none;
  cursor: pointer;
}

.prism-notification-close:hover {
  color: white; 
}

.prism-notification-icon {
  font-size: 0.875rem; /* text-sm */
}

/* ========================================
   PRISM TEXT COLOR UTILITIES
   ======================================== */

/* Text color utilities - replaces Tailwind text-* classes */
.prism-text-gray-900 {
  color: rgb(17, 24, 39); 
}

.prism-text-zinc-900 {
  color: rgb(24, 24, 27); 
}

.prism-text-blue-900 {
  color: rgb(30, 58, 138); 
}

.prism-text-yellow-900 {
  color: rgb(113, 63, 18); 
}

.prism-text-white {
  color: white;
}

.prism-text-white:hover {
  color: white;
}

/* Section wrapper utility classes */
.prism-backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

.prism-shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.prism-p-4 {
  padding: 1rem;
}

.prism-p-8 {
  padding: 2rem;
}

.prism-border-b {
  border-bottom: 1px solid;
}

/* Lightbox styles */
.prism-lightbox-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(24px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.prism-lightbox-container.hidden {
  display: none;
}

.prism-lightbox-inner {
  position: relative;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prism-lightbox-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 50px 10px rgba(0, 0, 0, 0.5);
}

/* Lightbox close button */
.prism-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: white;
  font-size: 2rem;
  line-height: 1;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  z-index: 60;
}

.prism-lightbox-close:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* Lightbox navigation buttons */
.prism-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: white;
  font-size: 1.5rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  z-index: 60;
}

.prism-lightbox-nav:hover {
  background: rgba(0, 0, 0, 0.7);
}

.prism-lightbox-nav-left {
  left: 1rem;
}

.prism-lightbox-nav-right {
  right: 1rem;
}

/* Lightbox counter */
.prism-lightbox-counter {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}

/* Lightbox title */
.prism-lightbox-title {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
}

.prism-text-underline {
  text-decoration: underline;
}

/* ========================================
   Universal Utility Classes
   Common utilities for JavaScript interactions
   ======================================== */

/* Visibility utilities - replaces Tailwind's hidden class */
.prism-hidden {
  display: none !important;
}

.prism-show {
  display: block !important;
}

/* Responsive visibility utilities */
.prism-show-flex {
  display: flex !important;
}

.prism-show-grid {
  display: grid !important;
}

.prism-show-inline {
  display: inline !important;
}

.prism-show-inline-block {
  display: inline-block !important;
}

/* Loading state utilities */
.prism-loading {
  text-align: center;
}

.prism-loading-icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Environment badge colors */
.prism-env-local {
  background-color: #2563eb !important; 
}

.prism-env-development {
  background-color: #2563eb !important; 
}

.prism-env-staging {
  background-color: #ea580c !important; 
}

.prism-env-production {
  background-color: #16a34a !important; 
}

.prism-env-dev {
  background-color: #9333ea !important; 
}

/* Menu item styles for dropdown navigation */
.prism-menu-item {
  display: block;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.15s, color 0.15s;
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}

/* ========================================
   TABLE CELL ALIGNMENT UTILITIES
   Universal classes for consistent table cell alignment across modules
   ======================================== */

/* Table cell alignment - center */
.prism-td-center {
  text-align: center;
  vertical-align: middle;
}

/* Table cell alignment - right */
.prism-td-right {
  text-align: right;
  vertical-align: middle;
}

/* ========================================
   CONTENT FLOATING IMAGE CONTAINERS
   Replaces complex Tailwind classes in content files
   ======================================== */

/* Floating image container - right aligned */
.prism-floating-image-right {
  float: right;
  margin-left: 1rem; /* ml-4 = 16px */
  margin-bottom: 1rem; /* mb-4 = 16px */
  padding: 0.375rem; /* p-1.5 = 6px */
  background-color: rgba(255, 255, 255, 0.1); /* bg-white/10 */
  backdrop-filter: blur(4px); /* backdrop-blur-sm */
  -webkit-backdrop-filter: blur(4px);
  border-radius: 0.5rem; /* rounded-lg = 8px */
}

/* Floating image responsive sizing */
.prism-floating-image-right img {
  width: 10rem; /* w-40 = 160px base */
  border-radius: 0.375rem; /* rounded-md = 6px */
}

/* Responsive breakpoints for floating images */
@media (min-width: 640px) {
  .prism-floating-image-right img {
    width: 12rem; /* sm:w-48 = 192px */
  }
}

@media (min-width: 768px) {
  .prism-floating-image-right img {
    width: 14rem; /* md:w-56 = 224px */
  }
}

@media (min-width: 1024px) {
  .prism-floating-image-right img {
    width: 28rem; /* lg:w-112 = 448px */
  }
}

/* Floating image container - left aligned */
.prism-floating-image-left {
  float: left;
  margin-right: 1rem; /* mr-4 = 16px */
  margin-bottom: 1rem; /* mb-4 = 16px */
  padding: 0.375rem; /* p-1.5 = 6px */
  background-color: rgba(255, 255, 255, 0.1); 
  backdrop-filter: blur(4px); /* backdrop-blur-sm */
  -webkit-backdrop-filter: blur(4px);
  border-radius: 0.5rem; /* rounded-lg = 8px */
}

.prism-floating-image-left img {
  width: 10rem; /* w-40 = 160px base */
  border-radius: 0.375rem; /* rounded-md = 6px */
}

@media (min-width: 640px) {
  .prism-floating-image-left img {
    width: 12rem; /* sm:w-48 = 192px */
  }
}

@media (min-width: 768px) {
  .prism-floating-image-left img {
    width: 14rem; /* md:w-56 = 224px */
  }
}

@media (min-width: 1024px) {
  .prism-floating-image-left img {
    width: 28rem; /* lg:w-112 = 448px */
  }
}

/* ========================================
   LAYOUT CONTAINER REPLACEMENT
   Replaces Tailwind 'container' class
   ======================================== */

/* Main content container - replaces Tailwind 'container' class */
.prism-main-content-container {
  width: 100%;
  margin: 0 auto; /* Center the container horizontally */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center content vertically */
  align-items: center; /* Center content horizontally within flex container */
  min-height: calc(100vh - 140px); /* Full height minus header and footer */
  padding: 2rem 1rem 4rem 1rem; /* Add vertical and horizontal padding - generous bottom padding for footer gap */
}

@media (min-width: 40rem) {
  .prism-main-content-container {
    max-width: 40rem;
  }
}

@media (min-width: 48rem) {
  .prism-main-content-container {
    max-width: 48rem;
  }
}

@media (min-width: 64rem) {
  .prism-main-content-container {
    max-width: 64rem;
  }
}

@media (min-width: 80rem) {
  .prism-main-content-container {
    max-width: 80rem;
  }
}

@media (min-width: 96rem) {
  .prism-main-content-container {
    max-width: 96rem;
  }
}

/* ========================================
   CONTENT TEXT UTILITIES
   Replaces remaining Tailwind classes in content files
   ======================================== */

/* Content text container - replaces text-lg my-3 clear-both */
.prism-content-text-container {
  margin-top: 0.75rem; /* my-3 = 12px top */
  margin-bottom: 0.75rem; /* my-3 = 12px bottom */
  clear: both; /* clear-both */
}

/* Clear float utility - replaces clear-both */
.prism-clear-both {
  clear: both;
}

/* ========================================
   SECTION VERTICAL ALIGNMENT CLASSES
   Replaces mixed class naming for consistent semantic classes
   ======================================== */

/* Single page mode vertical alignment */
.prism-section-single-top {
  align-items: flex-start;
  justify-content: flex-start;
}

.prism-section-single-center {
  align-items: center;
  justify-content: center;
}

.prism-section-single-bottom {
  align-items: flex-end;
  justify-content: flex-end;
}

/* ========================================
   LOGO SHAPE CLASSES
   Replaces Tailwind border-radius classes
   ======================================== */

/* Logo shape utilities - replaces Tailwind classes */
.prism-logo-rounded-none {
  border-radius: 0;
}

.prism-logo-rounded {
  border-radius: 0.25rem; /* rounded = 4px */
}

.prism-logo-rounded-lg {
  border-radius: 0.5rem; /* rounded-lg = 8px */
}

/* Style Editor now generates proper circular logo CSS - overrides no longer needed */

/* Legacy rounded-full support (can be removed once config.php is cleaned up) */
img.prism-logo-image.prism-logo-rounded-full {
  border-radius: 50% !important;
  height: 96px !important;
  width: 96px !important;
  object-fit: cover !important;
}

/* ========================================
   FALLBACK COLORS
   ======================================== */
/* Bright, obvious colors for use as fallbacks when config values are missing.
   These intentionally stand out so developers know to fix the configuration. */

:root {
  --prism-fallback-error-bg: #ff00ff;        /* Bright magenta background */
  --prism-fallback-error-text: #ffff00;      /* Bright yellow text */
  --prism-fallback-error-border: #00ffff;    /* Bright cyan border */
  --prism-fallback-missing: #ff1493;         /* Deep pink - clearly wrong */
}

/* Fallback color class - for CSS color name fallbacks */
.prism-fallback-error {
  background-color: var(--prism-fallback-error-bg) !important;
  color: var(--prism-fallback-error-text) !important;
  border-color: var(--prism-fallback-error-border) !important;
}