/* ==========================================================================
   TABLE OF CONTENTS
   1. Global & Base Styles
   2. Typography
   3. Splash Screen
   4. Navigation Bar (Navbar)
   5. Main Layout & Text Containers
   6. Image Galleries & Banners
   7. Components (Social Bubble)
   8. Responsive Design (Media Queries)
   ========================================================================== */

/* ==========================================================================
   1. GLOBAL & BASE STYLES
   Basic element resets and page-wide background animations.
   ========================================================================== */

body {
    /*font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;*/
    margin: 0;
    background: #ff6a00;  /* fallback for browsers that don't support gradients */
    background: linear-gradient(135deg, #ffbf00, #ff6200); /* gradient for header */
    background-size: 400%;
    animation: anim 1s infinite alternate; /* animation for gradient */
    font-family: 'Kanit';
}

@keyframes anim {
    from {
        background-position: 0%;
    }
    to {
        background-position: 100%;
    }
}

/* Base link and main title transition effects */
a, h1 {
    text-decoration: none;
    color: rgb(255, 255, 255);
    transition: all ease-in-out 300ms;
}

/* Link hover animation (the orange underline effect) */
a::after {
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    background-color: #ff6a00;  
    transition: all ease-in-out 300ms;
}

a:hover::after {
    width: 100%;
}

a:hover {
    color: #ff6a00;
}


/* ==========================================================================
   2. TYPOGRAPHY
   Global text sizing, spacing, and special fonts.
   ========================================================================== */

h1 {
    padding-top: 1%;
    font-size: 40px;
}

h2, h5, h4 {
    padding-left: 5%;
}

h3 {
    padding-left: 5%;
    font-size: 20px;       /* change text size */
    font-weight: 500;      /* make it medium weight instead of bold (700) */
}

p {
    margin: 0;
    padding: 0; 
}

/* Letter-style cursive text (moved from o_nas.html) */
p.special {
    font-family: "Playwrite CZ", cursive;
    font-size: clamp(16px, 1.8vw, 24px); 
    font-weight: 500;
    line-height: 1.6; 
    margin: 0; 
    padding: 50 50 50 50; /* Note: browsers require a unit like 'px' here to work! */
    max-width: 75ch; 
}


/* ==========================================================================
   3. SPLASH SCREEN
   The full-screen logo fade-in on initial load.
   ========================================================================== */

#splash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transform: translateY(0);
    transition: all 1s ease;
}

#splash.fade-out {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}

#splash img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* ==========================================================================
   4. NAVIGATION BAR (NAVBAR)
   The top sticky header, links, dropdowns, and language flags.
   ========================================================================== */

/* Main navbar container */
#navbarr {
    width: 100%;
    background-color: #192024;
    font-weight: bold;
    display: flex;
    align-items: center;
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 5px solid black;
}

#navbarr ul, li {
    list-style: none;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-items: center;
    padding: 0.5em 0;
    margin-left: 25px;
    float: left;
}

/* Navbar Logo */
#navbarr .logo {
    order: -2;                  /* leftmost before flags (flags use order -1) */
    height: 40px;               /* control height so it doesn't break navbar */
    width: auto;
    margin-left: 10px;
    margin-right: 1px;
    object-fit: contain;
    flex-shrink: 0;             /* prevent logo from shrinking */
    align-self: center;
    cursor: default;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 1200;
}

/* Language Flags */
#navbarr .flags {
    order: -1;                  /* minimum order => leftmost in flex row */
    display: flex !important;
    align-items: center;
    margin-left: 3px;      /* small left offset from viewport edge */
    z-index: 1200;
}

.flag {
    width: 25px; 
    height: 25px;
    cursor: pointer;
}

/* Fade flags + logo together when the side menu is open on mobile */
#navbarr.menu-active .flags,
#navbarr.menu-active .nav-logo {
    opacity: 0.25;              /* faded look */
    pointer-events: none;       /* optional: make them non-interactive while menu open */
}

/* Smooth default state for flags & logo */
#navbarr .flags, #navbarr .nav-logo {
    transition: opacity 0.25s ease;
}

/* Desktop Menu Links */
#navbarr .menu {
    list-style: none;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-items: center;
    margin-left: 25px;
    text-align: left;
    transition: transform 0.3s ease;
}

/* Submenu Dropdowns */
#navbarr .submenu {
    position: relative;
}

#navbarr .submenu-content,
.nested-dropdown {
    display: none;
    position: absolute;
    background-color: gray;
    list-style: none;
    padding-left: 10px;
    padding-right: 20px;
    margin: 0px;
    border-radius: 5px;
    top: 100%;
    left: 0;
    z-index: 1000;
    opacity: 0;
    font-size: 15px;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    border: 1px solid #ccc;
}

#navbarr .submenu-content li {
    margin: 0px;
    padding: 0px;
}

/* Show dropdowns on click/hover */
#navbarr .submenu.show .submenu-content {
    display: block;
    opacity: 1;
    visibility: visible;
}

.has-submenu:hover .nested-dropdown,
.has-submenu.active .nested-dropdown {
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
}

/* Mobile Menu Toggle & Overlay (Hidden on desktop) */
#navbarr .menu-toggle {
    display: none;
    background: none;
    color: white;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    margin-left: auto;
    padding: 10px;
}

#navbarr .overlay {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
}

#navbarr.active .menu {
    transform: translateX(0);
    right: 0;
    z-index: 3000;
}


/* ==========================================================================
   5. MAIN LAYOUT & TEXT CONTAINERS
   The structural grid and the stylized letter-box container.
   ========================================================================== */

/* The primary dual-column wrapper */
.container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    /* Changed from 'height' to 'min-height' so it doesn't force empty space */
    min-height: calc(100vh - 190px); 
    padding: 20px;
    box-sizing: border-box;
}

/* The left-side "paper" text box */
.text {
    flex: 1;
    /* Shaved this down to a fixed pixel value so it's consistent on ALL devices */
    padding: 25px; 
    
    display: flex;
    flex-direction: column;
    gap: 20px; 
    
    background-color: #fdfaf0;
    color: #1a1a1a; 
    box-shadow: inset 0 0 40px rgba(0,0,0,0.04);
    border: 10px solid #192024; /* REMOVE THIS LINE to go borderless! */
    
    box-sizing: border-box;
    overflow-y: auto;
    text-align: left;
}


/* ==========================================================================
   6. IMAGE GALLERIES & BANNERS
   Styling for standalone images, certificates, and cinematic header slices.
   ========================================================================== */

/* 1. The container becomes an invisible alignment box */
.images {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
    /* Remove any background or border from the container itself */
    background-color: transparent; 
    border: none; 
    
    padding: 10px; /* Keeps the frame slightly away from the screen edges */
    box-sizing: border-box;
}

/* 2. The frame is applied directly to the image for a dynamic shrink-wrap effect */
.images img {
    /* max-width/max-height ensures it scales down for small screens, 
       but width: auto prevents it from stretching into empty space */
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    
    /* Apply your thick global frame directly to the image */
    border: 10px solid #192024; /* REMOVE THIS LINE to go borderless! */
    
    /* Optional: A white background in case you ever use transparent PNG logos */
    background-color: #ffffff; 
    
    /* Set to 0 so the dark border sits flush against the photo */
    padding: 0; 
    box-sizing: border-box;
    
    /* Adds a subtle drop shadow to make the framed photos pop off the orange background */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); 
}

/* Cinematic Top Banner Container */
.image-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center; 
    gap: 2%;
    background: #000000;
    
    /* THE FIX: Replaces height and min-height with a perfect scaling ratio */
    aspect-ratio: 4 / 1; /* 4 parts wide, 1 part tall. (Change to 5/1 for a thinner slice!) */
    
    overflow: hidden; 
}

/* Elements inside the cinematic banner */
.responsive-image {
    width: 32%; 
    height: auto; /* Lets the side photos keep their natural shape for the slice */
    padding: 0;
}

/* Protect the center logo from the guillotine in the banner */
.image-container .responsive-image:nth-child(2) {
    max-height: 85%; /* Ensures the logo always fits inside the slice with a tiny buffer */
    object-fit: contain; 
}


/* ==========================================================================
   7. COMPONENTS (SOCIAL BUBBLE)
   The floating contact/social links in the bottom corner.
   ========================================================================== */

.social-bubble {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    z-index: 9999;
}

/* Circle buttons */
.social-bubble__btn {
    display: inline-grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    overflow: hidden;
    background-clip: padding-box;

    /* prevent underlines / orange lines */
    text-decoration: none !important;
    color: inherit;
    -webkit-text-decoration-color: transparent !important;
    text-decoration-color: transparent !important;
    -webkit-tap-highlight-color: transparent;
}

/* Icons inside buttons */
.social-bubble__btn img {
    display: block;
    padding-top: 7px;
    margin: auto;
    width: 32px;
    height: 42px;
    object-fit: contain;
    vertical-align: middle;
    pointer-events: none;
}

/* Hover effect */
.social-bubble__btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

/* Focus effect (accessible ring) */
.social-bubble__btn:focus {
    outline: 3px solid rgba(255, 255, 255, 0.18);
    outline-offset: 3px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

/* Remove global site link decorations for these only */
.social-bubble__btn:link,
.social-bubble__btn:visited,
.social-bubble__btn:hover,
.social-bubble__btn:focus,
.social-bubble__btn:active {
    text-decoration: none !important;
    color: inherit !important;
}


/* ==========================================================================
   8. RESPONSIVE DESIGN (MEDIA QUERIES)
   Layout adjustments for laptops, tablets, and mobile phones.
   ========================================================================== */

/* Large screens / Small laptops (Stack main text and images) */
@media (max-width: 1300px) {
    .container {
        flex-direction: column;
        height: auto;
    }
    .text, .images {
        max-width: 100%;
    }
    .images img {
        width: 100%;
    }
}

/* Tablets (Switch to mobile hamburger menu) */
@media screen and (max-width: 1000px) {
    #navbarr .menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 50%;
        height: 100%;
        background-color: #192024;
        flex-direction: column;
        padding-top: 20px;
        transform: translateX(100%);
        z-index: 1001;
        text-align: left;
    }

    #navbarr .menu-toggle {
        display: block;
    }

    #navbarr.active .menu {
        transform: translateX(0);
        right: 0;
        float: left;
    }

    #navbarr.active .overlay {
        display: block;
    }
}

/* Small Tablets / Large Phones (Adjust dropdowns) */
@media (max-width: 768px) {
    .submenu-content,
    .nested-dropdown {
        position: static;
        border: none;
        background: none;
    }

    .submenu.show .submenu-content,
    .has-submenu.active .nested-dropdown {
        display: block;
    }
}

/* Tiny screens (Shrink social bubble) */
@media (max-width: 420px) {
    .social-bubble__btn {
        width: 44px;
        height: 44px;
    }
    .social-bubble__btn img {
        width: 20px;
        height: 20px;
    }
}