/* Philadelphia Argentine Tango School - Static Site Styles */

/* ============================================
   RESET & BASE STYLES
   ============================================ */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: 'Roboto', sans-serif;
  vertical-align: baseline;
  background-color: white;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

/* ============================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================ */

:root {
  --color-primary: #b01116;
  --color-dark: #191717;
  --color-text: #231f20;
  --color-white: #ffffff;
  --header-height: 85px;
  --container-max-width: 1200px;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.4rem 0;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

p {
  line-height: 1.6;
  margin: 0 0 1rem 0;
}

a {
  color: var(--color-primary);
  text-decoration: underline;
  transition: opacity 0.3s ease;
}

a:hover {
  opacity: 0.8;
}

.btn-register,
.cta,
.btn-primary {
  text-decoration: none;
}

/* ============================================
   LAYOUT UTILITIES
   ============================================ */

.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 16px;
}

/* ============================================
   HEADER STYLES
   ============================================ */

#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background-color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 999;
  width: 100%;
}

.header-container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  height: 85px;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* Menu Toggle Button - Always visible like original */
.menu-toggle-wrapper {
  padding: 0 0 0 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-icon-button {
  background: transparent;
  border: none;
  padding: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
  height: 48px;
}

.menu-label {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(0, 0, 0, 0.54);
  font-family: 'Roboto', sans-serif;
}

.menu-icon-button:hover {
  background-color: rgba(176, 17, 22, 0.08);
}

.menu-icon-button:hover .menu-icon {
  fill: var(--color-primary);
}

.menu-icon-button:hover .menu-label {
  color: var(--color-primary);
}

.menu-icon {
  width: 24px;
  height: 24px;
  fill: rgba(0, 0, 0, 0.54);
  display: block;
}

/* Logo Container - matches original header.js */
.logo-container {
  padding: 0 0 0 10px;
  flex: 1;
  display: flex;
  align-items: center;
}

.logo-container #logo-link {
  cursor: pointer;
  line-height: 0;
}

.logo-container svg {
  height: 50px;
  width: auto;
  display: block;
  max-width: 100%;
}

/* Ensure logo is visible and properly sized */
#logo-link {
  display: inline-block;
  line-height: 0;
}

#logo-link svg {
  height: 50px;
  width: auto;
}

/* Header Button */
.header-button {
  display: none;
  margin: 0 15px 0 0;
  flex-shrink: 0;
}

.header-button .btn-register {
  background-color: var(--color-primary);
  color: white;
  padding: 10px 44px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 1.1rem;
  white-space: nowrap;
}

.header-button .btn-register:hover {
  opacity: 1;
  background-color: #c9383d;
}

@media (min-width: 600px) {
  .header-button {
    display: block;
  }
}

/* ============================================
   MOBILE DRAWER MENU
   ============================================ */

.menu-drawer {
  position: fixed;
  top: var(--header-height);
  left: -100%;
  width: 280px;
  height: calc(100vh - var(--header-height));
  background-color: white;
  box-shadow: 2px 0 8px rgba(0,0,0,0.15);
  transition: left 0.3s ease;
  z-index: 1001;
  overflow-y: auto;
  opacity: 0;
}

.menu-drawer.open {
  left: 0;
  opacity: 1;
}

/* The drawer used to start at the very top of the page and cover the
   header (hamburger icon + "MENU" label) with its own logo. Now that it
   starts below the header, that logo is redundant with the one already
   visible in the header itself, so it's hidden rather than shown twice. */
.menu-drawer-logo {
  display: none;
}

.menu-drawer-logo svg {
  height: 50px;
  width: auto;
}

.menu-drawer nav {
  padding: 0;
}

.menu-drawer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-drawer li {
  margin: 0;
}

/* Drawer menu items - matches Material-UI MenuItem */
.drawer-menu-item {
  display: block;
  padding: 6px 16px;
  color: rgba(0, 0, 0, 0.87);
  line-height: 36px;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  cursor: pointer;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  user-select: none;
}

.drawer-menu-item:hover {
  background-color: rgba(176, 17, 22, 0.08);
  color: var(--color-primary);
}

/* Drawer submenu groups (accordion) */
.drawer-menu-parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
}

.drawer-menu-label {
  flex: 1;
}

.drawer-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 6px;
  margin: 0;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.54);
}

.drawer-menu-chevron {
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: transform 200ms ease;
}

.drawer-menu-group.open .drawer-menu-toggle .drawer-menu-chevron {
  transform: rotate(180deg);
}

.drawer-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 250ms ease;
}

.drawer-menu-group.open .drawer-submenu {
  max-height: 500px;
}

.drawer-submenu-item {
  padding-left: 32px;
  font-size: 0.9rem;
  background-color: rgba(0, 0, 0, 0.02);
}

.drawer-menu-group {
  position: relative;
}

/* On devices with a real mouse, submenus open on hover as a flyout panel
   next to the drawer instead of pushing the row below it down - that push
   made the next item a moving target while scanning the menu. Touch devices
   have no hover state, so click/tap (handled in menu.js, the push-down
   .open styles above) stays the only way in on mobile. */
@media (hover: hover) and (pointer: fine) {
  /* .menu-drawer's overflow-y: auto forces overflow-x to auto too (a CSS
     rule: a non-visible overflow-y coerces a visible overflow-x into auto),
     which clips/scrolls the flyout instead of letting it render past the
     drawer's right edge. Desktop viewports are tall enough that this short
     menu never needs to scroll, so it's safe to drop here. */
  .menu-drawer {
    overflow: visible;
  }

  .drawer-submenu {
    position: absolute;
    top: 0;
    left: 100%;
    max-height: none;
    overflow: visible;
    min-width: 220px;
    background-color: white;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15);
    border-radius: 0 4px 4px 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
  }

  .drawer-menu-group.flyout-open .drawer-submenu {
    opacity: 1;
    pointer-events: auto;
  }

  .drawer-submenu-item {
    padding-left: 16px;
    background-color: transparent;
  }

  .drawer-menu-group.flyout-open .drawer-menu-toggle .drawer-menu-chevron {
    transform: rotate(180deg);
  }
}

.menu-drawer-divider {
  height: 1px;
  background-color: rgba(0, 0, 0, 0.12);
  min-width: 250px;
  margin: 0;
}

.menu-drawer-button {
  padding: 12px 16px;
  margin: 10px 0 0 0;
}

.menu-drawer-button .btn-register {
  display: block;
  width: 100%;
  text-align: center;
  background-color: var(--color-primary);
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 26px;
  transition: background-color 0.3s ease;
}

.menu-drawer-button .btn-register:hover {
  background-color: #8d0e12;
  opacity: 1;
}

/* ============================================
   MAIN CONTENT
   ============================================ */

#main-content {
  margin-top: var(--header-height);
  min-height: calc(100vh - var(--header-height));
  background-color: white;
}

/* ============================================
   HERO CAROUSEL STYLES
   ============================================ */

.hero-carousel {
  position: relative;
  width: 100%;
  height: 60vh;
  overflow: hidden;
  background-color: #f5f5f5;
}

.carousel-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-slides {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-slide {
  min-width: 100%;
  height: 100%;
  position: relative;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carousel-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.carousel-loading.hidden {
  display: none;
}

/* Spinner */
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(176, 17, 22, 0.1);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Carousel Controls (optional) */
.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 16px;
  cursor: pointer;
  font-size: 18px;
  z-index: 10;
  transition: background-color 0.3s ease;
}

.carousel-prev:hover,
.carousel-next:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.carousel-prev {
  left: 10px;
}

.carousel-next {
  right: 10px;
}

/* ============================================
   TEASERS SECTION STYLES
   ============================================ */

.teasers-section {
  padding: 30px 0;
}

#teasers-container {
  margin: 0;
}

.teaser {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  margin: 30px 15px;
  padding: 0;
}

.teaser__image {
  flex: 1;
  min-width: 300px;
  max-width: 500px;
}

.teaser__image img,
.teaser__image video,
.teaser__image iframe {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.teaser__content {
  flex: 1;
  min-width: 300px;
}

.teaser__content > h2 {
  color: var(--color-primary);
  margin: 0 0 15px 0;
  font-size: 2.5rem;
}

.teaser__content .content h2 {
  font-size: 1.5rem;
  margin: 15px 0 0 0;
  padding-bottom: 1rem;
}

.teaser__content .content h3 {
  font-size: 1.2rem;
  margin: 15px 0 0 0;
  padding-bottom: 1rem;
}

.teaser__content .content {
  margin-bottom: 20px;
  line-height: 1.6;
}

.teaser__content .cta {
  display: inline-block;
  background-color: var(--color-primary);
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.teaser__content .cta:hover {
  background-color: #8d0e12;
  opacity: 1;
}

/* Teaser image positioning */
.teaser.image-left .teaser__image {
  order: 0;
}

.teaser.image-right .teaser__image {
  order: 1;
}

/* Press page: smaller black headlines (instead of the site-wide large red
   style) and a narrower text column, since this page is a long list of
   many short press entries rather than a few full-width feature teasers. */
.press-page .teaser__content > h2 {
  color: #000;
  font-size: 1.5rem;
}

.press-page .teaser__content {
  max-width: 450px;
}

/* Press page: always image-left/text-right (overriding the alternating
   left/right pattern) and a consistent image box, since 37 short entries
   with images at wildly different sizes/aspect ratios and jumping sides
   made the page hard to scan. */
.press-page .teaser__image {
  order: 0 !important;
  min-width: 220px;
  max-width: 260px;
}

.press-page .teaser__image img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.press-page .teaser__content {
  order: 1;
}

/* The image+text pair is narrower than the full container now, so center
   it instead of leaving it stuck against the left edge with empty space
   trailing on the right. */
.press-page .teaser {
  justify-content: center;
}

/* Mobile responsive */
@media (max-width: 900px) {
  .teaser {
    flex-direction: column;
    margin: 30px 0;
  }

  .teaser__image {
    order: 0 !important;
    min-width: 100%;
    max-width: 100%;
  }

  .press-page .teaser__image {
    min-width: 100%;
    max-width: 100%;
  }

  .teaser__content {
    min-width: 100%;
  }
}

/* ============================================
   DETAIL PAGE STYLES
   ============================================ */

.hero-image {
  width: 100%;
  overflow: hidden;
}

.hero-image img {
  width: 100%;
  height: 50vh;
  object-fit: cover;
  display: block;
}

.detail-page-content {
  padding: 30px 0;
}

.detail-article {
  margin-bottom: 60px;
}

.page-headline {
  color: var(--color-primary);
  margin: 0 auto 0.7rem auto;
  max-width: 900px;
}

.page-content {
  line-height: 1.8;
  font-size: 1rem;
  margin-top: 0;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.page-content h2,
.page-content h3 {
  color: var(--color-primary);
  margin: 30px 0 0.4rem 0;
}

.page-content ul,
.page-content ol {
  margin: 0 0 1rem 20px;
  line-height: 1.8;
}

.page-content strong,
.page-content b {
  font-weight: 700;
}

.page-content em,
.page-content i {
  font-style: italic;
}

/* ============================================
   CHECKOUT PAGE STYLES
   ============================================ */

.checkout-main {
  min-height: calc(100vh - var(--header-height) - 200px);
  display: flex;
  align-items: center;
  padding: 60px 0;
}

.checkout-section {
  width: 100%;
}

.checkout-container {
  max-width: 600px;
}

.checkout-container h1 {
  text-align: center;
  color: var(--color-primary);
  margin-bottom: 30px;
}

.checkout-form {
  background: #f9f9f9;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--color-text);
}

.form-group input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  font-family: 'Roboto', sans-serif;
}

.form-group input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.btn-primary {
  background-color: var(--color-primary);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-family: 'Roboto', sans-serif;
}

.btn-primary:hover {
  background-color: #8d0e12;
}

.btn-checkout {
  width: 100%;
  padding: 16px;
  font-size: 1.1rem;
}

.message {
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 4px;
  text-align: center;
  font-weight: 500;
  display: none;
}

.message.success {
  display: block;
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.message.error {
  display: block;
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* ============================================
   FOOTER STYLES - Matches original footer.js
   ============================================ */

#footer {
  background-color: #191717;
  color: white;
  min-height: 250px;
}

.footer-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0;
}

.footer-content {
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
}

.footer-left {
  flex: 0 0 33.33%;
  max-width: 33.33%;
  margin: 20px 0 0 0;
}

.footer-logo {
  margin-bottom: 0;
}

.footer-logo svg {
  height: 120px;
  width: auto;
  display: block;
}

.footer-company {
  margin-top: 40px;
  margin-bottom: 40px;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
  color: white;
}

.footer-company b {
  font-weight: 500;
}

.footer-right {
  flex: 0 0 66.67%;
  max-width: 66.67%;
  margin: 20px 0 30px 30px;
}

.footer-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-menu li {
  padding: 2px;
  cursor: pointer;
}

.footer-menu a {
  padding: 2px;
  cursor: pointer;
  color: white;
  text-decoration: none;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-size: 14px;
  transition: opacity 0.3s ease;
}

.footer-menu a:hover {
  opacity: 0.8;
}

.footer-copyright {
  text-align: left;
  padding: 40px 30px 20px;
  color: white;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-size: 14px;
  font-weight: 400;
  max-width: 1200px;
  margin: 0 auto;
}

/* Responsive footer */
@media (max-width: 900px) {
  .footer-content {
    flex-wrap: wrap;
  }

  .footer-left {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 20px 0 0 0;
  }

  .footer-right {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 20px 0 30px 0;
  }
}

@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    gap: 30px;
  }

  .footer-menu ul {
    columns: 1;
  }
}

/* ============================================
   ANIMATIONS
   ============================================ */

.fade-appear {
  opacity: 0.01;
}

.fade-appear-active {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

.annimateMenu-enter {
  opacity: 0.01;
}

.annimateMenu-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.annimateMenu-leave {
  opacity: 1;
}

.annimateMenu-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

.blur-up {
  -webkit-filter: blur(5px);
  filter: blur(5px);
  transition: filter 400ms, -webkit-filter 400ms;
}

.blur-up.lazyloaded {
  -webkit-filter: blur(0);
  filter: blur(0);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.hidden {
  display: none !important;
}

.text-center {
  text-align: center;
}

.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 30px; }
.mb-1 { margin-bottom: 10px; }
.mb-2 { margin-bottom: 20px; }
.mb-3 { margin-bottom: 30px; }