/*
Theme Name: Agile611
Theme URI: https://agile611.com/
Author: Your Name
Author URI: https://agile611.com/
Description: Custom theme for Agile611.
Version: 1.0
Text Domain: agile611
*/

/* -------------------------------------------------------------------------- */
/* Global Base                                                                */
/* -------------------------------------------------------------------------- */

:root {
  /* Safe fallbacks now that theme.json is gone */
  --wp--preset--color--agile-bg: #ffffff;
  --wp--preset--color--agile-text: #0f172a;
  --wp--preset--color--agile-deep: #01003f;
  --wp--preset--color--agile-vibrant: #00b2e9;
  --wp--preset--color--agile-primary: #0489c0;
  --wp--preset--color--agile-turq: #4cb8c9;

  --wp--preset--spacing--40: 2rem;
  --wp--preset--spacing--80: 5rem;

  --wp--style--global--wide-size: 1200px;
}

body {
  background-color: var(--wp--preset--color--agile-bg);
  color: var(--wp--preset--color--agile-text);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Keep Gutenberg images inside content width */
.entry-content img,
.site-main .entry-content img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* -------------------------------------------------------------------------- */
/* Global Buttons                                                             */
/* -------------------------------------------------------------------------- */

.wp-block-button__link {
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.wp-block-button__link:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

/* Hero-style buttons: rectangular with soft corners */
.wp-block-buttons .wp-block-button .wp-block-button__link {
  border-radius: 8px;
  font-weight: 600;
  padding-inline: 1.8rem;
  padding-block: 0.9rem;
  line-height: 1.2;
}

/* Outline secondary CTA */
.wp-block-button.is-style-outline .wp-block-button__link {
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: transparent;
  color: #ffffff;
}

/* -------------------------------------------------------------------------- */
/* Layout: main / content width                                               */
/* -------------------------------------------------------------------------- */

main.site-main,
body.page main,
body.single main {
  padding-left: var(--wp--preset--spacing--40);
  padding-right: var(--wp--preset--spacing--40);
}

main.site-main > .wp-block-group.alignfull,
body.page main > .wp-block-group.alignfull,
body.single main > .wp-block-group.alignfull {
  padding-left: 0;
  padding-right: 0;
}

main.site-main .alignwide,
body.page main .alignwide,
body.single main .alignwide {
  max-width: var(--wp--style--global--wide-size);
  margin-left: auto;
  margin-right: auto;
}

/* Center generic content lists */
.site-main .content-list {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* -------------------------------------------------------------------------- */
/* HEADER + NAVIGATION                                                        */
/* -------------------------------------------------------------------------- */

.site-header {
  background-color: var(--wp--preset--color--agile-deep);
  color: #ffffff;
  padding: 1rem var(--wp--preset--spacing--40);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.site-header__inner {
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Logo */

.agile611-logo-link {
  display: inline-flex;
  align-items: center;
}

.agile611-logo-img,
.site-header .agile611-logo-img {
  display: block;
  max-width: 160px;
  height: auto;
}

/* Classic menu wrapper */

.agile611-main-nav {
  display: flex;
  align-items: center;
}

.agile611-main-nav__list {
  display: flex;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.agile611-main-nav a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}

.agile611-main-nav a:hover {
  text-decoration: underline;
}

/* Dropdowns – classic WP menu (.sub-menu, .menu-item-has-children) */

.agile611-main-nav li {
  position: relative;
}

/* Hide submenus by default */
.agile611-main-nav .sub-menu {
  display: none;
}

/* Show submenu on hover or keyboard focus */
.agile611-main-nav .menu-item-has-children:hover > .sub-menu,
.agile611-main-nav .menu-item-has-children:focus-within > .sub-menu {
  display: block;
}

/* Position dropdown */
.agile611-main-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #01003f;
  padding: 1rem 1.5rem;
  margin: 0;
  list-style: none;
  min-width: 260px;
  z-index: 9999;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
  border-radius: 8px;
}

.agile611-main-nav .sub-menu li {
  margin: 0.25rem 0;
}

.agile611-main-nav .sub-menu a {
  color: #ffffff;
  font-weight: 500;
}

/* Nested fly-out submenu */
.agile611-main-nav .sub-menu .sub-menu {
  top: 0;
  left: 100%;
}

/* Header CTA button */
.site-header__cta .wp-block-button__link {
  background-color: var(--wp--preset--color--agile-vibrant);
  color: #ffffff;
  border-radius: 999px;
}

/* ===== Header: tablet tweaks (<= 1024px) ===== */
@media (max-width: 1024px) {
  .site-header {
    padding: 0.9rem 1.5rem;
  }

  .site-header__inner {
    gap: 1rem;
  }

  .agile611-logo-img,
  .site-header .agile611-logo-img {
    max-width: 140px;
  }

  .agile611-main-nav__list {
    gap: 1.2rem;
  }

  .agile611-main-nav a {
    font-size: 0.9rem;
  }

  .site-header__cta .wp-element-button,
  .site-header__cta .wp-block-button__link {
    padding: 0.45rem 1.2rem;
    font-size: 0.9rem;
  }
}

/* ===== Header: mobile layout (<= 768px) ===== */
@media (max-width: 768px) {
  .site-header {
    padding: 0.75rem 1rem;
  }

  /* Turn the inner header into a small grid:
     [logo] [toggle] [CTA] on the first row */
  .site-header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    row-gap: 0.75rem;
  }

  .site-header__logo {
    grid-column: 1 / 2;
  }

  .site-header__cta {
    grid-column: 3 / 4;
  }

  /* Hamburger toggle: hidden by default (desktop) */
.site-header__toggle {
  display: none;
}

/* Hide hamburger toggle by default (desktop & large screens) */
.site-header__toggle {
  display: none !important;
  visibility: hidden;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

@media (max-width: 768px) {
  /* ... other mobile header rules ... */

  .site-header__toggle {
    grid-column: 2 / 3;
    justify-self: end;
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    display: inline-flex;   /* <-- this makes it appear again on mobile */
    flex-direction: column;
    gap: 4px;
  }
}

/* Desktop / default: hide the mobile hamburger toggle */
.site-header__toggle {
  display: none;
}

@media (max-width: 768px) {
  /* Show the hamburger on mobile */
  .site-header__toggle {
    display: inline-flex;
    background: none;
    border: none;
    padding: 0.25rem;
    margin-left: auto;  /* adjusts position depending on your layout */
    cursor: pointer;
    flex-direction: column;
    gap: 4px;
  }

  .site-header__toggle-bar {
    width: 22px;
    height: 2px;
    background: #ffffff; /* or your header text color */
    border-radius: 999px;
  }

  /* Optional: stack header elements differently on mobile */
  .site-header__inner {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: 1rem;
  }

  .site-header__logo {
    grid-column: 1 / 2;
  }

  .site-header__cta {
    grid-column: 2 / 3;
    justify-self: end;
  }

  .agile611-main-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: none; /* hidden until menu-open class is added on body */
  }

  body.menu-open .agile611-main-nav {
    display: block;
  }
}

/* -------------------------------------------------------------------------- */
/* Responsive: mobile header / navigation                                     */
/* -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  /* Turn header into mobile-friendly layout */
  .site-header__inner {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: 1rem;
  }

  .site-header__logo {
    grid-column: 1 / 2;
  }

  /* ✅ Show the hamburger only on mobile */
  .site-header__toggle {
    grid-column: 2 / 3;
    justify-self: end;

    display: inline-flex;
    flex-direction: column;
    gap: 4px;

    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
  }

  .site-header__toggle-bar {
    width: 22px;
    height: 2px;
    background: #ffffff;
    border-radius: 999px;
  }

  /* Put the CTA in the top-right as well (optional) */
  .site-header__cta {
    display: none; /* or adjust based on your design */
  }

  /* Mobile nav: hidden until menu-open class is on body */
  .agile611-main-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0.75rem;
    display: none;
  }

  body.menu-open .agile611-main-nav {
    display: block;
  }

  .agile611-main-nav__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
}

@media (max-width: 768px) {

  .site-header__toggle {
    display: inline-flex !important;
    visibility: visible;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0.25rem;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 4px;
  }

  .site-header__toggle-bar {
    width: 22px;
    height: 2px;
    background: #ffffff;
    border-radius: 999px;
    transition: transform 0.18s ease-out, opacity 0.18s ease-out;
  }

}

  /* Hamburger toggle button */
  .site-header__toggle {
    grid-column: 2 / 3;
    justify-self: end;
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
  }

  .site-header__toggle-bar {
    width: 22px;
    height: 2px;
    background: #ffffff;
    border-radius: 999px;
    transition: transform 0.18s ease-out, opacity 0.18s ease-out;
  }

  /* Hide nav by default on mobile */
  .agile611-main-nav {
    grid-column: 1 / 4;     /* full width under the first row */
    grid-row: 2 / 3;
    width: 100%;
    margin-top: 0.5rem;
    display: none;
  }

  .agile611-main-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .agile611-main-nav a {
    padding: 0.25rem 0;
    width: 100%;
  }

  /* Smaller CTA on mobile */
  .site-header__cta .wp-element-button,
  .site-header__cta .wp-block-button__link {
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
  }

  /* When menu is open (class on <body>) */
  body.menu-open .agile611-main-nav {
    display: block;
  }

  /* Hamburger → "X" animation when open */
  body.menu-open .site-header__toggle-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  body.menu-open .site-header__toggle-bar:nth-child(2) {
    opacity: 0;
  }

  body.menu-open .site-header__toggle-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
}

/* -------------------------------------------------------------------------- */
/* HERO SECTION                                                               */
/* -------------------------------------------------------------------------- */

.hero-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(0, 178, 233, 0.12);
  color: #00b2e9;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero-label__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background-color: #00b2e9;
}

.hero-topics {
  margin-top: 1.5rem;
}

.hero-topics span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #9ca3af;
  font-size: 0.95rem;
}

.hero-topics span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(156, 163, 175, 0.85);
}

/* Terminal card */

.hero-terminal {
  border-radius: 16px;
  background: radial-gradient(circle at top left, #112240 0%, #020c1b 60%, #000000 100%);
  box-shadow: 0 24px 45px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

/* macOS-style dots */

.terminal-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.terminal-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
}

.terminal-dot--red { background-color: #ff5f57; }
.terminal-dot--yellow { background-color: #ffbd2e; }
.terminal-dot--green { background-color: #28c840; }

/* Ensure hero columns have a nice gap */
.wp-block-columns.alignwide {
  column-gap: 3rem;
}

/* -------------------------------------------------------------------------- */
/* SERVICE CARDS                                                              */
/* -------------------------------------------------------------------------- */

.agile-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.08);
  border-top: 4px solid transparent;
  transition: all 0.25s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.agile-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 30px rgba(0,0,0,0.12);
  border-top-color: var(--wp--preset--color--agile-vibrant);
}

.agile-card h3 {
  margin-top: 0;
}

/* -------------------------------------------------------------------------- */
/* FOOTER                                                                     */
/* -------------------------------------------------------------------------- */

.site-footer {
  padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
  background-color: var(--wp--preset--color--agile-deep);
  color: #ffffff;
}

.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.site-footer__columns {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.site-footer__col {
  flex: 1 1 0;
  min-width: 0;
}

.site-footer__col:first-child {
  flex: 2 1 0;
}

.site-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  color: #9ca3af;
}

/* Footer contact info */

.site-footer .contact-info-box {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
}

.site-footer .contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: #9ca3af;
  font-size: 0.95rem;
}

.site-footer .contact-icon {
  width: 1.25rem;
  text-align: center;
  margin-top: 0.15rem;
}

.site-footer .contact-icon i.fa {
  color: var(--wp--preset--color--agile-turq);
  font-size: 1rem;
}

.site-footer .contact-value a {
  color: #9ca3af;
  text-decoration: none;
}

.site-footer .contact-value a:hover {
  color: var(--wp--preset--color--agile-vibrant);
  text-decoration: underline;
}

/* Footer nav (if you add it later) */

.site-footer__nav-container {
  text-align: center;
  margin-bottom: 0.5rem;
}

.site-footer__nav {
  display: inline-flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__nav a {
  color: #9ca3af;
  text-decoration: none;
  font-size: 0.9rem;
}

.site-footer__nav a:hover {
  color: var(--wp--preset--color--agile-vibrant);
}

/* Stack footer columns on small screens */

@media (max-width: 768px) {
  .site-footer__col {
    flex: 1 1 100%;
  }
}

/* -------------------------------------------------------------------------- */
/* EVENTS LIST (ECT)                                                          */
/* -------------------------------------------------------------------------- */

#ect-minimal-list-wrp .style-2 .ect-event-title a,
#ect-minimal-list-wrp .style-2 .ect-event-title a:visited {
  color: #ffffff;
  text-decoration: none;
}

#ect-minimal-list-wrp .style-2 .ect-event-title a:hover,
#ect-minimal-list-wrp .style-2 .ect-event-title a:focus {
  color: var(--wp--preset--color--agile-primary);
}

#ect-minimal-list-wrp .style-2 .ect-event-date span {
  color: var(-wp--preset--color--agile-turq);
}

#ect-minimal-list-wrp .style-2 .ect-event-date {
  background: transparent;
  border: 1px solid rgba(0, 178, 233, 0.4);
}

/* -------------------------------------------------------------------------- */
/* MISC TWEAKS (optional, meta hiding, hero hiding, etc.)                     */
/* -------------------------------------------------------------------------- */

/* Hide main page title on standard pages (if you want pure landing feel) */
body.page main .wp-block-post-title {
  display: none;
}

/* Hide "posted on" meta on single posts */
body.single .entry-meta,
body.single .post-meta,
body.single .posted-on,
body.single .wp-block-post-date,
body.single .wp-block-post-author {
  display: none !important;
}

/* Hide hero on some templates if you have a .site-hero band elsewhere */
.page .site-hero__inner,
.single .site-hero__inner,
.archive .site-hero__inner {
  display: none !important;
}

/* Link under calendar – styled like white calendar links */
.courses-link-under-calendar {
  margin-top: 1rem;
  text-align: right;               /* or left/center if you prefer */
}

.courses-link-under-calendar a {
  color: #00B2E9;
  text-decoration: none;
  font-weight: 600;
}

.courses-link-under-calendar a:hover,
.courses-link-under-calendar a:focus {
  color: rgba(255, 255, 255, 0.85); /* subtle hover */
  text-decoration: underline;
}

/* Hide the date line only on single Events Calendar pages */
.single-tribe_events .text-sm.text-gray-500.mb-2 {
  display: none;
}

/* 1. Generic protection: images never overflow their container */
.wp-block-image img,
.wp-block-heading img {
  max-width: 100%;
  height: auto;
}

/* 2. Make centered figures respect the column width */
.wp-block-image figure.aligncenter,
.wp-block-image.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

/* 3. Headings with images (like your second H2) should also not overflow */
.wp-block-heading.alignwide img,
.wp-block-heading img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Base card look */
.agile-card {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
  padding: 2rem 1.75rem;
  text-align: left;
  display: flex;
  height: 100%;
}

/* Make whole card clickable */
.agile-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
  width: 100%;
  height: 100%;
}

/* Smooth hover */
.agile-card__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.06);
  transition: all 0.18s ease-out;
}

/* Ensure hover effect applies to the card, not just text */
.agile-card__link {
  border-radius: 18px;
}

/* Typography inside cards */
.agile-card h3.wp-block-heading {
  margin-top: 0;
  margin-bottom: 0.75rem;
  line-height: 1.15;
  font-weight: 700;
  word-break: keep-all;    /* help avoid ugly breaks */
  hyphens: auto;
}

.agile-card p {
  margin: 0;
  color: #4b5563; /* subtle gray for text */
  font-size: 0.95rem;
  line-height: 1.5;
}
/* 1st card (Formación) – corporate blue */
.wp-block-columns.alignwide .agile-card:nth-child(1) h3 {
  color: #0057ff; /* adjust to your exact brand blue */
}

/* 2nd, 3rd, 4th cards – corporate purple */
.wp-block-columns.alignwide .agile-card:nth-child(2) h3,
.wp-block-columns.alignwide .agile-card:nth-child(3) h3,
.wp-block-columns.alignwide .agile-card:nth-child(4) h3 {
  color: #6b21a8; /* adjust to your brand purple */
}

/* Prevent super-awkward breaks on medium/small screens */
@media (max-width: 900px) {
  .agile-card h3.has-large-font-size {
    font-size: 1.35rem; /* slightly smaller */
  }
}

/* On very small screens, let headings take full width and align left */
@media (max-width: 600px) {
  .wp-block-columns.alignwide {
    gap: 1.25rem;
  }

  .agile-card {
    text-align: left;
  }
}

body.blog,
body.archive {
  background: #f4f5f7;
}

.content-list,
.archive .site-main {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.blog-archive-item {
  margin-bottom: 1.75rem;
}

.blog-card {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  padding: 1.5rem 1.75rem 1.5rem 1.9rem;
  border-radius: 18px;
  background: #ffffff;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.16);
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out,
    background-color 0.18s ease-out;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 35px rgba(15, 23, 42, 0.10);
  border-color: var(--wp--preset--color--agile-vibrant, #4f46e5);
}

.blog-card::before {
  content: "";
  position: absolute;
  left: 0.85rem;
  top: 18px;
  bottom: 18px;
  width: 4px;
  border-radius: 999px;
  background: var(--wp--preset--color--agile-turq, #22c7d8);
  opacity: 0.75;
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}

.blog-card:hover::before {
  opacity: 1;
  transform: translateX(1px);
}

.blog-card__thumb {
  flex: 0 0 260px;
  max-width: 260px;
  border-radius: 14px;
  overflow: hidden;
  background: #f3f4f6;
}

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

.blog-card__thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wp--preset--color--agile-deep, #0f172a);
  color: #ffffff;
  font-weight: 700;
  font-size: 1.35rem;
}

.blog-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.blog-card__title {
  margin: 0 0 0.35rem;
  font-family: var(--wp--preset--font-family--heading, "Nunito", system-ui);
  font-size: 1.4rem;
  line-height: 1.3;
  font-weight: 800;
  color: var(--wp--preset--color--agile-deep, #020617);
}

.blog-card__meta {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6b7280;
}

.blog-card__excerpt {
  font-size: 0.98rem;
  line-height: 1.55;
  color: #4b5563;
}

.blog-card__excerpt p {
  margin: 0;
}

@media (max-width: 900px) {
  .blog-card {
    flex-direction: column;
  }

  .blog-card__thumb {
    flex-basis: auto;
    max-width: 100%;
    height: 200px;
  }
}

.blog .entry-title,
.archive .page-title {
  font-family: var(--wp--preset--font-family--heading, "Nunito", system-ui);
  font-weight: 800;
  font-size: clamp(2.2rem, 3vw, 2.8rem);
  color: var(--wp--preset--color--agile-deep, #020617);
  margin-bottom: 0.25rem;
}

/* ===== Blog pagination ===== */

.pagination {
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
  text-align: center;           /* center the nav */
}

/* The <nav> wrapper */
.navigation.pagination {
  display: inline-flex;         /* shrink to content so centering works nicely */
}

/* Container for page links */
.navigation.pagination .nav-links {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Generic page number style */
.navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;

  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--wp--preset--font-family--heading, "Nunito", system-ui);
  text-decoration: none;
  color: #4b5563;
  background: #e5e7eb;
  transition:
    background-color 0.15s ease-out,
    color 0.15s ease-out,
    border-color 0.15s ease-out,
    transform 0.12s ease-out;
}

/* Hover state for normal links */
.navigation.pagination a.page-numbers:hover {
  background: var(--wp--preset--color--agile-turq, #22c7d8);
  color: #ffffff;
  border-color: var(--wp--preset--color--agile-turq, #22c7d8);
  transform: translateY(-1px);
}

/* Active / current page */
.navigation.pagination .page-numbers.current {
  background: var(--wp--preset--color--agile-vibrant, #4f46e5);
  color: #ffffff;
  border-color: var(--wp--preset--color--agile-vibrant, #4f46e5);
  cursor: default;
}

/* Dots (…) */
.navigation.pagination .page-numbers.dots {
  background: transparent;
  border-color: transparent;
  color: #9ca3af;
  padding: 0;
  min-width: auto;
}

/* Prev/Next buttons – give them more weight */
.navigation.pagination .page-numbers.prev,
.navigation.pagination .page-numbers.next {
  padding: 0 0.9rem;
  background: #ffffff;
  border-color: #d1d5db;
  color: var(--wp--preset--color--agile-deep, #111827);
}

.navigation.pagination .page-numbers.prev:hover,
.navigation.pagination .page-numbers.next:hover {
  background: var(--wp--preset--color--agile-deep, #111827);
  color: #ffffff;
  border-color: var(--wp--preset--color--agile-deep, #111827);
}

/* -------------------------------------------------------------------------- */
/* WooCommerce: Global tweaks                                                 */
/* -------------------------------------------------------------------------- */

/* Ensure Woo elements use Agile611 font + color */
body.woocommerce,
body.woocommerce-page {
  font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--wp--preset--color--agile-text);
}

/* Main padding for Woo pages */
body.woocommerce main.site-main,
body.woocommerce-page main.site-main {
  padding-top: var(--wp--preset--spacing--60, 2.25rem);
  padding-bottom: var(--wp--preset--spacing--80, 5rem);
}

/* -------------------------------------------------------------------------- */
/* WooCommerce – single product 2‑column layout                               */
/* -------------------------------------------------------------------------- */

/* Outer container for the product on single product pages */
body.woocommerce.single-product .woocommerce .single-product {
  max-width: 1200px;
  margin: 0 auto;                /* center in page */
}

/* Make the inner .product a 2‑column grid: gallery + summary */
body.woocommerce.single-product .woocommerce .single-product > .product {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;  /* left: grey box (image), right: price box */
  column-gap: 2.5rem;
  align-items: flex-start;
}

/* Remove extra bottom margins so the grid lines up nicely */
body.woocommerce.single-product .woocommerce div.product div.images {
  margin-bottom: 0;
}

body.woocommerce.single-product .woocommerce div.product div.summary {
  margin-bottom: 0;
}

/* Optional: style the gallery as a grey box (like your screenshot) */
body.woocommerce.single-product .woocommerce-product-gallery {
  background: #f3f4f6;
  padding: 1.5rem;
  border-radius: 12px;
}

/* Optional: style the price card */
body.woocommerce.single-product .summary.entry-summary {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
  padding: 1.8rem 2rem;
}

/* Title centered above the two columns */
body.woocommerce.single-product .page-header h1.entry-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--wp--preset--color--agile-deep);
  margin-bottom: 0.5rem;
  text-align: center;
}

/* Responsive: stack the two columns on smaller screens */
@media (max-width: 900px) {
  body.woocommerce.single-product .woocommerce .single-product > .product {
    grid-template-columns: 1fr;   /* one column */
    row-gap: 2rem;
  }
}

/* -------------------------------------------------------------------------- */
/* WooCommerce – Agile611 styling for Add to cart button                      */
/* -------------------------------------------------------------------------- */

/* Main "Añadir al carrito" button on single product */
body.woocommerce.single-product .single_add_to_cart_button.button {
  background: var(--wp--preset--color--agile-vibrant);  /* your main accent */
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 0.6rem 1.8rem;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.16);
  cursor: pointer;
  transition: all 0.18s ease-out;
}

/* Hover / focus state */
body.woocommerce.single-product .single_add_to_cart_button.button:hover,
body.woocommerce.single-product .single_add_to_cart_button.button:focus {
  background: var(--wp--preset--color--agile-primary);  /* darker Agile blue */
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.22);
}

/* Remove WooCommerce outline color on focus for consistency */
body.woocommerce.single-product .single_add_to_cart_button.button:focus-visible {
  outline: 2px solid var(--wp--preset--color--agile-turq);
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------- */
/* WooCommerce – Cart buttons in Agile611 colors                              */
/* -------------------------------------------------------------------------- */

/* All cart action buttons (apply coupon, update cart, etc.) */
body.woocommerce-cart .woocommerce .button {
  background: var(--wp--preset--color--agile-vibrant);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 0.55rem 1.4rem;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
  cursor: pointer;
  transition: all 0.18s ease-out;
}

/* Primary / “alt” buttons – e.g. Finalizar compra */
body.woocommerce-cart .woocommerce .button.alt,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  background: var(--wp--preset--color--agile-vibrant);
  color: #ffffff;
}

/* Hover / focus states */
body.woocommerce-cart .woocommerce .button:hover,
body.woocommerce-cart .woocommerce .button:focus {
  background: var(--wp--preset--color--agile-primary);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.22);
}

/* Accessible focus outline */
body.woocommerce-cart .woocommerce .button:focus-visible {
  outline: 2px solid var(--wp--preset--color--agile-turq);
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------- */
/* Events Calendar Template – use Nunito instead of Monda / Open Sans        */
/* -------------------------------------------------------------------------- */

#ect-events-list-content h2.ect-list-title,
#ect-events-list-content h2.ect-list-title a.ect-event-url,
#ect-events-list-content .ect-event-content,
#ect-events-list-content .ect-event-content p,
#ect-events-list-content .ect-list-venue .ect-icon,
#ect-events-list-content .ect-list-venue .ect-venue-details,
#ect-events-list-content .ect-list-venue .ect-venue-details span,
#ect-events-list-content .ect-list-venue .ect-venue-details .ect-google a,
#ect-events-list-content .ect-rate-area,
#ect-events-list-content .ect-events-read-more,
#ect-events-list-content .ect-events-read-more span {
  font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif !important;
}

/* Events list (ECT) – hide price line for all events using this layout */
#ect-events-list-content .ect-rate-area {
  display: none !important;
}

/* -------------------------------------------------------------------------- */
/* Tickets checkout – center main content                                     */
/* -------------------------------------------------------------------------- */

/* Limit width and center the whole tickets checkout block */
body.page-id-19180 .tribe-tickets__commerce-checkout {
  max-width: 760px;        /* tweak to taste: 680–900px depending on density */
  margin: 0 auto;          /* centers horizontally */
}

/* Make the “Comprar Entradas” button span full width of this centered column */
body.page-id-19180
  .tribe-tickets__commerce-checkout-form-submit-button,
body.page-id-19180
  .tribe-tickets__commerce-checkout-paypal-advanced-payments-form-submit-button {
  width: 100%;
}

/* Slightly tighten the main column padding on large screens so it feels centered */
@media (min-width: 960px) {
  body.page-id-19180 main#primary .wp-block-group.alignwide {
    max-width: 1120px;
    margin: 0 auto;
  }
}

/* -------------------------------------------------------------------------- */
/* Hero section – full width on homepage                                      */
/* -------------------------------------------------------------------------- */

/* 1. Make the hero wrapper span the full viewport width */
body.home main .wp-block-group.alignfull.has-background:first-of-type {
  /* ensure it truly fills the screen */
  width: 100vw;
  max-width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* 2. Let the columns row inside the hero go full width too */
body.home main .wp-block-group.alignfull.has-background:first-of-type
  .wp-block-columns.alignwide {
  max-width: 1200px;   /* increase or remove for 100% */
  margin: 0 auto;
}

/* Optional: on very large screens, remove max-width for a *completely*
   edge-to-edge hero (text + terminal). Comment out if you prefer it boxed */
@media (min-width: 1440px) {
  body.home main .wp-block-group.alignfull.has-background:first-of-type
    .wp-block-columns.alignwide {
    max-width: none;
    padding-left: 4vw;
    padding-right: 4vw;
  }
}


/* Show hamburger only on small screens, hide on desktop */
.site-header__toggle {
  display: none;           /* default: hidden */
}

/* Adjust the breakpoint (768px is a good starting point) */
@media (max-width: 768px) {
  .site-header__toggle {
    display: inline-flex;  /* or block / flex, depending on your design */
    align-items: center;
    justify-content: center;
  }
}

a:visited {
  color: #9ca3af !important;
}

/* 🔧 Fix vertical captions: make all .wp-element-caption horizontal */
.wp-block-image .wp-element-caption,
figure .wp-element-caption,
.wp-element-caption {
    display: block !important;          /* normal block below the image */
    white-space: normal !important;     /* wrap by words, not letters */
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;

    width: auto !important;
    max-width: 100% !important;

    /* Optional styling */
    text-align: center;
    margin-top: 0.5em;
    line-height: 1.4;
}

/* Make sure columns are wide enough so text doesn't get squeezed */
.wp-block-columns.is-layout-flex > .wp-block-column {
    min-width: 220px;
}

/* Footer services menu link color */
.site-footer__services-nav a {
    color: #9ca3af;
}

/* Optional: keep the same color on hover/focus/visited */
.site-footer__services-nav a:hover,
.site-footer__services-nav a:focus,
.site-footer__services-nav a:visited {
    color: #9ca3af;
}

/* Base color for the two special buttons */
.wp-block-button__link[href="/servicios/"],
.wp-block-button__link[href="/contacto/"] {
    background-color: #00B2E9;
    border-color: #00B2E9;
    color: #ffffff;          /* normal state text color */
}

/* Visited state only for those two buttons */
.wp-block-button__link[href="/servicios/"]:visited,
.wp-block-button__link[href="/contacto/"]:visited {
    color: #ffffff;          /* black text when visited */
}