/*
Theme Name: Grupo Almirant
Theme URI: grupoalmirant.com
Description: Tema personalizado de Grupo Almirant
Version: 1.0
Author: Grupo Almirant
Author URI: grupoalmirant.com
License: GPL v2 or later
*/

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #314D78;
    overflow-x: hidden;
}

/* WordPress specific resets */
.wp-block-group,
.wp-block-columns {
    margin-bottom: 0;
}

.alignfull {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Hero Section */
.hero {
    min-height: 100vh;
    background: #314D77;
    position: relative;
    overflow: hidden;
}

/* Decorative waves */
.hero::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 120V46.29C47.79 22.94 103.59 10.07 158.208 10.07C212.826 10.07 268.638 22.94 316.428 46.29C364.218 69.64 420.03 82.51 474.648 82.51C529.266 82.51 585.078 69.64 632.868 46.29C680.658 22.94 736.47 10.07 791.088 10.07C845.706 10.07 901.518 22.94 949.308 46.29C997.098 69.64 1052.91 82.51 1107.53 82.51C1162.15 82.51 1217.96 69.64 1265.75 46.29L1200 120H0Z' fill='%23166534'/%3E%3C/svg%3E") repeat-x;
    background-size: 1200px 120px;
    opacity: 0.3;
}

/* Navigation */
.nav-container {
    position: fixed;
    top: 0;
    width: 100%;
    background: #314D78;
    backdrop-filter: blur(10px);
    z-index: 1000;
    transition: all 0.3s ease;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.logo {
    font-size: 1.8rem;
    font-weight: 300;
    letter-spacing: 3px;
    color: white;
    text-transform: uppercase;
}

/* Custom logo styling */
.custom-logo {
    max-height: 4rem;
    width: auto;
}

.nav-right {
    text-align: center;
    letter-spacing: 1px;
}

.line-divisor {
    width: 100%;
    text-align: center;
    height: 1px;
    margin: 1.5% 0%;
    background-color: #ffffff;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2.5rem;
    align-items: center;
    margin: 0;
    padding: 0;
}

.nav-item a,
.nav-menu li a {
    color: white;
    text-decoration: none;
    font-weight: 400;
    font-size: 0.95rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color 0.3s ease;
    position: relative;
}

.nav-item a:hover,
.nav-menu li a:hover {
    color: #60a5fa;
}

.nav-item a::after,
.nav-menu li a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: #60a5fa;
    transition: width 0.3s ease;
}

.nav-item a:hover::after,
.nav-menu li a:hover::after {
    width: 100%;
}

/* Mobile menu toggle */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
	background-color: transparent;
    gap: 4px;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: white;
    transition: 0.3s;
}

/* Hero Content */
.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
}

.hero-title {
    font-size: clamp(2.5rem, 8vw, 6rem);
    font-weight: 300;
    font-style: italic;
    text-shadow: -0.5px 0.5px 3px #000000;
	text-align: left;
	color: #ffffff;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    letter-spacing: 2px;
    opacity: 0;
    animation: fadeInUp 1s ease 0.5s forwards;
}

.hero-subtitle {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
	font-weight: 300;
	text-align: left;
	color: #ffffff;
    margin-bottom: 2rem;
    max-width: 800px;
    opacity: 0.9;
    letter-spacing: 1px;
    opacity: 0;
    animation: fadeInUp 1s ease 0.8s forwards;
}

/* Video indicator */
.video-indicator {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    letter-spacing: 1px;
    opacity: 0;
    animation: fadeIn 1s ease 1.2s forwards;
}

/* Page Content Section */
.page-content {
    padding: 4rem 2rem;
    background: #f8f9fa;
    color: #333;
}

.page-content .container {
    max-width: 1200px;
    margin: 0 auto;
}

/* WordPress Block Editor Support */
.wp-block-group {
    margin-bottom: 2rem;
}

.wp-block-heading {
    margin-bottom: 1rem;
}

.wp-block-paragraph {
    margin-bottom: 1rem;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        flex-direction: column;
        background: rgba(49, 77, 120, 0.98);
        backdrop-filter: blur(10px);
        width: 100%;
        height: 100vh;
        justify-content: center;
        transition: right 0.3s ease;
        gap: 3rem;
    }

    .nav-menu.active {
        right: 0;
    }

    .hamburger {
        display: flex;
        z-index: 1001;
		background: transparent;
    }

    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }

    .navbar {
        padding: 1rem;
    }

    .hero-content {
        padding: 0 1rem;
    }

    .video-indicator {
        bottom: 1rem;
        right: 1rem;
        font-size: 0.8rem;
    }

    .nav-right {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .logo {
        font-size: 1.4rem;
        letter-spacing: 2px;
    }

    .hero-title {
        margin-bottom: 1rem;
    }

    .hero-subtitle {
        margin-bottom: 1.5rem;
    }

    .nav-right {
        font-size: 0.8rem;
    }
}

/* Hover effects and interactions */
.hero {
    transition: all 0.3s ease;
}

.hero:hover::before {
    opacity: 0.4;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* WordPress Admin Bar Compatibility */
.admin-bar .nav-container {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .nav-container {
        top: 46px;
    }
}

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link */
.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 999999999;
    text-decoration: none;
}

.skip-link:focus {
    display: block;
    left: 6px;
    top: 7px;
    z-index: 999999999;
    padding: 8px 16px;
    background: #000;
    color: #fff;
    text-decoration: none;
}