/*
Identidad de marca Maryland Centro de Estudios y Ocio Educativo
sobre el tema Eduall (turquesa/naranja/topo, muestreados del logo oficial).
*/

:root {
    --main-color-one: #00A4A6;   /* turquesa primario */
    --secondary-color: #F39912;  /* naranja acento */
    --main-color2: #F39912;      /* acento secundario (badges/alertas) */
    --heading-color: #474139;    /* topo oscuro, contraste 10:1 sobre blanco */
    --paragraph-color: #6B6155;  /* topo medio, contraste 6:1 sobre blanco */
    --border-color1: #E8E6E2;    /* gris calido claro derivado del topo */
}

/* Overrides puntuales de colores fijos del tema que no usan variables CSS */

.about_us_widget .contact_info_list li a,
.social-media-list li a,
.footer-top-space .widget_nav_menu ul li a:after,
.footer-area-2 .widget_nav_menu ul li a:after {
    background: var(--heading-color) !important;
}

.navbar.navbar-area.navbar-expand-lg.navigation-style-01.navbar-style-02 .custom-container .navbar-collapse .navbar-nav > li a,
.navbar.navbar-area.navbar-expand-lg.navigation-style-01.navbar-style-02 .custom-container .navbar-collapse .navbar-nav > li.menu-item-has-children:before,
.navbar.navbar-area.navbar-expand-lg.navigation-style-01.navbar-style-03 .custom-container .navbar-collapse .navbar-nav > li a,
.navbar.navbar-area.navbar-expand-lg.navigation-style-01.navbar-style-03 .custom-container .navbar-collapse .navbar-nav > li.menu-item-has-children:before {
    color: var(--heading-color) !important;
}

.prev-post a,
.next-post a {
    color: var(--heading-color) !important;
}

/* Separa el menú del logo y deja un margen respecto al borde derecho para
   que los submenús desplegables no se corten contra el borde del viewport
   (la producción original usaba un 10%, aquí lo reducimos para acercar más
   el menú al borde). */
.header-menu.d-lg-block {
    margin: 0 3% 0 auto;
}

/* El header no tiene padding vertical propio en escritorio (solo en móvil,
   <991px) y el logo queda pegado al borde izquierdo/superior con el gutter
   mínimo de Bootstrap. Le damos algo más de aire. */
.header-inner {
    padding-block: 14px;
    padding-inline-start: 16px;
}

/* Logo en /public/assets/img/logo-maryland.horizontal.png (composición
   horizontal aportada por el usuario). Limitamos la altura para que marque
   la altura del header. */
.site-logo img {
    height: 88px;
    width: auto;
    max-width: none !important;
}

/* La tarjeta "Información" del hero (.banner-box.three) está pensada para
   pantallas >=1700px, donde sale -126px fuera de la imagen a propósito; en
   anchos de escritorio normales el overflow-hidden de la sección la corta.
   La recolocamos dentro del área visible. */
@media (max-width: 1699px) {
    .banner-box.three {
        inset-inline-end: 12px;
    }
}

/* Menú principal: más peso/contraste en el texto, sin flecha de desplegable,
   y una tarjeta de submenú propia (con sombra y bordes redondeados) que se
   abre al hover, ya que el tema no trae CSS para la estructura real que usa
   el menú de WordPress (menu-item / sub-menu). */
.header-menu .nav-menu > li.menu-item > a {
    font-weight: 600;
    color: var(--heading-color);
    padding-block: 8px;
    display: inline-block;
}

.header-menu .nav-menu > li.menu-item > a:hover {
    color: var(--main-color-one);
}

.header-menu .nav-menu > li.menu-item-has-children > a::after,
.header-menu .nav-menu > li.menu-item-has-children > a::before {
    content: none !important;
}

.header-menu .nav-menu > li.menu-item {
    position: relative;
}

.header-menu .nav-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    margin: 0;
    padding: 8px;
    min-width: 230px;
    list-style: none;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 16px 32px rgba(20, 18, 15, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.header-menu .nav-menu > li.menu-item:hover > .sub-menu,
.header-menu .nav-menu > li.menu-item:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-menu .nav-menu .sub-menu li.menu-item > a {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    color: var(--paragraph-color);
    white-space: nowrap;
}

.header-menu .nav-menu .sub-menu li.menu-item > a:hover {
    background: var(--border-color1);
    color: var(--heading-color);
}

/* Botón CTA a la derecha del menú */
.header-right .btn-header-cta {
    padding: 10px 24px;
}

/* El theme capitaliza cada palabra del título de página (text-transform:
   capitalize), lo que rompe preposiciones en español ("Test Of English En
   Maryland"). Nuestros títulos ya vienen con la capitalización correcta. */
/* La cabecera de "migas de pan" del tema usa 120px de padding arriba y
   abajo más un título a 45px: se ve desproporcionada para una simple barra
   de ubicación. La reducimos en todas las páginas que la usan, y quitamos
   el fondo de color para que pese menos visualmente. */
.breadcrumb-wrap.navbar-style-02 .breadcrumb-content,
.breadcrumb-wrap.navbar-style-03 .breadcrumb-content {
    padding: 14px 0;
}

.breadcrumb-wrap {
    background: transparent;
    border-bottom: 1px solid var(--border-color1);
}

.breadcrumb-wrap .page-list li {
    font-size: 14px;
}

/* Mismo problema que arriba: el tema capitaliza cada palabra de los
   encabezados dentro de bloques Group de Gutenberg, rompiendo preposiciones
   en español ("¿Qué Es El Oxford Test Of English?"). */
.wp-block-group__inner-container > h1,
.wp-block-group__inner-container > h2,
.wp-block-group__inner-container > h3,
.wp-block-group__inner-container > h4,
.wp-block-group__inner-container > h5,
.wp-block-group__inner-container > h6 {
    text-transform: none;
}

/* Mismo problema una tercera vez: .btn capitaliza cada palabra, lo que
   rompe etiquetas de botón con varias palabras en español ("Ver Todos Los
   Cursos Y Talleres" en vez de "Ver todos los cursos y talleres"). */
.btn {
    text-transform: none;
}

/* main-style.css fuerza color: var(--paragraph-color) !important en
   .wp-block-button.is-style-outline .wp-block-button__link, lo que
   sobrescribe el color:#fff inline de los botones de WhatsApp de
   "Exámenes Oxford" (fondo sólido definido a mano en WordPress) dejando el
   texto casi ilegible. Si el botón ya trae su propio fondo, respetamos el
   texto blanco que pide el contenido original. */
.wp-block-button.is-style-outline .wp-block-button__link.has-background {
    color: #fff !important;
}

/* Retrato de "Quiénes somos": la única foto disponible en la biblioteca de
   medios es de 150x179px (subida en 2020); ampliarla a columna completa se
   ve pixelada, así que la mostramos a un tamaño modesto en formato círculo. */
.qs-portrait {
    width: 220px;
    height: 220px;
    object-fit: cover;
    border: 6px solid #fff;
}

/* Fondo decorativo detrás del retrato: un círculo difuminado en los colores
   de marca y un anillo punteado, para que el hueco de la foto pequeña no se
   quede tan desnudo. */
.qs-portrait-wrap::before,
.qs-portrait-wrap::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    z-index: 0;
}

.qs-portrait-wrap::before {
    inset-block-start: -20px;
    inset-inline-start: -20px;
    width: 260px;
    height: 260px;
    background: linear-gradient(135deg, hsl(var(--main)/0.16), hsl(var(--main-two)/0.16));
}

.qs-portrait-wrap::after {
    inset-block-start: -36px;
    inset-inline-start: -36px;
    width: 292px;
    height: 292px;
    border: 2px dashed hsl(var(--main)/0.3);
}

/* Cuarta aparición del mismo problema de capitalización (ver comentarios
   arriba), esta vez en el texto de una cita: main-style.css pone
   text-transform:capitalize en los párrafos dentro de <blockquote>. */
.quote-block p {
    text-transform: none !important;
}

/* main-style.css añade un icono de comillas (Font Awesome 5 solid) como
   decoración de fondo en los blockquote, pero solo tenemos cargada la
   familia "brands" del icon font, así que el glifo no existe y se pinta
   como un cuadro relleno visible encima del texto. Lo quitamos. */
.quote-block::before {
    content: none !important;
}

/* Lista de servicios presenciales en "Oferta Formativa": quitamos la
   viñeta por defecto y usamos un check en el color de marca. */
.oferta-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.oferta-list li {
    position: relative;
    padding-inline-start: 28px;
    color: var(--heading-color);
    margin-bottom: 18px;
}

.oferta-list li::before {
    content: "\f00c";
    font-family: "FontAwesome";
    position: absolute;
    inset-inline-start: 0;
    top: 4px;
    color: hsl(var(--main-two));
    font-size: 14px;
}

.oferta-list--main li::before {
    color: hsl(var(--main));
}

/* Tarjetas de /servicios/: toda la tarjeta es un enlace, así que reseteamos
   el color/subrayado por defecto de <a> y añadimos una pequeña elevación
   al pasar el ratón. */
.service-card {
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover {
    color: inherit;
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(20, 18, 15, 0.08);
}

/* Tipografía del cuerpo de las entradas del blog: los párrafos no traen
   margen inferior propio (el tema no define uno base), así que quedaban
   todos pegados. */
.blog-prose {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--paragraph-color);
}

.blog-prose p {
    margin-bottom: 24px;
}

.blog-prose h2,
.blog-prose h3,
.blog-prose h4 {
    margin-top: 40px;
    margin-bottom: 16px;
}

.blog-prose ul,
.blog-prose ol {
    margin-bottom: 24px;
    padding-inline-start: 24px;
}

.blog-prose li {
    margin-bottom: 8px;
}

.blog-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* Imágenes incrustadas en el cuerpo del post: marco con sombra suave,
   separación del texto y pies de foto estilizados. */
.blog-prose figure {
    margin: 32px 0;
}

.blog-prose figure img {
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(20, 18, 15, 0.12);
    border: 1px solid var(--border-color1);
}

.blog-prose figure.alignleft {
    margin: 8px 24px 24px 0;
    max-width: 45%;
}

.blog-prose figure.alignright {
    margin: 8px 0 24px 24px;
    max-width: 45%;
}

/* WordPress envuelve la imagen en un <div class="wp-block-image"> que
   wp-block-library.css convierte en contenedor flex, y además pone
   "display: table" en .aligncenter (para que la figure encoja al tamaño
   de una tabla/leyenda). Ambas cosas rompen un ancho y centrado normales,
   así que forzamos ambos elementos a bloque de verdad. */
.blog-prose .wp-block-image {
    display: block;
    text-align: center;
}

.blog-prose figure.aligncenter {
    display: block;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.blog-prose figure.aligncenter img {
    display: block;
    width: 100%;
    height: auto;
}

.blog-prose figcaption {
    margin-top: 12px;
    font-size: 14px;
    font-style: italic;
    color: var(--paragraph-color);
    text-align: center;
}

/* Igual que con .aligncenter, el sistema de columnas flex de las galerías
   de WordPress da anchos raros con una sola imagen. Como en el blog solo
   hay una entrada con galería y es de una imagen (columns-1), simplificamos
   a un bloque normal centrado en vez de pelear con su grid flex. */
.blog-prose .wp-block-gallery {
    display: block;
    max-width: 560px;
    margin: 32px auto;
}

.blog-prose .blocks-gallery-grid {
    display: block;
    margin: 0;
    padding: 0;
}

.blog-prose .blocks-gallery-item {
    width: 100% !important;
    margin: 0 !important;
}

.blog-prose .blocks-gallery-item figure {
    display: block !important;
    height: auto !important;
}

.blog-prose .wp-block-gallery img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(20, 18, 15, 0.12);
    border: 1px solid var(--border-color1);
}