/* Styles for the new component showcase grid on index.html */
.component-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--a-space-l);
    margin-top: var(--a-space-xl);
}

.component-showcase-item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--a-color-on-surface);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.component-showcase-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--a-shadow-large);
}

.preview {
    height: 120px; /* Fixed height for visual consistency */
    background-color: var(--a-color-surface-variant);
    border-bottom: 1px solid var(--a-color-outline);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Hide overflow from scaled content */
    border-top-left-radius: var(--a-border-radius-large);
    border-top-right-radius: var(--a-border-radius-large);
    position: relative;
    padding: var(--a-space-m); /* Add some padding inside the preview area */
}

.preview > * {
    /* Ensure embedded components are styled minimally for preview */
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
}

.component-showcase-item .content {
    padding: var(--a-space-l);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.component-showcase-item .content i {
    font-size: 2rem;
    color: var(--a-color-primary);
    margin-bottom: var(--a-space-m);
}

.component-showcase-item .content h3 {
    margin: 0 0 var(--a-space-s);
    font-size: 1.25rem;
    color: var(--a-color-on-surface);
}

.component-showcase-item .content p {
    font-size: 0.9rem;
    color: var(--a-color-on-surface-variant);
    margin-bottom: 0;
}

/* Specific adjustments for embedded components to fit preview */
.preview .alert {
    margin: 0;
    padding: 0.5rem;
    font-size: 0.8rem;
    border-left: 3px solid;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 90%;
}

.preview .button {
    margin: 0;
}

.preview .card {
    margin: 0;
    padding: 0.5rem;
    border: none;
    box-shadow: none;
}

.preview .card header {
    padding: 0.25rem;
    border-bottom: none;
}

.preview .card h3 {
    font-size: 0.9rem;
    margin: 0;
}

.preview .card main {
    padding: 0.25rem;
}

.preview .card p {
    font-size: 0.7rem;
    margin-bottom: 0;
}

.preview .dropdown {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--a-space-xs);
    width: 100%;
}

.preview .dropdown.menu {
    position: static;
    display: block;
    opacity: 1;
    transform: none;
    min-width: unset;
    padding: 0.5rem;
    font-size: 0.8rem;
    box-shadow: var(--a-shadow-medium);
}

.preview .dropdown.menu a {
    padding: 0.25rem 0.5rem;
}

.preview .dropdown.menu span {
    display: block;
    padding: 0.25rem 0.5rem;
    color: var(--a-color-on-surface);
    font-size: 0.8rem;
}

.preview .empty-state {
    padding: 0.5rem;
    border: 1px dashed var(--a-color-outline);
    border-radius: var(--a-border-radius-medium);
    margin: 0;
    width: 90%;
}

.preview .empty-state i {
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
}

.preview .empty-state h3 {
    font-size: 0.9rem;
    margin: 0;
}

.preview form {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    width: 100%;
}

.preview form input[type="text"] {
    width: 100%;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

.preview form .button {
    width: 100%;
    margin-top: 0.25rem;
}

.preview .chat-container {
    height: 100px;
    width: 100%;
    margin: 0;
    border: 1px solid var(--a-color-outline);
    border-radius: var(--a-border-radius-medium);
    overflow: hidden;
    background-color: var(--a-color-surface);
}

.preview .chat-container .history {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.7rem;
}

.preview .chat-container .message.bot {
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    background-color: var(--a-color-surface-variant);
    align-self: flex-start;
}

.preview .chat-container .message.user {
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    background-color: var(--a-color-primary-container);
    align-self: flex-end;
}

.preview .image-generator-form {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
}

.preview .image-generator-form textarea {
    width: 100%;
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
    border: 1px solid var(--a-color-outline);
    border-radius: var(--a-border-radius-medium);
}

.preview .image-generator-form .button {
    width: 100%;
}

/* Get Started Section Enhancements */
.get-started-card {
    text-align: center;
}

.get-started-card header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--a-space-m);
}

.get-started-card header i {
    font-size: 3rem;
    color: var(--a-color-primary);
    margin-bottom: var(--a-space-s);
}

.get-started-card header h3 {
    display: flex;
    align-items: center;
    gap: var(--a-space-xs);
    margin: 0;
}

.get-started-card main p {
    margin-bottom: var(--a-space-m);
}

.code-snippet {
    background-color: var(--a-color-surface-variant);
    color: var(--a-color-on-surface-variant);
    padding: var(--a-space-s);
    border-radius: var(--a-border-radius-medium);
    overflow-x: auto; /* Ensures long lines are scrollable */
    white-space: pre-wrap; /* Allows wrapping of long lines */
    word-break: break-all; /* Breaks words if necessary */
    margin-bottom: var(--a-space-s);
    text-align: left;
}

.code-snippet code {
    font-family: var(--a-font-family-mono, monospace);
    font-size: 0.9rem;
    line-height: 1.5;
}

.tooltip-trigger {
    position: relative;
    display: inline-block;
    cursor: help;
}

.tooltip-trigger .fas.fa-info-circle {
    font-size: 0.9em;
    color: var(--a-color-on-surface-variant);
    margin-left: var(--a-space-xs);
}

.tooltip-trigger::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%; /* Position above the icon */
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--a-color-on-surface);
    color: var(--a-color-surface);
    padding: var(--a-space-xs) var(--a-space-s);
    border-radius: var(--a-border-radius-small);
    white-space: normal; /* Allow text to wrap */
    min-width: 150px;
    max-width: 250px;
    text-align: center;
    font-size: 0.8rem;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.tooltip-trigger:hover::after {
    opacity: 1;
    visibility: visible;
}

.tooltip-trigger::before {
    content: '';
    position: absolute;
    bottom: 115%; /* Adjust to align with tooltip */
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    border: var(--a-space-xs) solid transparent;
    border-top-color: var(--a-color-on-surface);
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.tooltip-trigger:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Typography Section Enhancements */
#typography header.text-left {
    text-align: left;
    margin-bottom: var(--a-space-xl);
}

#typography .layout {
    column-count: 1; /* Default to single column on small screens */
    column-gap: var(--a-space-l);
    margin-top: var(--a-space-xl);
}

@media (min-width: 768px) {
    #typography .layout {
        column-count: 2; /* Two columns on medium screens and up */
    }
}

@media (min-width: 1024px) {
    #typography .layout {
        column-count: 3; /* Three columns on large screens and up */
    }
}

#typography .column {
    /* Break inside to prevent columns from breaking in awkward places */
    break-inside: avoid-column;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;

    padding: var(--a-space-l);
    border: 1px solid var(--a-color-outline);
    border-radius: var(--a-border-radius-large);
    background-color: var(--a-color-surface);
    box-shadow: var(--a-shadow-medium);
    margin-bottom: var(--a-space-l); /* Add margin between columns */
}

#typography .column h3 {
    margin-top: 0;
    margin-bottom: var(--a-space-m);
    color: var(--a-color-primary);
    font-size: var(--a-font-size-h3, 1.75rem);
}

#typography .column h1,
#typography .column h2,
#typography .column h3,
#typography .column h4,
#typography .column h5,
#typography .column h6 {
    text-align: left; /* Ensure headings within blocks are left-aligned */
}

#typography .column p,
#typography .column ul,
#typography .column ol,
#typography .column blockquote,
#typography .column pre {
    text-align: left; /* Ensure text within blocks is left-aligned */
}

#typography .column ul,
#typography .column ol {
    padding-left: var(--a-space-l);
}

#typography .column blockquote {
    margin-left: 0;
    margin-right: 0;
}

#typography .column .code-snippet {
    background-color: var(--a-color-surface-variant);
    color: var(--a-color-on-surface-variant);
    padding: var(--a-space-s);
    border-radius: var(--a-border-radius-medium);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    text-align: left;
}

#typography .column .code-snippet code {
    font-family: var(--a-font-family-mono, monospace);
    font-size: 0.9rem;
    line-height: 1.5;
}

#comparison .comparison-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#comparison .comparison-scroll .comparison-table {
    min-width: 680px;
}

/* Media & Icons Section Enhancements */
#components .actions,
#media-icons .actions,
#grid-system .actions {
    margin-top: var(--a-space-xl); /* Add top margin to separate from cards */
    display: flex;
    gap: var(--a-space-m);
    flex-wrap: wrap;
    justify-content: center;
}

/* Spacing Demo Section Enhancements */
#cascading-spacing .box {
    display: flex;
    flex-wrap: wrap;
    gap: var(--a-space-m);
}

#cascading-spacing .box .item:nth-child(1) { padding: var(--a-space-l); }
#cascading-spacing .box .item:nth-child(2) { padding: var(--a-space-m); }
#cascading-spacing .box .item:nth-child(3) { padding: var(--a-space-s); }

/* Forms & Inputs Section Enhancements */
.dropdown.example {
    margin-top: var(--a-space-m); /* Add top margin for spacing */
}

.dropdown.example .dropdown-toggle {
    /* Adjust button size if needed, e.g., use a smaller button class or custom padding */
    /* For now, let's ensure it's not excessively large */
    padding: var(--a-space-s) var(--a-space-m); /* Default button padding */
    font-size: var(--a-font-size-base); /* Default button font size */
}

/* Styles for the color palette section */
#color-palette h3 {
    margin-top: var(--a-space-xl); /* Add more space above each palette heading */
    margin-bottom: var(--a-space-m); /* Space below heading before grid */
}

#color-palette p {
    margin-bottom: var(--a-space-l); /* Space below paragraph before grid */
}

#color-palette .color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Adjust as needed */
    gap: var(--a-space-m);
}

#color-palette .swatch {
    height: 120px; /* Fixed height for visual consistency */
    border-radius: var(--a-border-radius-medium);
    display: flex;
    flex-direction: column; /* Arrange children vertically */
    justify-content: space-between; /* Push first child to top, second to bottom */
    padding: var(--a-space-s); /* Padding around the content */
    /* Removed default color: var(--a-color-on-surface); to allow specific on-container classes to dictate text color */
    overflow: hidden; /* Hide overflowing text */
    box-shadow: var(--a-shadow-small, var(--a-shadow-medium));
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#color-palette .swatch:hover {
    transform: translateY(-3px);
    box-shadow: var(--a-shadow-medium);
}

#color-palette .swatch .info {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background for readability */
    color: white; /* Ensure text is visible on dark background */
    padding: var(--a-space-xs) var(--a-space-s);
    border-radius: var(--a-border-radius-small);
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}

#color-palette .swatch .info h4 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: var(--a-font-weight-bold);
}

#color-palette .swatch .info p {
    margin: 0;
    font-size: 0.75rem;
    word-break: break-all; /* Allow long variable names to break */
}

/* Specific color assignments */
#color-palette .swatch.primary { background-color: var(--a-color-primary); }
#color-palette .swatch.secondary { background-color: var(--a-color-secondary); }
#color-palette .swatch.tertiary { background-color: var(--a-color-tertiary); }
#color-palette .swatch.surface { background-color: var(--a-color-surface); }
#color-palette .swatch.on-surface { background-color: var(--a-color-on-surface); }
#color-palette .swatch.outline { background-color: var(--a-color-outline); }

#color-palette .swatch.primary-container { background-color: var(--a-color-primary-container); }
#color-palette .swatch.secondary-container { background-color: var(--a-color-secondary-container); }
#color-palette .swatch.tertiary-container { background-color: var(--a-color-tertiary-container); }
#color-palette .swatch.error-container { background-color: var(--a-color-error-container); }

#color-palette .swatch.analogous-1 { background-color: var(--a-color-analogous-1); }
#color-palette .swatch.analogous-2 { background-color: var(--a-color-analogous-2); }
#color-palette .swatch.analogous-1-container { background-color: var(--a-color-analogous-1-container); }
#color-palette .swatch.analogous-2-container { background-color: var(--a-color-analogous-2-container); }

#color-palette .swatch.success { background-color: var(--a-color-success); }
#color-palette .swatch.warning { background-color: var(--a-color-warning); }
#color-palette .swatch.error { background-color: var(--a-color-error); }
#color-palette .swatch.info { background-color: var(--a-color-info); }

/* Gradients */
#color-palette .swatch.gradient-primary { background: var(--a-gradient-primary); }
#color-palette .swatch.gradient-sunset { background: var(--a-gradient-sunset); }
#color-palette .swatch.gradient-ocean { background: var(--a-gradient-ocean); }
#color-palette .swatch.gradient-forest { background: var(--a-gradient-forest); }

/* Greyscale */
#color-palette .greyscale-grid {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /* Smaller swatches for greyscale */
}

#color-palette .swatch.gray-1 { background-color: var(--a-color-gray-1); }
#color-palette .swatch.gray-5 { background-color: var(--a-color-gray-5); }
#color-palette .swatch.gray-10 { background-color: var(--a-color-gray-10); }
#color-palette .swatch.gray-15 { background-color: var(--a-color-gray-15); }
#color-palette .swatch.gray-20 { background-color: var(--a-color-gray-20); }
#color-palette .swatch.gray-25 { background-color: var(--a-color-gray-25); }
#color-palette .swatch.gray-30 { background-color: var(--a-color-gray-30); }
#color-palette .swatch.gray-36 { background-color: var(--a-color-gray-36); }

#color-palette .swatch span { /* For on-container text */
    font-size: 0.9rem;
    font-weight: var(--a-font-weight-bold);
    padding: var(--a-space-xs) var(--a-space-s);
    border-radius: var(--a-border-radius-small);
    background-color: rgba(255, 255, 255, 0.2); /* Re-added subtle background for readability */
    align-self: flex-start; /* Align to the start within the column */
    margin-bottom: var(--a-space-xs); /* Small separation from info block */
    /* Removed explicit color setting here to allow on-container classes to dictate text color */
}

#color-palette .swatch.small {
    height: 80px; /* Smaller height for greyscale swatches */
    flex-direction: row; /* Treat as a single row to center its single child */
    justify-content: center;
    align-items: center;
    padding: 0; /* Remove padding for small swatches to allow info to take full space */
}

#color-palette .swatch.small .info {
    background: none; /* No background for info in small swatches */
    color: inherit; /* Inherit color from swatch */
    text-align: center;
    padding: 0;
    width: auto; /* Allow info to shrink-wrap content */
}