/*!
Theme Name: Ampersand Prime
Theme URI: http://underscores.me/
Author: Holymonkey
Author URI: https://holymonkey.cl
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: ampersand-prime
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Ampersand Prime is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

:root {
  --bg-dark: #0f0f0f;
  --accent: #e50914; /* Rojo Netflix, cámbialo por dorado si prefieres */
  --text: #ffffff;
}

.wedding-stream-container {
  background-color: var(--bg-dark);
  color: var(--text);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* Navbar */
.ws-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 4%;
  position: fixed;
  width: 92%;
  z-index: 1000;
  background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 100%);
}

.ws-logo {
  font-weight: bold;
  font-size: 24px;
  letter-spacing: 2px;
  color: var(--text);
}

.ws-nav-links {
  list-style: none;
  display: flex;
  gap: 20px;
}

.ws-nav-links a {
  text-decoration: none;
  color: #e5e5e5;
  font-size: 14px;
  transition: 0.3s;
}

.ws-nav-links a.active, .ws-nav-links a:hover {
  color: white;
  font-weight: bold;
}

/* Hero Section */
.ws-hero {
  position: relative;
  height: 80vh;
  overflow: hidden;
}

.ws-hero-video-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ws-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(77deg, rgba(0,0,0,0.8) 0%, transparent 85%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 4%;
}

.ws-hero-overlay h1 { font-size: 4rem; margin-bottom: 10px; }
.ws-hero-overlay p { max-width: 500px; font-size: 1.2rem; margin-bottom: 20px; }

.ws-hero-buttons { display: flex; gap: 10px; }
.btn-play { padding: 10px 25px; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; background: white; color: black; }
.btn-info { padding: 10px 25px; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; background: rgba(109, 109, 110, 0.7); color: white; }

/* Contenido / Grilla */
.ws-content { padding: 40px 4%; margin-top: -100px; position: relative; z-index: 10; }
.ws-category h2 { font-size: 1.4rem; margin-bottom: 15px; }
.ws-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 40px; }

.ws-card { position: relative; overflow: hidden; border-radius: 4px; transition: transform 0.3s; cursor: pointer; }
.ws-card:hover { transform: scale(1.05); }
.ws-card img { width: 100%; height: auto; display: block; }
.ws-card span { position: absolute; bottom: 10px; left: 10px; font-size: 0.9rem; font-weight: bold; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); }


/* LOGIN FORM */

.login-username, .login-password{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.login-username label, .login-password label{
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

#user_login, #user_pass {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    outline: 2px solid transparent;
    outline-offset: 2px;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    padding-right: 3rem;
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: rgb(34 16 22 / 0.5);
    border-color: rgb(236 19 91 / 0.2);
    border-width: 1px;
    border-radius: 0.5rem;
    width: 100%;
    height: 3.5rem;

}



.button-primary {

    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    --tw-shadow-color: rgb(236 19 91 / 0.2);
    --tw-shadow: var(--tw-shadow-colored);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    font-weight: 700;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: rgb(236 19 91 / var(--tw-bg-opacity, 1));
    border-radius: 0.5rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    width: 100%;
    margin-top: 1rem;
    cursor: pointer;
    -webkit-appearance: button;
    text-transform: none;
}


/*  HOME */

.prime-logo {
    max-width: 150px;
}