/* ------------------------------------------------------------
   Ollato Eduversity - Meta CSS
   File: assets/css/includes/meta.css

   Purpose:
   - Small global browser-level helpers
   - Accessibility helpers
   - Focus states
   - Scrollbar styling
   - Basic page behavior connected with meta.php

   Note:
   - This file should stay lightweight.
   - Major layout styles should go in global/style.css.
------------------------------------------------------------ */


/* ------------------------------------------------------------
   Root Document Behavior
------------------------------------------------------------ */

html {
    scroll-padding-top: calc(var(--navbar-height) + 20px);
}

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


/* ------------------------------------------------------------
   Safe Focus Styling
------------------------------------------------------------ */

:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 3px;
}


/* ------------------------------------------------------------
   Skip Link
   Add this link later if needed:
   <a href="#mainContent" class="skip-link">Skip to content</a>
------------------------------------------------------------ */

.skip-link {
    position: absolute;
    top: -120px;
    left: var(--space-4);
    z-index: var(--z-overlay);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: var(--font-weight-semibold);
    box-shadow: var(--shadow-md);
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: var(--space-4);
    color: var(--color-white);
}


/* ------------------------------------------------------------
   Page Loading Behavior
------------------------------------------------------------ */

body.is-loading {
    overflow: hidden;
}

body.is-loaded {
    overflow-x: hidden;
}


/* ------------------------------------------------------------
   No Script Message
   Optional usage:
   <noscript>
       <div class="noscript-message">Please enable JavaScript.</div>
   </noscript>
------------------------------------------------------------ */

.noscript-message {
    padding: var(--space-4);
    background-color: var(--color-warning-light);
    color: #7a5800;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-align: center;
}


/* ------------------------------------------------------------
   Browser Scrollbar
------------------------------------------------------------ */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background-color: var(--color-section-bg);
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-primary);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-primary-dark);
}


/* Firefox Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) var(--color-section-bg);
}


/* ------------------------------------------------------------
   Image Loading Improvements
------------------------------------------------------------ */

img {
    image-rendering: auto;
}

img[loading="lazy"] {
    background-color: var(--color-section-bg);
}


/* ------------------------------------------------------------
   Anchor Target Offset
------------------------------------------------------------ */

[id] {
    scroll-margin-top: calc(var(--navbar-height) + 24px);
}


/* ------------------------------------------------------------
   Hidden Attribute Support
------------------------------------------------------------ */

[hidden] {
    display: none !important;
}


/* ------------------------------------------------------------
   Selection Styling
------------------------------------------------------------ */

::selection {
    background-color: var(--color-primary);
    color: var(--color-white);
}

::-moz-selection {
    background-color: var(--color-primary);
    color: var(--color-white);
}


/* ------------------------------------------------------------
   Reduced Motion Support
------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}