/* ==========================================================================
   Custom CSS for Personal Speaker Website
   - Full-width event sections with card grid
   - Clean typography on top of Toha
   ========================================================================== */

/* Override Toha's narrow layout for event pages */
body.kind-page.type-speaking-events .wrapper,
body.kind-page.type-ug-kosice-events .wrapper,
body.kind-section.type-speaking-events .wrapper,
body.kind-section.type-ug-kosice-events .wrapper,
body.type-speaking-events .wrapper,
body.type-ug-kosice-events .wrapper {
  display: block !important;
  padding-top: 70px !important;
}

body.kind-page.type-speaking-events .content-section,
body.kind-page.type-ug-kosice-events .content-section,
body.kind-section.type-speaking-events .content-section,
body.kind-section.type-ug-kosice-events .content-section,
body.type-speaking-events .content-section,
body.type-ug-kosice-events .content-section {
  flex: none !important;
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
}

/* Hide Toha's sidebar/TOC on event pages */
body.type-speaking-events .sidebar-section,
body.type-ug-kosice-events .sidebar-section,
body.type-speaking-events .toc-section,
body.type-ug-kosice-events .toc-section {
  display: none !important;
}

/* Make event pages full-width */
.events-content {
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 2rem 2rem 4rem !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* Override Toha's content/read-area max-width on event pages */
body.type-speaking-events .content,
body.type-ug-kosice-events .content,
body.kind-page.type-speaking-events .content,
body.kind-page.type-ug-kosice-events .content {
  max-width: 100% !important;
  width: 100% !important;
}

/* ---------- List page ---------- */

.events-page-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 2rem;
}

.events-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

.event-item {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bs-body-bg, #fff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(127, 127, 127, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.event-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

html[data-theme="dark"] .event-item {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

.event-thumb-link {
  display: block;
  width: 100%;
  height: 200px;
  max-height: 200px;
  overflow: hidden;
  background: rgba(127, 127, 127, 0.1);
  position: relative;
}

.event-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: 200px;
  object-fit: cover;
  display: block;
}

.event-thumb-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #FF9900 0%, #232F3E 100%);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
}

.event-card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.event-presentation {
  font-size: 1.1rem;
  font-weight: 700;
  color: inherit;
  line-height: 1.35;
  text-decoration: none;
}

.event-presentation:hover {
  color: #FF9900;
  text-decoration: none;
}

.event-name {
  font-size: 0.95rem;
  opacity: 0.85;
  margin: 0;
}

.event-date {
  font-size: 0.85rem;
  opacity: 0.65;
  margin: 0;
}

.event-copresenter {
  font-size: 0.85rem;
  opacity: 0.75;
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(127, 127, 127, 0.15);
}

.events-empty {
  text-align: center;
  padding: 3rem 0;
  opacity: 0.6;
  font-style: italic;
}

/* ---------- Detail page ---------- */

.event-detail {
  max-width: 1100px;
  margin: 0 auto;
}

.event-detail-title {
  font-size: 2.25rem;
  font-weight: 700;
  color: #FF9900;
  margin: 0 0 0.5rem;
  line-height: 1.2;
  padding-top: 1rem;
}

.event-detail-subtitle {
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0 0 0.5rem;
  opacity: 0.85;
}

.event-detail-copresenter {
  font-size: 0.95rem;
  opacity: 0.75;
  margin: 0 0 2rem;
}

.event-section-heading {
  font-size: 1.4rem;
  font-weight: 600;
  margin-top: 3rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(255, 153, 0, 0.4);
  display: inline-block;
}

.event-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.event-link {
  display: inline-block;
  padding: 0.4rem 1rem;
  border: 1px solid rgba(127, 127, 127, 0.3);
  border-radius: 6px;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.15s ease;
}

.event-link:hover {
  border-color: #FF9900;
  color: #FF9900;
  text-decoration: none;
}

.event-description,
.event-content {
  margin: 1rem 0 2rem;
  font-size: 1rem;
  line-height: 1.6;
}

.event-empty-note {
  margin: 1rem 0 2rem;
  font-style: italic;
  opacity: 0.6;
}

/* ---------- Gallery ---------- */

.event-gallery-section {
  margin-top: 3rem;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.gallery a {
  display: block;
  height: 220px;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(127, 127, 127, 0.1);
  transition: transform 0.2s ease;
}

.gallery a:hover {
  transform: scale(1.03);
}

.gallery-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Downloads ---------- */

.event-downloads {
  margin-top: 3rem;
}

.download-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.download-item {
  margin: 0;
}

.download-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  border: 1px solid rgba(127, 127, 127, 0.3);
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.15s ease;
  font-size: 0.95rem;
}

.download-link:hover {
  border-color: #FF9900;
  background: rgba(255, 153, 0, 0.08);
  text-decoration: none;
}

.download-badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: #FF9900;
  color: #000;
  border-radius: 3px;
}

/* ---------- Back links ---------- */

.event-back-links {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(127, 127, 127, 0.2);
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
}

.event-back-links p {
  margin: 0;
}

/* ---------- About section (summary + credentials + highlight) ---------- */

.about-summary {
  font-size: 1.05rem;
  line-height: 1.65;
}

.about-summary p {
  margin-bottom: 1rem;
}

/* Community credentials — icon list */
.about-creds {
  list-style: none;
  margin: 0.5rem 0 1.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.about-cred {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.about-cred-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: #FF9900;
  color: #232F3E;
  font-size: 1.1rem;
}

.about-cred-label {
  font-weight: 600;
  font-size: 1.02rem;
}

.about-cred-label a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 153, 0, 0.5);
}

.about-cred-label a:hover {
  color: #FF9900;
}

.about-cred-since {
  margin-left: auto;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 153, 0, 0.15);
  color: #FF9900;
  white-space: nowrap;
}

/* AWS Community Day highlight card */
.about-highlights {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 1.5rem 0 2rem;
}

/* Credential-style heading line rendered above a highlight card */
.about-cred-heading {
  margin: 0.25rem 0 0.6rem;
}

.about-highlight {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
  padding: 1.5rem;
  border-radius: 12px;
  border-left: 4px solid #FF9900;
  background: rgba(255, 153, 0, 0.06);
}

html[data-theme="dark"] .about-highlight {
  background: rgba(255, 153, 0, 0.08);
}

.about-highlight-logo {
  flex: 0 0 auto;
}

.about-highlight-logo img {
  display: block;
  width: 120px;
  max-width: 30vw;
  height: auto;
}

.about-highlight-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: #FF9900;
}

.about-highlight-subtitle {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: -0.35rem 0 0.6rem;
  opacity: 0.85;
}

.about-highlight-text {
  font-size: 0.98rem;
  line-height: 1.55;
}

.about-highlight-text p {
  margin: 0 0 0.5rem;
}

.about-highlight-link {
  display: inline-block;
  margin-top: 0.35rem;
  font-weight: 600;
  text-decoration: none;
  color: #FF9900;
}

.about-highlight-link:hover {
  color: #ec8e00;
  text-decoration: underline;
}

@media (max-width: 576px) {
  .about-highlight {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .about-cred-since {
    margin-left: 0;
  }
}

/* ---------- Social Links (homepage About section) ---------- */
.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 1rem 0;
  list-style: none;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.social-links a:hover {
  transform: scale(1.15);
  color: #FF9900;
}

/* ---------- GLightbox tweaks ---------- */

.glightbox-clean .gslide-image img {
  max-height: 85vh;
}


/* Hide the navbar brand (site title) — keep navbar nav links */
.top-navbar .navbar-brand {
  display: none !important;
}

/* ---------- Background image fade to transparent (left side) ---------- */

#homePageBackgroundImageDivStyled {
  -webkit-mask-image: linear-gradient(to left, black 20%, transparent 70%), linear-gradient(to bottom, black 60%, transparent 90%);
  mask-image: linear-gradient(to left, black 20%, transparent 70%), linear-gradient(to bottom, black 60%, transparent 90%);
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
}

/* ---------- AWS-colored Top Navbar ---------- */

.top-navbar,
.top-navbar.navbar {
  background-color: #232F3E !important;
  border-bottom: 2px solid #FF9900;
}

/* Left nav group spacing */
.top-navbar .navbar-nav-left {
  gap: 0.25rem;
}

/* ---------- Homepage Left Side Navigation ---------- */

.container-fluid.home {
  position: relative;
}

.home-side-nav {
  position: absolute;
  left: 2rem;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  z-index: 10;
}

.home-side-nav-header {
  margin-bottom: 0.5rem;
}

.home-side-nav-name {
  font-size: 2.5rem;
  font-weight: 900;
  color: #FF9900 !important;
  margin: 0;
  line-height: 1.2;
  letter-spacing: 0.08em;
}

.home-side-nav-subtitle {
  font-size: 1.1rem;
  font-weight: 500;
  color: #FF9900;
  margin: 0.25rem 0 0;
  opacity: 0.85;
  padding-bottom: 1rem;
}

.home-side-nav-link {
  display: block;
  padding: 1rem 1.5rem;
  background: #FF9900;
  color: #232F3E;
  font-weight: 700;
  font-size: 1.5rem;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.home-side-nav-link:hover {
  background: #ec8e00;
  color: #232F3E;
  transform: translateX(4px);
  text-decoration: none;
}

html[data-theme="dark"] .home-side-nav-link {
  background: #FF9900;
  color: #232F3E;
}

html[data-theme="dark"] .home-side-nav-link:hover {
  background: #ec8e00;
  color: #232F3E;
}

/* ---------- Mobile homepage hero (<= 768px only) ----------
   Desktop/tablet (> 768px) layout is intentionally left untouched.

   On phones the theme's default hero (100vh + overflow:hidden and the
   .content top:-65%/-75% offset) pushes the avatar photo out of view, and
   the .home-side-nav (name, subtitle and page tabs) used to be hidden with
   display:none. This block re-flows the hero into a simple vertical stack so
   the photo AND the navigation tabs are visible on mobile. */
@media (max-width: 768px) {
  .container-fluid.home {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* clear the fixed top navbar */
    padding: 90px 1rem 2.5rem;
  }

  /* Photo pinned to the top of the page: cropped to the top half of the
     screen, fading out at its bottom. It scrolls away together with the
     content (a fixed layer used to bleed through the About section while
     scrolling). */
  #homePageBackgroundImageDivStyled {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50vh;
    height: 50svh;
    z-index: 0;
    transform: none;
    background-attachment: scroll !important;
    -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 98%);
    mask-image: linear-gradient(to bottom, black 55%, transparent 98%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }

  /* Avatar photo + typing carousel: remove the negative offset that hid it */
  .home .content {
    position: relative;
    top: 0;
    height: auto;
    z-index: 2;
    order: 1;
    margin-bottom: 1.5rem;
  }

  /* Show the name, subtitle and page tabs as a centered stacked block */
  .home-side-nav {
    display: flex;
    position: relative;
    left: auto;
    top: auto;
    z-index: 2;
    order: 2;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    gap: 0.75rem;
  }

  .home-side-nav-header {
    text-align: center;
    margin-bottom: 0.25rem;
  }

  .home-side-nav-name {
    font-size: 2rem;
  }

  .home-side-nav-subtitle {
    font-size: 1rem;
    padding-bottom: 0.5rem;
  }

  .home-side-nav-link {
    text-align: center;
    font-size: 1.2rem;
    padding: 0.85rem 1rem;
  }

  /* Nudge the "scroll down" arrow clear of the stacked tabs */
  .home .arrow-center {
    margin-top: 0.5rem;
  }
}

.top-navbar .nav-link,
.top-navbar .navbar-nav .nav-link {
  color: #ffffff !important;
  font-weight: 500;
  transition: color 0.2s ease;
}

/* Home link always in orange */
nav.top-navbar .navbar-nav .nav-item .nav-link[href$="#home"],
nav.top-navbar .navbar-nav .nav-item .nav-link[href="#home"] {
  color: #FF9900 !important;
}

.top-navbar .nav-link:hover,
.top-navbar .nav-link:focus,
.top-navbar .navbar-nav .nav-link:hover,
.top-navbar .navbar-nav .nav-link:focus {
  color: #FF9900 !important;
}

.top-navbar .nav-link.active,
.top-navbar .navbar-nav .nav-link.active {
  color: #FF9900 !important;
}

/* Hamburger/toggler icon in white for mobile */
.top-navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.3);
}

.top-navbar .navbar-toggler-icon {
  filter: invert(1);
}

/* Dark mode — same AWS navy look */
html[data-theme="dark"] .top-navbar,
html[data-theme="dark"] .top-navbar.navbar {
  background-color: #1a242f !important;
  border-bottom: 2px solid #FF9900;
}

html[data-theme="dark"] .top-navbar .nav-link,
html[data-theme="dark"] .top-navbar .navbar-nav .nav-link {
  color: #e0e0e0 !important;
}

html[data-theme="dark"] .top-navbar .nav-link:hover,
html[data-theme="dark"] .top-navbar .nav-link:focus,
html[data-theme="dark"] .top-navbar .nav-link.active {
  color: #FF9900 !important;
}