/*
Theme Name: English & Chill
Theme URI: https://wordpress.org/themes/englishandchill/
Author: Adrián Toll
Author URI: https://englishandchill.com
Description: English & Chill contains a simplified and stylish design.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: englishandchill
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 0px;
	outline-style: inherit;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

/* ==== Remove Phone Focus ==== */
* {
  -webkit-tap-highlight-color: transparent;

/* === Fancy Button === */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&display=swap');

.fancy-button {
  --button-radius: 0.75em;
  --button-outline: var(--button_outline, #000); /* ✅ se puede cambiar desde shortcode */
  --button-color: #99aebb; /* color de fondo por defecto */

  font-family: 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  border: none;
  cursor: pointer;
  border-radius: var(--button-radius);
  background: var(--button-outline); /* borde negro visual externo */
  padding: 0;
  display: inline-block;
  text-decoration: none;
  white-space: normal;
  box-sizing: border-box;
  vertical-align: middle;
  max-width: 100%;
  height: 100%;
}

/* Capa superior del botón */
.fancy-button .button_top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  box-sizing: border-box;
  border: 1px solid var(--button-outline); /* ✅ color dinámico */
  border-radius: var(--button-radius);
  padding: 0.75em 1.5em;
  background: var(--button-color);
  color: var(--button-outline); /* ✅ color de texto dinámico */
  transform: translateY(-0.35em);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  text-align: center;
  width: 100%;
  min-width: 4.5rem;
  height: 100%;
}

.fancy-button:hover .button_top  { transform: translateY(-0.5em); }
.fancy-button:active .button_top { transform: translateY(0); }

/* Imagen dentro del botón */
.fancy-button .button-icon {
  width: 100%;
  max-width: 120px;
  height: auto;
  display: block;
  margin: 0 auto;
  flex-shrink: 0;
}

/* Texto del botón */
.fancy-button .button-text {
  display: block;
  font-weight: 300;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  margin: 0;
  padding: 0;
}

/* Responsive */
@media (max-width: 600px) {
  .fancy-button .button-icon {
    max-width: 100px; /* ajustado para móvil */
  }
  .fancy-button .button_top {
    padding: 0.65em 1em;
  }
  .fancy-button .button-text {
    font-size: 1.2rem;
  }
}


/* === Fancy Back Button: compacto con fondo negro === */
.fancy-back-button {
  display: inline-block;
  background: var(--button-outline, #000); /* marco negro como los demás */
  border-radius: var(--button-radius, 0.75em);
  padding: 0em; /* margen interno del marco */
  width: auto;
}

.fancy-back-button .button_top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  border: 1px solid var(--button-outline, #000);
  border-radius: var(--button-radius, 0.75em);
  padding: 0.6em 1.2em;
  background: var(--button-color, #b5e2ff); /* color interior (azul) */
  color: var(--button-outline, #000);
  transform: translateY(-0.35em);
  transition: transform 0.1s ease;
  width: auto;
}

.fancy-back-button:hover .button_top {
  transform: translateY(-0.5em);
}

.fancy-back-button:active .button_top {
  transform: translateY(0);
}