/* ============================================
   CIBERGUARDIAN GHOST THEME - main.css
   Basado en el diseño original de Ciberguardian
   ============================================ */

/* Variables */
:root {
  --primary-color: #ed1d23;
  --primary-darker-color: #c61016;
  --main-bg-color: #14161a;
  --white-color: #FFFFFF;
  --black-color: #0B0C0E;

  --title-font: 'Obvia', sans-serif;
  --body-font: 'Montserrat', sans-serif;

  --smaller-size: clamp(0.875rem, calc(1.2vw + 0.5rem), 1rem);
  --small-size: clamp(1rem, calc(1.2vw + 0.5rem), 1.125rem);
  --normal-size: clamp(1.125rem, calc(1.2vw + 0.5rem), 1.25rem);
  --medium-size: clamp(1.5rem, calc(1.2vw + 0.5rem), 1.625rem);
  --big-size: clamp(1.5rem, calc(3vw + 0.5rem), 2rem);
  --bigger-size: clamp(1.625rem, calc(5.33vw + 0.5rem), 2.25rem);
  --biggest-size: clamp(1.75rem, calc(5.33vw + 0.5rem), 3rem);
  --heading-size-2: clamp(2rem, calc(5.33vw + 0.5rem), 3.5rem);
  --heading-size: clamp(2.25rem, calc(5.33vw + 0.5rem), 3.5rem);
  --number-size: clamp(3.3375rem, calc(5.33vw + 0.5rem), 4rem);

  --section-spacing: 8.75rem;
}


/* Fonts */
@font-face {
  font-family: "Obvia";
  src: url("../fonts/Obvia-Wide-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
  font-style: italic;
  font-display: swap;
}


/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background-color: var(--black-color); }
::-webkit-scrollbar-thumb { background-color: var(--primary-color); }


/* Normalize CSS */
*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*::selection { background-color: var(--primary-darker-color); }
a { text-decoration: none; color: inherit; }
ul, li { margin: 0; padding: 0; list-style-type: none; }
button { border: none; outline: none; background-color: transparent; }
img { width: 100%; }
input, textarea { background-color: transparent; width: 100%; outline: none; }


/* General CSS */
html { scroll-behavior: smooth; }

body {
  background-color: var(--main-bg-color);
  color: var(--white-color);
  overflow-x: hidden;
}

section:not(.event-content):not(.blog-hero):not(.post-hero):not(.page-hero):not(.blog-preview):not(.related-posts), .section {
  width: 80%;
  max-width: 1383px;
  margin: auto;
}

h1 {
  font-family: var(--title-font);
  font-size: var(--heading-size);
  line-height: 125%;
  margin-bottom: 1.5rem;
}

h2 {
  font-family: var(--title-font);
  font-size: var(--heading-size);
  line-height: 125%;
  margin-bottom: 1.5rem;
}

h3 {
  font-family: var(--title-font);
  font-size: var(--big-size);
  line-height: 125%;
  margin-bottom: 1.5rem;
}

h4 {
  font-family: var(--title-font);
  font-size: var(--bigger-size);
  line-height: 140%;
  margin-bottom: 1.5rem;
}

.heading-underline {
  display: block;
  width: 40%;
  height: 8px;
  max-width: 330px;
  background-color: var(--primary-color);
  margin-top: 1rem;
}

p {
  font-family: var(--body-font);
  font-size: var(--normal-size);
  line-height: 150%;
  margin-bottom: var(--normal-size);
}

strong { font-weight: 700; }


/* ============================================
   NAVBAR
   ============================================ */
nav {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 2rem 0;
  background-color: rgba(20, 22, 26, 0.8);
  backdrop-filter: blur(25px);
  z-index: 5;
  transition: 0.6s;
}

nav > .content {
  width: 80%;
  max-width: 1383px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
}

nav > .content > .logo {
  width: 70%;
  max-width: 242px;
}

nav > .content > .options { width: 65%; }

nav > .content > .options > ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--title-font);
  font-size: var(--normal-size);
}

nav > .content > .options > ul a { position: relative; }

nav > .content > .options > ul a::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  left: 0;
  width: 0;
  height: 3px;
  background-color: var(--primary-color);
  transition: 0.3s;
}

nav > .content > .options > ul a:hover::after {
  width: 40%;
  max-width: 80px;
  transition: 0.3s;
}


/* ============================================
   HERO SECTION (Homepage)
   ============================================ */
section.hero {
  margin: calc(149px + 6rem) auto var(--section-spacing);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4rem;
  width: 80%;
  max-width: 1383px;
}

section.hero > img {
  width: 28%;
  max-width: 326px;
}

section.hero > .text {
  width: 68%;
  max-width: 915px;
}

section.hero > .text > p { max-width: 795px; }


/* ============================================
   BLOG HERO / POST HERO / PAGE HERO
   ============================================ */
section.blog-hero,
section.post-hero,
section.page-hero {
  width: 80%;
  max-width: 1383px;
  margin: calc(149px + 4rem) auto 4rem;
}

section.blog-hero h1,
section.post-hero h1,
section.page-hero h1 {
  max-width: 900px;
}

section.post-hero .post-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

section.post-hero .post-meta .tag {
  display: inline-block;
  background-color: var(--primary-color);
  color: var(--white-color);
  font-family: var(--title-font);
  font-size: var(--smaller-size);
  padding: 0.3rem 0.8rem;
  border-radius: 2px;
}

section.post-hero .post-meta .date {
  font-family: var(--body-font);
  font-size: var(--small-size);
  opacity: 0.7;
}

section.post-hero .excerpt {
  font-size: var(--medium-size);
  font-weight: 600;
  max-width: 800px;
  opacity: 0.85;
}


/* ============================================
   EVENT SECTION
   ============================================ */
div.event-background {
  background-color: var(--primary-color);
  padding: 4rem 7rem 4rem 0;
  margin-bottom: var(--section-spacing);
  clip-path: polygon(
    0 0,
    calc(100% - 180px) 0,
    100% 50%,
    calc(100% - 180px) 100%,
    0 100%
  );
  width: 70%;
}

section.event-content {
  width: 80%;
  max-width: 1383px;
  margin: 0 0 0 auto;
}

section.event-content > h4,
section.event-content > p { max-width: 760px; }


/* ============================================
   WHAT IS SECTION
   ============================================ */
section.what-is {
  scroll-margin-top: calc(140px + var(--section-spacing));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4rem;
  margin-bottom: var(--section-spacing);
}

section.what-is > .text {
  width: 60%;
  max-width: 680px;
}

section.what-is > .list {
  width: 45%;
  max-width: 565px;
}

section.what-is > .list li {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1.3rem;
  margin-bottom: 1rem;
}

section.what-is > .list li:last-of-type { margin-bottom: 0; }
section.what-is > .list li:last-of-type > p { margin-bottom: 0; }

section.what-is > .list img {
  max-width: 40px;
  width: clamp(2rem, calc(1.2vw + 0.5rem), 2.5rem);
  margin-top: 2px;
}


/* ============================================
   FEATURES SECTION
   ============================================ */
section.features { margin-bottom: var(--section-spacing); }
section.features h2 { max-width: 915px; }

section.features > .list {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 3rem 1rem;
  margin-top: 5rem;
}

section.features > .list > li {
  width: 48%;
  max-width: 660px;
  display: flex;
  align-items: flex-start;
  gap: 1.875rem;
}

section.features > .list > li > img { max-width: 97px; }
section.features > .list > li h3 { margin-bottom: 0; }

section.features > .list > li .title {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
}

section.features > .list > li .title > img {
  display: none;
  max-width: 97px;
  width: clamp(2.25rem, calc(5.33vw + 0.5rem), 6.1rem);
}


/* ============================================
   HOW IT WORKS SECTION
   ============================================ */
section.how-it-works {
  scroll-margin-top: calc(140px + 3rem);
  margin-bottom: var(--section-spacing);
}

section.how-it-works h2 { max-width: 915px; }

section.how-it-works > .steps {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 3rem;
  margin-top: 5rem;
}

section.how-it-works .list li {
  max-width: 660px;
  display: flex;
  align-items: flex-start;
  gap: 1.875rem;
  margin-bottom: 3rem;
}

section.how-it-works .list li > .number {
  color: var(--primary-color);
  font-size: var(--number-size);
  font-weight: 700;
  margin-top: -1rem;
  min-width: 58px;
}


/* ============================================
   PARTNERS SECTION
   ============================================ */
div.partners-background {
  scroll-margin-top: calc(140px + 3rem);
  background-color: var(--primary-color);
  padding: 5rem 0;
  margin-bottom: var(--section-spacing);
}

section.partners-content h3 {
  font-size: var(--biggest-size);
  line-height: 140%;
  max-width: 1250px;
}

section.partners-content > .list {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 3rem 1rem;
  margin-top: 5rem;
}

section.partners-content li {
  width: 31.5%;
  max-width: 420px;
}

section.partners-content li > .title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

section.partners-content li > .title > img { max-width: 36px; }

section.partners-content li > .title > h4 {
  font-size: var(--medium-size);
  margin-bottom: 0;
}


/* ============================================
   INFORMÁTICA BALEAR SECTION
   ============================================ */
section.informatica-balear {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 3rem;
  margin-bottom: var(--section-spacing);
}

section.informatica-balear > .text { max-width: 630px; }


/* ============================================
   BLOG PREVIEW (Homepage)
   ============================================ */
section.blog-preview {
  width: 80%;
  max-width: 1383px;
  margin: 0 auto var(--section-spacing);
}

.blog-cta {
  margin-top: 3rem;
  text-align: center;
}

.btn-primary {
  display: inline-block;
  background-color: var(--primary-color);
  color: var(--white-color);
  font-family: var(--title-font);
  font-size: var(--small-size);
  padding: 1rem 2.5rem;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.btn-primary:hover {
  background-color: var(--primary-darker-color);
}


/* ============================================
   BLOG GRID & POST CARDS
   ============================================ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}

.post-card {
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s, border-color 0.3s;
}

.post-card:hover {
  transform: translateY(-4px);
  border-color: rgba(237, 29, 35, 0.4);
}

.post-card-image-link {
  display: block;
  overflow: hidden;
  max-height: 220px;
}

.post-card-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s;
}

.post-card:hover .post-card-image {
  transform: scale(1.04);
}

.post-card-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.post-card-meta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}

.post-card-meta .tag {
  display: inline-block;
  background-color: var(--primary-color);
  color: var(--white-color);
  font-family: var(--title-font);
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.post-card-meta .date {
  font-family: var(--body-font);
  font-size: var(--smaller-size);
  opacity: 0.6;
}

.post-card-title {
  font-family: var(--title-font);
  font-size: var(--big-size);
  line-height: 130%;
  margin-bottom: 0.75rem;
}

.post-card-title a {
  color: var(--white-color);
  transition: color 0.2s;
}

.post-card-title a:hover { color: var(--primary-color); }

.post-card-excerpt {
  font-size: var(--small-size);
  opacity: 0.75;
  line-height: 155%;
  flex: 1;
  margin-bottom: 1.2rem;
}

.post-card-link {
  font-family: var(--title-font);
  font-size: var(--small-size);
  color: var(--primary-color);
  transition: opacity 0.2s;
  margin-top: auto;
}

.post-card-link:hover { opacity: 0.75; }


/* ============================================
   POST CONTENT
   ============================================ */
article.post-content {
  width: 80%;
  max-width: 780px;
  margin: 0 auto var(--section-spacing);
}

.post-feature-image {
  margin-bottom: 3rem;
  border-radius: 8px;
  overflow: hidden;
}

.post-feature-image img {
  width: 100%;
  height: auto;
  display: block;
}

.gh-content {
  font-family: var(--body-font);
  font-size: var(--normal-size);
  line-height: 170%;
}

.gh-content h2,
.gh-content h3,
.gh-content h4 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.gh-content p { margin-bottom: 1.5rem; }

.gh-content a {
  color: var(--primary-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gh-content ul,
.gh-content ol {
  padding-left: 2rem;
  margin-bottom: 1.5rem;
}

.gh-content li {
  list-style-type: disc;
  margin-bottom: 0.5rem;
}

.gh-content ol li { list-style-type: decimal; }

.gh-content blockquote {
  border-left: 4px solid var(--primary-color);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  opacity: 0.85;
}

.gh-content img {
  max-width: 100%;
  border-radius: 6px;
  margin: 1.5rem 0;
}

.gh-content pre {
  background-color: rgba(255,255,255,0.06);
  border-radius: 6px;
  padding: 1.5rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  font-size: var(--small-size);
}

.gh-content code {
  background-color: rgba(237, 29, 35, 0.15);
  border-radius: 3px;
  padding: 0.15em 0.4em;
  font-size: 0.9em;
}

.gh-content pre code {
  background-color: transparent;
  padding: 0;
}

.gh-content hr {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin: 2.5rem 0;
}

.post-footer {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}

.post-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.author-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.author-name {
  font-family: var(--title-font);
  font-size: var(--small-size);
  margin-bottom: 0.2rem;
}

.author-bio {
  font-size: var(--smaller-size);
  opacity: 0.7;
  margin-bottom: 0;
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag-pill {
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--white-color);
  font-family: var(--body-font);
  font-size: var(--smaller-size);
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  transition: border-color 0.2s, background-color 0.2s;
}

.tag-pill:hover {
  border-color: var(--primary-color);
  background-color: rgba(237, 29, 35, 0.1);
}


/* ============================================
   RELATED POSTS
   ============================================ */
section.related-posts {
  width: 80%;
  max-width: 1383px;
  margin: 0 auto var(--section-spacing);
}

section.related-posts h2 { max-width: none; }


/* ============================================
   PAGINATION
   ============================================ */
.pagination {
  width: 80%;
  max-width: 1383px;
  margin: 0 auto var(--section-spacing);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  font-family: var(--title-font);
}

.pagination a,
.pagination .page-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 0.75rem;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  font-size: var(--small-size);
  transition: border-color 0.2s, background-color 0.2s;
}

.pagination a:hover {
  border-color: var(--primary-color);
  background-color: rgba(237, 29, 35, 0.1);
}

.pagination .page-number {
  border-color: var(--primary-color);
  background-color: var(--primary-color);
}


/* ============================================
   PAGE CONTENT
   ============================================ */
article.page-content {
  width: 80%;
  max-width: 900px;
  margin: 0 auto var(--section-spacing);
}


/* ============================================
   BLOG LISTING PAGE (section.blog-grid wrapper)
   ============================================ */
section.blog-grid {
  width: 80%;
  max-width: 1383px;
  margin: 0 auto;
}

section.blog-grid > .blog-grid { margin-top: 0; }


/* ============================================
   FOOTER
   ============================================ */
footer {
  background-color: var(--black-color);
  padding: 3rem 0;
}

footer > .section {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 3rem;
}

footer p {
  margin: 0;
  font-size: var(--small-size);
}

.divider-vertical {
  width: 1px;
  height: 57px;
  background-color: var(--white-color);
}

.divider-landscape {
  width: 20px;
  height: 1px;
  background-color: var(--white-color);
}

footer .legal {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

footer .legal-info {
  position: relative;
  font-family: var(--body-font);
  font-weight: 600;
  font-size: var(--small-size);
}

footer .legal-info::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  left: 0;
  width: 0;
  height: 3px;
  background-color: var(--primary-color);
  transition: 0.3s;
}

footer .legal-info:hover::after {
  width: 40%;
  max-width: 80px;
  transition: 0.3s;
}

footer .legal > p { font-size: var(--smaller-size); }


/* ============================================
   HAMBURGER MENU
   ============================================ */
.hamburger-menu { display: none; }


/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1200px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  section.event-content {
    width: 80%;
    margin: 0 6rem 0 auto;
  }
}

@media (max-width: 1500px) {
  .hamburger-menu { display: block; }

  nav > .content > .options {
    display: block;
    position: fixed;
    top: 142px;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--main-bg-color);
    width: 100%;
    height: calc(100vh - 96px);
    height: calc(100dvh - 96px);
    transform: translateX(100%);
    transition: 0.6s;
  }

  nav > .content > .options > ul {
    width: 80%;
    margin: 3rem auto 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 3rem;
  }

  section.hero { align-items: flex-start; }
  section.hero > img { margin-top: 1rem; }

  div.event-background { width: 90%; }

  section.what-is { scroll-margin-top: calc(140px + 1rem); }
  section.what-is > .text { width: 50%; }
  section.what-is > .list { width: 50%; }

  section.how-it-works { scroll-margin-top: calc(140px + 1rem); }
  div.partners-background { scroll-margin-top: 140px; }

  section.informatica-balear > .text { width: 40%; }
  section.informatica-balear > h2 { width: 60%; }

  footer .legal { align-self: flex-end; }
}

@media (max-width: 992px) {
  :root { --section-spacing: 6rem; }

  section.hero {
    margin: calc(142px + 1.5rem) auto 4rem;
  }

  section.hero > img { display: none; }
  section.hero > .text { width: 100%; }

  section.blog-hero,
  section.post-hero,
  section.page-hero {
    margin: calc(142px + 2rem) auto 3rem;
  }

  div.event-background {
    width: 100%;
    padding: 3.5rem 0 6rem;
    clip-path: polygon(
      0 0,
      100% 0,
      100% 85%,
      50% 100%,
      0 85%
    );
  }

  section.event-content {
    width: 85%;
    margin: 0 auto;
    text-align: center;
  }

  section.what-is {
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  section.what-is > .text,
  section.what-is > .list {
    width: 100%;
    max-width: none;
  }

  section.features > .list {
    gap: 1.5rem 0;
    margin-top: 3rem;
  }

  section.features > .list > li {
    width: 100%;
    max-width: none;
  }

  section.features > .list > li > img { display: none; }
  section.features > .list > li .title { margin-bottom: 0.5rem; }
  section.features > .list > li .title > img { display: block; }

  section.how-it-works > .steps {
    flex-direction: column;
    gap: 0;
    margin-top: 3rem;
  }

  section.how-it-works .list li {
    width: 100%;
    max-width: none;
  }

  section.partners-content > .list { gap: 2rem 1rem; }
  section.partners-content li { width: 48%; }

  section.informatica-balear {
    flex-direction: column;
    gap: 1rem;
  }

  section.informatica-balear > .text { width: 100%; max-width: none; }
  section.informatica-balear > h2 { width: 100%; }

  article.post-content {
    width: 90%;
  }

  section.related-posts { width: 90%; }

  footer { padding: 2rem 0; }
  footer .legal { align-self: flex-end; }
}

@media (max-width: 768px) {
  :root { --section-spacing: 4rem; }

  section:not(.event-content):not(.blog-hero):not(.post-hero):not(.page-hero):not(.blog-preview):not(.related-posts), .section {
    width: 90%;
  }

  .heading-underline {
    height: 6px;
    max-width: 184px;
  }

  nav { padding: 1rem 0; }

  nav > .content {
    width: 90%;
    margin: auto;
  }

  nav > .content > .options { top: 96px; }
  nav > .content > .logo { max-width: 183px; margin-top: 5px; }

  section.hero { margin: calc(96px + 1.5rem) auto 3rem; }

  section.blog-hero,
  section.post-hero,
  section.page-hero {
    width: 90%;
    margin: calc(96px + 1.5rem) auto 2.5rem;
  }

  section.what-is { scroll-margin-top: calc(96px + 1rem); }
  section.how-it-works { scroll-margin-top: calc(96px + 1rem); }

  section.how-it-works .list li {
    flex-direction: column;
    gap: 0;
    margin-bottom: 1.5rem;
  }

  section.how-it-works .list li > .number { margin: -0.5rem 0 0; }

  div.partners-background {
    scroll-margin-top: 96px;
    padding: 3rem 0;
  }

  section.partners-content > .list {
    gap: 1.5rem;
    margin-top: 2rem;
  }

  section.partners-content li { width: 100%; max-width: none; }

  .blog-grid { grid-template-columns: 1fr; }

  section.blog-preview { width: 90%; }
  section.related-posts { width: 90%; }
  .pagination { width: 90%; }

  article.post-content { width: 90%; }
  article.page-content { width: 90%; }

  .post-footer {
    flex-direction: column;
    gap: 1.5rem;
  }
}

@media (max-width: 492px) {
  footer > .section { justify-content: flex-start; }
  .divider-landscape { width: 10px; }
}

@media (max-width: 429px) {
  footer > .section { justify-content: center; }

  footer .legal {
    flex-direction: column;
    align-items: center;
    align-self: center;
    gap: 0.5rem;
  }

  .divider-landscape { display: none; }
}


/* ============================================
   HAMBURGER ANIMATIONS
   ============================================ */
.hamburger-menu > svg > #top,
.hamburger-menu > svg > #middle,
.hamburger-menu > svg > #bottom {
  animation-duration: 0.4s;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
}

.hamburger-menu > svg.close > #top { animation-name: x-mark-top; }
.hamburger-menu > svg.close > #middle { animation-name: x-mark-middle; }
.hamburger-menu > svg.close > #bottom { animation-name: x-mark-bottom; }
.hamburger-menu > svg.open > #top { animation-name: x-mark-top-reverse; }
.hamburger-menu > svg.open > #middle { animation-name: x-mark-middle-reverse; }
.hamburger-menu > svg.open > #bottom { animation-name: x-mark-bottom-reverse; }

@keyframes x-mark-top {
  to { transform: translateX(15px) rotate(45deg); transform-origin: top left; }
}

@keyframes x-mark-top-reverse {
  from { transform: translateX(15px) rotate(45deg); transform-origin: top left; }
  to { transform: none; }
}

@keyframes x-mark-middle {
  to { opacity: 0; transform: translateX(40px); }
}

@keyframes x-mark-middle-reverse {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: none; }
}

@keyframes x-mark-bottom {
  to { transform: translateX(-19px) translateY(17px) rotate(-45deg); transform-origin: top left; }
}

@keyframes x-mark-bottom-reverse {
  from { transform: translateX(-19px) translateY(17px) rotate(-45deg); transform-origin: top left; }
  to { transform: none; }
}

/* ============================================
   GHOST EDITOR CARD WIDTHS (required by Ghost)
   ============================================ */
.kg-width-wide {
  margin-left: calc(50% - 50vw + 2rem);
  margin-right: calc(50% - 50vw + 2rem);
  max-width: none;
  width: calc(100vw - 4rem);
}

.kg-width-full {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: none;
  width: 100vw;
}

.kg-image { max-width: 100%; }
.kg-image-card { margin: 1.5rem 0; }
.kg-image-card img { border-radius: 6px; display: block; margin: 0 auto; }
.kg-gallery-container { display: flex; flex-direction: column; margin: 1.5rem 0; }
.kg-gallery-row { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.kg-gallery-image img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.kg-embed-card { margin: 1.5rem 0; }
.kg-bookmark-card { margin: 1.5rem 0; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; overflow: hidden; }
.kg-bookmark-container { display: flex; color: var(--white-color); }
.kg-bookmark-content { padding: 1.25rem; flex: 1; }
.kg-bookmark-title { font-weight: 700; margin-bottom: 0.4rem; }
.kg-bookmark-description { font-size: var(--smaller-size); opacity: 0.7; }
.kg-bookmark-metadata { font-size: var(--smaller-size); opacity: 0.5; }
.kg-callout-card { display: flex; gap: 1rem; padding: 1.25rem; border-radius: 8px; background-color: rgba(255,255,255,0.06); margin: 1.5rem 0; }
.kg-callout-emoji { font-size: 1.5rem; }
.kg-toggle-card { border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 1rem 1.25rem; margin: 1.5rem 0; }
.kg-video-card { margin: 1.5rem 0; }
.kg-video-card video { width: 100%; border-radius: 6px; }
.kg-hr-card hr { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 2rem 0; }