/*
 * SodaStream Theme — skeleton-auto.css
 *
 * Main layout, typography, and base element styling.
 * This is where the bulk of your theme's design lives.
 *
 * Expected class hooks (referenced by LinkStack templates):
 *   .container           — page-width wrapper
 *   .row, .column        — grid layout (Skeleton.css-style)
 *   .logo-container      — wrapper around the avatar/logo at top of page
 *   .description-parent  — wrapper around the page description text
 *   .background-container, .parallax-background — themed background scaffolding
 *   .button + per-brand button-{name} variants are defined in brands.css
 *
 * Body, headings, paragraphs, links, etc. should all be styled here.
 *
 * Replace this stub with your theme's layout styling.
 */

/* === Body / page === */
body {
    background: linear-gradient(135deg, #7ECEFD 0%, #B4F096 100%);
    background-attachment: fixed;
    font-family: 'Quicksand', sans-serif;
    color: #0f1e6b; /* Deep Royal Blue inspired by the Ramuné logo */
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* === Layout === */
.container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px !important; /* Force padding on mobile to keep 100% width buttons off edges */
    box-sizing: border-box !important;
}

.row {
    display: flex;
    flex-wrap: wrap;
}

.social-icon-div {
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 20px;
    margin: 20px 0;
    flex-wrap: wrap;
    width: 100%;
}

/* Force padding on the wrappers that LinkStack uses to generate the main buttons */
.button-entrance {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

.social-icon {
    font-size: 1.8rem;
    color: #0f1e6b;
    transition: transform 0.3s ease, color 0.3s ease;
}

.social-icon:hover {
    transform: scale(1.2);
    color: #0077b6; /* Smooth ocean blue for the marble soda theme */
}

.column {
    width: 100%;
}

/* === Typography === */
h1, h2, h3, h4, h5, h6, .text-primary, .text-muted {
    text-align: center;
    color: #0f1e6b !important;
}

h1 {
    font-size: 2.2rem; /* Slightly larger for the logo feel */
    font-weight: 900; /* Extra bold to support the thick stroke */
    margin-bottom: 10px;
    
    /* Ramuné Logo Style for the Main Title */
    color: #ffffff !important;
    
    /* 
     * Use a 16-point mathematically rounded text-shadow outline. 
     * This prevents the "spiky octagon" uneven look of standard 8-point shadows
     * while guaranteeing the blue never bleeds into the white fill!
     */
    text-shadow: 
        /* 1px Inner Ring */
        -1px -1px 0 #0f1e6b, 1px -1px 0 #0f1e6b,
        -1px  1px 0 #0f1e6b, 1px  1px 0 #0f1e6b,
         0px -1px 0 #0f1e6b, 0px  1px 0 #0f1e6b,
        -1px  0px 0 #0f1e6b, 1px  0px 0 #0f1e6b,
        /* 2px Outer Ring (Diagonals set to 1.4px to maintain true 2px radius) */
         0px -2px 0 #0f1e6b, 0px  2px 0 #0f1e6b,
        -2px  0px 0 #0f1e6b, 2px  0px 0 #0f1e6b,
        -1.4px -1.4px 0 #0f1e6b, 1.4px -1.4px 0 #0f1e6b,
        -1.4px  1.4px 0 #0f1e6b, 1.4px  1.4px 0 #0f1e6b,
        /* Solid 3D Block Shadow */
         2px  2px 0 #0f1e6b,
         3px  3px 0 #0f1e6b,
         4px  4px 0 #0f1e6b;
    letter-spacing: 1px;
}

h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
}

p {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
    color: #0f1e6b !important;
}

.footer {
    text-align: center;
    width: 100%;
    margin-top: 20px;
}

.footer a {
    display: inline-block; /* Required for CSS transform animations to work */
    padding-bottom: 15px; /* Extend invisible hitbox downwards to prevent hover escape */
    margin-bottom: -15px; /* Counteract padding so layout doesn't expand */
    color: #1A3B5C; /* Explicitly retain the original navy blue for footer links */
}

.footer a:hover {
    /* Hover color is still CSS. Animation is now managed cleanly by JS 
       in custom-body-end.blade.php to prevent abrupt snapping! */
    color: #0077b6;
}

a {
    color: #0f1e6b;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:not(.button):hover {
    color: #0077b6; /* Smooth ocean blue for the marble soda theme */
}

/* === Logo / avatar === */
@property --border-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

#avatar, .rounded-avatar {
    display: block;
    margin: 0 auto 10px auto;
    opacity: 1; /* Fixes visibility conflict with LinkStack's default .fadein class */
    border-radius: 50%;
    box-shadow: 0 8px 16px rgba(26, 59, 92, 0.2);
    
    /* Use padding and an animated background to simulate a spinning gradient border! */
    padding: 4px;
    background: conic-gradient(from var(--border-angle), #84fab0, #8fd3f4, #84fab0);
    border: none;
    
    /* Run fadeIn first, then infinitely float, and spin the border constantly */
    animation: 
        fadeIn 0.8s forwards, 
        float 6s ease-in-out infinite 0.8s,
        spinBorder 4s linear infinite;
}

@keyframes spinBorder {
    from { --border-angle: 0deg; }
    to { --border-angle: 360deg; }
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* === Description block === */
.description-parent {
    text-align: center;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    border-radius: 15px;
    padding: 12px 22px !important; /* Extra horizontal padding to balance the visual space */
    margin: 0 auto 30px auto; /* Center the box itself and keep bottom margin */
    width: fit-content; /* Shrink the box to hug the text instead of stretching */
    max-width: 90%; /* Prevent it from overflowing on very small screens */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.description-parent p {
    margin: 0 !important; /* Strip top and bottom margins */
}

.description-parent p:empty {
    display: none; /* Hide LinkStack's ghost paragraphs */
}

/* === Background scaffolding (used when parallax is enabled) === */
.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.parallax-background {
    width: 100%;
    height: 100%;
}