/*
Theme Name: colegiomixtobelen
Description: Tema de WordPress para Colegio Mixto Belén
Version: 2026.06.13.04
Author: Daniel Ordoñez
Author URI: https://daniordonez.com
Text Domain: cmb
*/

@import url('./css/base.css');

:root {
  /* --- Typography & Base --- */
  font-family: 'GeneralSans', system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color-scheme: light;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



#app {
  /* --- Topbar --- */
  --topbar-height: 90px;
  --infobar-height: 1.5rem;
  --topbar-logo-size: calc(var(--topbar-height) - var(--infobar-height) + 1rem);
  --topbar-content-height: calc(var(--topbar-height) - var(--infobar-height));
}


/* --- Mobile menu --- */
#mobile-menu {
  margin-top: var(--infobar-height);
  position: sticky;
  top: var(--infobar-height);
}

#mobile-menu nav {
  transform-origin: top right;
}


/* --- Topbar --- */
#topbar {
  height: var(--topbar-height);
  z-index: 100;
  background: linear-gradient(to bottom, rgba(var(--rgb-canvas), 1), rgba(var(--rgb-canvas), 0.7) 120%);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
}

.infobar {
  height: var(--infobar-height);
}

.topbar-content {
  height: var(--topbar-content-height);
}

#topbar-logo {
  height: var(--topbar-logo-size);
  width: var(--topbar-logo-size);
}

#topbar-logo img {
  max-height: var(--topbar-logo-size);
  max-width: var(--topbar-logo-size);
}




/* --- MOBILE DEVICES --- */
@media (min-width: 768px) {
  #app {
    --topbar-height: 120px;
    --topbar-logo-size: var(--topbar-height);
  }
}


.wp-block-social-links,
ul.wp-block-social-links {
  display: flex;
  gap: var(--pad-xs);
}

.wp-social-link {
  border-radius: var(--corner-sm);
  background: var(--color-primary);
  color: white;

  a {
    font-size: 1.5em;
  }
}

.wp-block-embed__wrapper {
  display: flex;
  justify-content: center;
}

/* HELP BTN */

.help-btn-action {
  display: flex;
  text-align: center;

  --action-bg: linear-gradient(15deg, var(--color-primary), var(--color-blue-dark-1));
  --action-bg-hover: linear-gradient(15deg, var(--color-primary) 50%, var(--color-blue-dark-1) 120%);

  --bg: var(--action-bg, var(--color-primary, black));
  --bg-hover: var(--action-bg-hover, var(--color-primary, black));
}

.help-btn-action-btn {
  width: 100%;
  background: var(--bg);
  color: var(--color-white, white);
  font-size: 1.25rem;
  height: 2.5em;
  cursor: pointer;
  border-radius: 2.5em;
  border: none;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;

  box-shadow: rgba(var(--rgb-primary, 0, 0, 0), 0.35) 0px 3px 3px 0px;
  transition: box-shadow .3s ease-in-out;
}

@media (hover: hover) {
  .help-btn-action-btn:hover {
    background: var(--bg-hover, var(--bg));
    box-shadow: rgba(var(--rgb-primary, 0, 0, 0), 0.3) 0px 10px 15px -3px, rgba(var(--rgb-primary, 0, 0, 0), 0.25) 0px 4px 6px -2px;
    color: var(--color-white, white);
  }
}