@charset "UTF-8";
/* CSS Document */

/* General styling */

@font-face {
	font-family:'Red Hat Display Black';
	font-weight:bold;/* defines better compatibilty with Safari*/
	font-weight: 900;
	src:url("../fonts/RedHatDisplay-Black.ttf") format('truetype');
}

@font-face {
	font-family:'Red Hat Display';
	font-weight:normal;/* defines better compatibilty with Safari*/
    font-weight: 400;
	src:url("../fonts/RedHatDisplay-Regular.ttf") format('truetype');
}

@font-face {
    font-family:'Red Hat Italic';
	font-weight:bold;  /* defines better compatibilty with Safari*/
	font-weight: 200;
    src:url("../fonts/RedHatDisplay-LightItalic.ttf") format('truetype');
}

:root {
    --brand-red: #D90429;
    --dark-black: #111111;
    --dark-grey: #2B2D42;
    --light-grey: #EDF2F4;
    --text-grey: #8D99AE;
    --white: #FFFFFF;
	
    /* Tipografia */
    --titulo: 'Red Hat Display Black', Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	--parrafo: 'Red Hat Display', Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	--italic: 'Red Hat Italic', Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	--titulo2: 'Anton', Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

html {scroll-behavior: smooth;}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: var(--parrafo) }
body { background-color: var(--light-grey); color: var(--dark-black); line-height: 1.6; }
a { text-decoration: none; color: inherit; }

/* Top Bar */
.top-bar { background-color: var(--dark-black); color: var(--white); padding: 15px 5%; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; }
.logo { font-size: 1.5rem; font-weight: bold; color: var(--brand-red); display: flex; flex-direction: row; align-items: center}
.logo img {height:60px; width: auto}
.search-form { display: flex; flex: 1; max-width: 400px; margin: 0 20px; }
.search-form input { width: 100%; padding: 8px 15px; border: none; border-radius: 4px 0 0 4px; outline: none; }
.search-form button { padding: 8px 15px; background-color: var(--brand-red); color: var(--white); border: none; border-radius: 0 4px 4px 0; cursor: pointer; }
.idioma {background: var(--brand-red); padding: 5px; margin: 0 0 0 5px; display: flex; align-items: center; border-radius: 5px; aspect-ratio: 1 / 1;}
.idioma svg {fill: var(--white)}

/* BUTTONS */
.btn-xbit2 {
  /* Layout: Button grows with text */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0 40px;
  margin: 20px 0;
  z-index: 1;
	
  /* Styling */
  background: transparent;
  border: 1px solid var(--brand-red); /* Faint base border */
  border-radius: calc(60px / 2);
  color: var(--white);
  font-family: var(--titulo) , sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  overflow: hidden; /* Clips the sliding text */
  transition: transform 0.3s ease-in-out;
}

.btn-xbit2:hover {background: rgba(233, 15, 15, 0.5); transform: scale(1.05)}


/*Tooltip texts*/

.tooltip { position: relative; font-size: 1rem; display: flex; justify-content: center; align-items: center;}
.tooltiptext {
  visibility: hidden;
  opacity: 0;
  width: 120px;
  background-color: #EAEAEA;
  color: var(--dark-black);
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  transition: opacity 0.3s;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	font-size: 0.5rem;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}


/* Hero Section */
.hero { background: linear-gradient(rgba(17, 17, 17, 0.7), rgba(17, 17, 17, 0.7)), url('../media/bg_now2.jpg') center/cover; color: var(--white); text-align: center; padding: 100px 20px; }
.hero h1 { font-size: 4rem; margin-bottom: 10px; font-family: var(--titulo); line-height: 4rem}
mark.custom-highlight { background-color: var(--brand-red); color: var(--dark-black);padding: 5px; font-size: 2.5rem; font-family: var(--titulo); margin: 5px;}
mark.custom-highlight:hover {background-color: var(--dark-black); color: var(--brand-red);}

/* Main Layout */
.container { display: flex; flex-wrap: wrap; max-width: 1200px; margin: 40px auto; padding: 0 20px; gap: 30px; }
.main-content { flex: 3; min-width: 300px; }
.sidebar { flex: 1; min-width: 250px; background-color: var(--white); padding: 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); height: fit-content; }


/* NEWSLETTER */

    .newsletter-overlay {
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0, 0, 0, 0.85);
        display: flex; align-items: center; justify-content: center;
        z-index: 5;
    }

    .newsletter-modal-content {
        background: var(--white);
        padding: 30px;
        width: 90%; max-width: 400px;
        border-radius: 14px;
        border-top: 6px solid var(--brand-red);
        position: relative;
        text-align: center;
        font-family: var(--parrafo), sans-serif;
		border: 0px solid green;
    }

    .newsletter-header-img { width: 100%; margin-bottom: 20px; border-radius: 2px; }

    .newsletter-close-btn {
        position: absolute; top: 10px; right: 15px;
        font-size: 28px; cursor: pointer; color:  #808080;
    }

    .newsletter-input {
        width: 100%;
		padding: 12px;
		margin: 5px 0;
        border: 1px solid #ccc; box-sizing: border-box;
		border-radius: 15px;
    }

    .newsletter-submit-btn {
        background: var(--dark-black);
        color: white;
		border: none;
		margin-top: 5px;
		padding: 12px 30px;
        font-weight: bold;
		cursor: pointer;
		width: 100%;
		border-radius: 15px;
    }

    .newsletter-submit-btn:hover { background: var(--brand-red); }

    .newsletter-success-title { color: var(--brand-red); margin-top: 10px; font-family: var(--titulo)}
	
	.newsletter-text {color: #000000}

	.newsletter-title {color: var(--brand-red); margin: 5px 0; font-family: var(--titulo);}
	#newsletter-form-container p {color: var(--dark-black)}

	/* Animation Keyframes */
    @keyframes newsletterFadeDown {
        from {
            opacity: 0;
            transform: translateY(-50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .newsletter-animate-down {
        animation: newsletterFadeDown 0.5s ease-out;
    }

/* Post Grid */
.section-title { border-bottom: 3px solid var(--brand-red); display: inline-block; padding-bottom: 5px; margin-bottom: 20px; }
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.post-card { background: var(--white); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.05); transition: transform 0.3s; }
.post-card:hover { transform: translateY(-5px); }
.post-card img { width: 100%; height: 200px; object-fit: cover; }
.post-card-content { padding: 15px; }
.post-tags { font-size: 0.8rem; color: var(--brand-red); margin-bottom: 5px; font-weight: bold; }
.post-card h3 { font-size: 1.2rem; margin-bottom: 10px; }
.post-meta { font-size: 0.85rem; color: var(--text-grey); }
.featured-badge { background-color: var(--brand-red); color: var(--white); padding: 3px 8px; font-size: 0.7rem; border-radius: 3px; vertical-align: middle; margin-right: 5px; }

/* Load More */
.post-hidden { display: none; }
.load-more-container { text-align: center; margin: 40px 0; }
.load-more-btn { background-color: var(--dark-grey); color: var(--white); border: none; padding: 10px 30px; font-size: 1rem; cursor: pointer; border-radius: 4px; transition: background 0.3s; }
.load-more-btn:hover { background-color: var(--brand-red); }

/* Sidebar Elements */
.social-icons { display: flex; gap: 15px; margin-bottom: 30px; }
.social-icons a { color: var(--dark-grey); font-size: 1.5rem; transition: color 0.3s; }
.social-icons a:hover { color: var(--brand-red); }
.older-posts-list { list-style: none; }
.older-posts-list li { margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.older-posts-list a:hover { color: var(--brand-red); }

/* Forms & Admin */
.admin-form, .comment-form { display: flex; flex-direction: column; gap: 15px; background: var(--white); padding: 20px; border-radius: 8px; }
.admin-form input, .admin-form textarea, .comment-form input, .comment-form textarea { padding: 10px; border: 1px solid #ccc; border-radius: 4px; width: 100%; }
.btn { padding: 10px 20px; background: var(--brand-red); color: var(--white); border: none; cursor: pointer; border-radius: 4px; display: inline-block;}
.btn-danger { background: var(--dark-black); }
.admin-table { width: 100%; border-collapse: collapse; margin-top: 20px; background: var(--white); }
.admin-table th, .admin-table td { padding: 12px; border: 1px solid #eee; text-align: left; }

 #loading-message { font-style: italic; color: #888; }
       
        #dashboard-content {
        display: none;
        z-index: 3;
    } /* Hidden by default until user is authenticated */
        
        .user-info {
        display: flex;
        justify-content: left;
        align-items: center;
        margin-bottom: 0 0 0 20px;
        padding: 15px;
        border: 1px solid #eee;
        border-radius: 5px;
        background-color: #f9f9f9;
        width: 100%;
        outline: 0px solid red;
    }

        .user-info img {
            width: 50px;
            height: auto;
            background-color: #ffffff;
        }

        .user-info div {
            margin: 0 0 0 10px;
            outline: 0px solid red;
        }

        h1, p {
            margin: 0;
        }

        #signOutButton {
        padding: 10px 15px;
        background-color: #e63030;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        position: absolute;
        right: 20px;
    }
       

        #signOutButton:hover { background-color: #cc0000; }

        #sessionTimerContainer {
            display: none; /* Hidden by default */
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #f8d7da; /* Light red background */
            border: 1px solid #f5c6cb;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            z-index: 1000; /* Ensure it's on top of other content */
            text-align: center;
        }
        #sessionWarningMessage {
            color: #721c24; /* Dark red text */
            font-weight: bold;
            margin-bottom: 8px;
        }
        #countdownDisplay {
            font-size: 1.5em;
            color: #dc3545; /* Red countdown text */
        }


/* Responsive */
@media (max-width: 768px) {
    .top-bar { flex-direction: column; gap: 15px; }
    .search-form { max-width: 100%; width: 100%; margin: 0; }
}

@media screen and (max-width: 450px) {

         .user-info {
        flex-direction: column;
        outline: 0px solid red;
        padding: 10px;
        text-align: center;
        width: 90%;
        margin: 0 auto;
    }


        button img {width: 60px;}

         h1, p {
            margin: 10px 0;
        }

         #signOutButton {
            position: fixed;
            width: 50%;
            right: 20px;
            left: 20px;
            bottom: 20px;
            z-index: 3;
        }
}