/* Custom CSS for Macrosfera Apps Landing Page */

/* Material Icons styling */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
}

/* Background grid styling */
.architectural-grid {
    background-image: linear-gradient(to right, #233554 1px, transparent 1px),
                      linear-gradient(to bottom, #233554 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Luminous borders on cards */
.luminous-border {
    border: 1px solid #233554;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}
.luminous-border:hover {
    border-color: #38debb;
    box-shadow: 0 0 15px rgba(56, 222, 187, 0.15);
    transform: translateY(-2px);
}

/* Primary Button Styling */
.btn-primary {
    background-color: #38debb;
    color: #08132a;
    font-weight: 700;
    transition: all 0.3s ease;
}
.btn-primary:hover {
    background-color: #5ffbd6;
    transform: translateY(-1px);
}

/* Glassmorphism Panels */
.glass-panel {
    background: rgba(10, 25, 47, 0.85);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(35, 53, 84, 0.6);
}

/* Accessible focus outlines */
:focus-visible {
    outline: 2px solid #38debb !important;
    outline-offset: 3px !important;
}

/* Visually Hidden Utility for screen readers */
.visually-hidden {
    position: absolute !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: nowrap !important;
}

/* Skip-to-content Link styling */
.skip-link {
    position: absolute;
    top: -100px;
    left: 20px;
    z-index: 100;
    background: #38debb;
    color: #08132a;
    font-weight: bold;
    padding: 10px 20px;
    transition: top 0.2s ease;
}
.skip-link:focus-visible {
    top: 20px;
}

/* Native dialog styling */
dialog {
    background: #0d1b32;
    border: 1px solid rgba(56, 222, 187, 0.3);
    color: #d9e2ff;
    padding: 2.5rem;
    max-width: 650px;
    width: 90%;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    scrollbar-width: thin;
    scrollbar-color: #233554 #08132a;
}
dialog::backdrop {
    background: rgba(3, 13, 37, 0.85);
    backdrop-filter: blur(8px);
}
dialog::-webkit-scrollbar {
    width: 6px;
}
dialog::-webkit-scrollbar-track {
    background: #08132a;
}
dialog::-webkit-scrollbar-thumb {
    background-color: #233554;
    border-radius: 3px;
}

/* Form validation styles */
.input-invalid {
    border-color: #ffb4ab !important;
    box-shadow: 0 0 8px rgba(255, 180, 171, 0.25) !important;
}
.error-msg-span {
    color: #ffb4ab;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Mobile drawer side panel styling */
.drawer-transition {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom scrollbars */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #08132a;
}
::-webkit-scrollbar-thumb {
    background: #233554;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #38debb;
}

/* Global paragraph alignment and justification */
p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

/* Feature card alignment and symmetry */
.feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center !important;
}
.feature-card p,
.feature-card h3,
.feature-card span {
    text-align: center !important;
    text-justify: none !important;
    hyphens: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}