@import 'answer_view.css';

:root {
  --primary-color: #1871ca;  /* Rich blue */
  --primary-hover: #c949dd;  /* Vibrant pink/purple */
  --primary-gradient: linear-gradient(to right, var(--primary-color), var(--primary-hover));
  --text-color: #333;
  --border-color: #ddd;
  --bg-color: #ffffff;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  
  
  --border-radius: 0px;
  
  --navbar-size: 1450px;
  --detail-pages-size: 700px;
  --content-pages-size: 1000px;
  --answer-view-size: 1450px;

  --font-primary: 'Lato', sans-serif;

}



html {
    zoom: 0.7;
}

body {
    font-family: var(--font-primary);
    background-color: var(--bg-color);
}

.container {

    max-width: var(--answer-view-size);
}


/* ################## Button styling ################## */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    border-radius: var(--border-radius);
}
  
.btn-primary:hover {
    background: var(--primary-gradient);
    border-color: var(--secondary-color);
}


/* ################## Phosphor Icon styling ################## */
/* Fix icon alignment in buttons and other elements */
.ph {
    vertical-align: middle;
    position: relative;
    top: -0.1em; /* Slight adjustment to align with text  */

}

/* Add a small margin to the right of icons when inside buttons */


/* Ensure icons in badges and other small elements are properly sized */
.badge .ph, small .ph {
    font-size: 0.9em;
}

/* Ensure icons in headings are properly sized */
h1 .ph, h2 .ph, h3 .ph, h4 .ph, h5 .ph, h6 .ph {
    font-size: 0.9em;
}

.ph-check-fat {
    color: var(--primary-color);
}

.ph-magnifying-glass {
    color: rgb(253, 48, 253);
}



/* ################## Demo Header Styling ################## */
.demo-header {
    background: var(--primary-gradient);
    color: white;
    padding: 10px 20px;
}

.demo-header-content {
    max-width: var(--answer-view-size);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    position: relative;
    left: -100px;
}

.demo-header-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.demo-header-content > div:last-child {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.demo-badge {
    font-size: 1.2rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

.demo-badge .ph {
    font-size: 1.4rem;
}

.demo-info {
    font-size: 0.9rem;
    opacity: 0.9;
}

.demo-readme-btn,
.demo-rate-limit {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.2s;
}

.demo-readme-btn:hover,
.demo-rate-limit:hover {
    background: rgba(255, 255, 255, 0.3);
    color: white;
    text-decoration: none;
}

.demo-readme-btn .ph {
    font-size: 1rem;
    position: relative;
    top: 1px; /* nudge icon down to visually center */
}

.demo-explanations-toggle {
    background: rgba(0, 184, 212, 0.3);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 184, 212, 0.4);
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    order: 1; /* appear after rate-limit in flex row */
}

.demo-explanations-toggle:hover {
    background: rgba(0, 184, 212, 0.4);
    color: white;
}

.paragraph-apply-adjustments-button {
    background: #e6f7ff !important;
    border-color: #00b8d4 !important;
    color: #0077be !important;
    border-width: 2px !important;
    font-weight: 500 !important;
    box-shadow: 0 2px 6px rgba(0, 184, 212, 0.2) !important;
    transition: all 0.3s !important;
}

.paragraph-apply-adjustments-button:hover {
    background: #00b8d4 !important;
    border-color: #00acc1 !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(0, 184, 212, 0.3) !important;
    transform: translateY(-1px);
}

.demo-rate-limit {
    order: 0; /* appear before toggle in flex row */
}

/* Feature Explanations Styling */
.feature-explanation {
    line-height: 1.5;
    color: #1a1a1a;
    background: #e6f7ff !important;
    border-left: 4px solid #00b8d4 !important;
    box-shadow: 0 4px 12px rgba(0, 184, 212, 0.25) !important;
}

.feature-explanation strong {
    color: #0077be;
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

/* Hide explanations only on small screens where they would break layout */
@media (max-width: 1024px) {
    .feature-explanation {
        display: none !important;
    }
}

/* Ensure paragraph controls container can accommodate explanations */
.paragraph-controls {
    overflow: visible;
}

/* Demo mode body adjustments */
.demo-mode {
    min-height: 100vh;
    overflow-x: hidden;
}
.container {
    position: relative;
    left: -100px;
}

/* Remove sticky sidebar for iframe (optional) */
.demo-mode .radios-container {
    position: static;
    height: auto;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}




/* ################## Badge styling ################## */
.badge .question-document-detail {
    font-size: 0.9rem;
    font-weight: normal;
    padding: 0.5rem 0.8rem;
    margin-right: 0.5rem;
    border-radius: var(--border-radius);
    border: none;
}

.badge.text-bg-primary {
    background: var(--primary-color);  /* Use solid primary color instead of gradient */
    color: var(--bg-color) !important;
}

/* Add subtle hover effect */
.badge:hover {
    opacity: 0.9;
}

/* Ensure icons in badges are properly aligned */
.badge .ph {
    margin-right: 0.3rem;
}

/* Add some spacing between badge groups */
.badge-group {
    margin: var(--spacing-md) 0;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}


.questionItem-container .badge{

    font-size: 0.7rem;
    font-weight: normal;
    padding: 0.3rem 0.8rem;
    margin-right: 0.5rem;

    border: none;
    color: white;
}