/*
Theme Name:  Hello Elementor Cuzgow
Template:    hello-elementor          ← must reference the parent theme 
Theme URI:   https://github.com/cuzgow/hello-elementor-cuzgow
Author:      Cuzgow
Author URI:  https://cuzgow.com/
Description: Child theme of Hello Elementor, optimised for WPO and scalability.
Version:     1.1.0                 match the PHP constant 
Requires at least: 6.0
Tested up to:      6.5
Requires PHP:      8.1
License:     GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: hello-elementor-cuzgow    (keep only the child slug) 
Tags: accessibility-ready, flexible-header, custom-colors, custom-menu,
      custom-logo, featured-images, rtl-language-support, threaded-comments,
      translation-ready
*/


/* ──────────────────────────────────
   1.  VARIABLES :root
   ────────────────────────────────── */
:root {

 /* brand color https://hslpicker.com/#d10023
							 https://www.smashingmagazine.com/2021/07/hsl-colors-css/
	---------------------------------------------------------------------- */
  --brand-hue:        134;
  --brand-saturation: 88.2%;
  --brand-lightness:  39.8%;
  --brand-alpha:      1;
  --brand-color: hsla(var(--brand-hue), var(--brand-saturation), var(--brand-lightness), var(--brand-alpha));

  /* Pallet luminosity https://hslpicker.com/#d10023
  ---------------------------------------------------------------------- */
  --color-light-1:  hsla(var(--brand-hue), var(--brand-saturation), 98%, 1);
	--color-light-2: 	hsla(var(--brand-hue), var(--brand-saturation), 95%, 1);
  --color-light-3:  hsla(var(--brand-hue), var(--brand-saturation), 85%, 1);
  --color-light-4:  hsla(var(--brand-hue), var(--brand-saturation), 75%, 1);
  --color-light-5:  hsla(var(--brand-hue), var(--brand-saturation), 65%, 1);
  --color-light-6:  hsla(var(--brand-hue), var(--brand-saturation), 55%, 1);
  --color-light-7:  hsla(var(--brand-hue), var(--brand-saturation), 45%, 1);
  --color-light-8:  hsla(var(--brand-hue), var(--brand-saturation), 35%, 1);
  --color-light-9:  hsla(var(--brand-hue), var(--brand-saturation), 25%, 1);
  --color-light-10: hsla(var(--brand-hue), var(--brand-saturation), 15%, 1);
  --color-light-11: hsla(var(--brand-hue), var(--brand-saturation),  5%, 1);
  --color-light-12: hsla(var(--brand-hue), var(--brand-saturation),  2%, 1);

  /* Pallet saturation https://hslpicker.com/#d10023
  ---------------------------------------------------------------------- */
  --color-sat-1:  hsla(var(--brand-hue), 98%, var(--brand-lightness), 1);
  --color-sat-2:  hsla(var(--brand-hue), 95%, var(--brand-lightness), 1);
  --color-sat-3:  hsla(var(--brand-hue), 85%, var(--brand-lightness), 1);
  --color-sat-4:  hsla(var(--brand-hue), 75%, var(--brand-lightness), 1);
  --color-sat-5:  hsla(var(--brand-hue), 65%, var(--brand-lightness), 1);
  --color-sat-6:  hsla(var(--brand-hue), 55%, var(--brand-lightness), 1);
  --color-sat-7:  hsla(var(--brand-hue), 45%, var(--brand-lightness), 1);
  --color-sat-8:  hsla(var(--brand-hue), 35%, var(--brand-lightness), 1);
  --color-sat-9:  hsla(var(--brand-hue), 25%, var(--brand-lightness), 1);
  --color-sat-10: hsla(var(--brand-hue), 15%, var(--brand-lightness), 1);
  --color-sat-11: hsla(var(--brand-hue),  5%, var(--brand-lightness), 1);
  --color-sat-12: hsla(var(--brand-hue),  2%, var(--brand-lightness), 1);

  /* Pallet hue https://colordesigner.io/color-wheel
  ---------------------------------------------------------------------- */
  --color-hue-1:  hsla(calc(var(--brand-hue) +  30), var(--brand-saturation), var(--brand-lightness), 1);
  --color-hue-2:  hsla(calc(var(--brand-hue) +  60), var(--brand-saturation), var(--brand-lightness), 1);
  --color-hue-3:  hsla(calc(var(--brand-hue) +  90), var(--brand-saturation), var(--brand-lightness), 1);
  --color-hue-4:  hsla(calc(var(--brand-hue) + 120), var(--brand-saturation), var(--brand-lightness), 1);
  --color-hue-5:  hsla(calc(var(--brand-hue) + 150), var(--brand-saturation), var(--brand-lightness), 1);
  --color-hue-6:  hsla(calc(var(--brand-hue) + 180), var(--brand-saturation), var(--brand-lightness), 1);
  --color-hue-7:  hsla(calc(var(--brand-hue) + 210), var(--brand-saturation), var(--brand-lightness), 1);
  --color-hue-8:  hsla(calc(var(--brand-hue) + 240), var(--brand-saturation), var(--brand-lightness), 1);
  --color-hue-9:  hsla(calc(var(--brand-hue) + 270), var(--brand-saturation), var(--brand-lightness), 1);
  --color-hue-10: hsla(calc(var(--brand-hue) + 300), var(--brand-saturation), var(--brand-lightness), 1);
  --color-hue-11: hsla(calc(var(--brand-hue) + 330), var(--brand-saturation), var(--brand-lightness), 1);

  /* ——— Text colours ——— */
  --text-dark: var(--color-light-12);
  --text-white: var(--color-light-1);

  /* ——— Typography tokens ——— */
  --font-family:             system-ui, sans-serif;
  --font-family-headings:    Superclarendon, 'Bookman Old Style', 'URW Bookman', Georgia, serif;
  --font-weight-regular:     400;
  --font-weight-bold:        700;

  /* ——— Line heights ——— */
  --line-height-normal:          1.7;
  --line-height-condensed:       1.2;
  --line-height-extra-condensed: 0.8;
  --line-height-large:           2;

   /* ——— Letter Spacing ——— */
  --letter-spacing-regular:  0.03em;
  --letter-spacing-expanded: 0.1em;
  --word-spacing-regular:    0.3em;
  --word-spacing-expanded:   0.5em;

  /* OpenType / layout helpers */
  --text-align:                center;
  --text-wrap:                 pretty;
  --writing-mode:              horizontal-tb;
  --font-stretch-condensed:    semi-condensed;
  --font-stretch-normal:       normal;
  --font-kerning:              auto;
  --font-variant-caps-small:   small-caps;
  --font-variant-caps-normal:  normal;
  --font-variant-ligatures-normal:  normal;
  --font-variant-ligatures-out:     no-common-ligatures;

  /* Additional styling tokens */
  --stroke-width:  1px;
  --stroke-color:  var(--color-light-12);
  --text-fill-color: var(--color-light-1);
  --text-rendering: optimizeSpeed;
  --text-shadow: 0 0 1px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.4);

  /* Layout helpers */
  /*override by text-align: center;
  --p-width:      clamp(45ch, 50vw, 75ch);
  --heading-width:clamp(45ch, 50vw, 75ch);*/
  --p-width: 100%; 
  --heading-width:100%;

  /* Font Sizes https://www.fluid-type-scale.com/ https://clamp.font-size.app/
   * Initital value: 13px - 18px
								400px - 2560px
								Type scale ratio 1.2
  */
  --font-size-sub: clamp(1.3rem, 0.23vw + 1.21rem, 1.8rem);
  --font-size-p:   clamp(1.56rem, 0.28vw + 1.45rem, 2.16rem);
  --font-size-h6:  clamp(1.87rem, 0.33vw + 1.74rem, 2.59rem);
  --font-size-h5:  clamp(2.25rem, 0.40vw + 2.09rem, 3.11rem);
  --font-size-h4:  clamp(2.70rem, 0.48vw + 2.50rem, 3.73rem);
  --font-size-h3:  clamp(3.23rem, 0.58vw + 3.00rem, 4.48rem);
  --font-size-h2:  clamp(3.88rem, 0.69vw + 3.61rem, 5.37rem);
  --font-size-h1:  clamp(4.66rem, 0.83vw + 4.33rem, 6.45rem);
}
	
/* ──────────────────────────────────
   2.  CLEARINGS
   ────────────────────────────────── */
/* old approach .clear has changed to clearfix
 * Revise the code
*/ 
.clearfix::after{
  content:"";
  display:block;
  clear:both;
}  

/* new approach (modern) 
 * (preferred for WPO if you’ve moved to Flex/Grid)
 * .clear has changed to clearfix
 * Revise the code
*/ 

/* Clearfix utility for legacy floats */
/*.clearfix{ display:flow-root; }*/


/* ──────────────────────────────────
   3.  FONT FACE
   ────────────────────────────────── */

/* Example Futura Md BT Medium 
@font-face {
		font-family: 'Futura Md BT Medium';
		src: url('fonts/Futura Md BT Medium.woff2') format('woff2'),
					url('fonts/Futura Md BT Medium.woff') format('woff'),
					url('fonts/Futura Md BT Medium.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
}
*/

/* ─────────────────────────────────────────────
   4.  ELEMENTS  (html, body, universal box‑sizing)
   ───────────────────────────────────────────── */

/* ------------  HTML  ------------ */

html{
  box-sizing: border-box;
  /* 10‑px baseline: 16px × 62.5 % */
  font-size: 62.5%;

  scroll-behavior: smooth;

   /* ‑‑‑ lock horizontal scroll ‑‑‑ */
   overflow-x: hidden;

  /* OpenType prefs pulled from tokens (optional) */
  font-stretch: var(--font-stretch-normal, normal);
  font-kerning: var(--font-kerning, auto);
  font-weight:  var(--font-weight-regular, 400);
  font-variant-ligatures: var(--font-variant-ligatures-normal, normal);
  font-variant-caps:      var(--font-variant-caps-normal, normal);

  margin: 0; 
  padding: 0;
  writing-mode: var(--writing-mode, horizontal-tb);

  /* this 2 properties are standar but only work in firefox */
	scrollbar-color: 										var(--color-light-2);
	scrollbar-width: 										16px;

  /* Prevent mobile auto‑zoom */
 /* -webkit-text-size-adjust: none;
   -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
        text-size-adjust: none;*/
  text-size-adjust: none;        /* covers all vendor prefixes */
}

/* inherit box‑sizing to everything */
*,
*::before,
*::after{ 
  box-sizing: inherit; 
}

/* Styling the scrollbar !! not standard 
----------------------------------------- (Blink/WebKit only)  */
html::-webkit-scrollbar        { 
  width:18px; 
  height:18px; 
}
html::-webkit-scrollbar-track  { 
  background: linear-gradient(135deg,var(--color-light-1),var(--color-light-2));
 }
html::-webkit-scrollbar-thumb  {
  border-radius: 16px;
  background: var(--color-light-2);
  box-shadow:
      inset 3px 3px 1px -1px var(--color-light-1),
      inset -3px -3px 1px -1px var(--color-light-10);
}
/* If you don’t need custom scrollbars, comment out the three blocks above */

/* ------------  BODY  ------------ */
body{
  /* Use the fluid paragraph size token */
  font-size: var(--font-size-p, 1.6rem);
  line-height: var(--line-height-normal, 1.7);

  font-family: var(--font-family, system-ui,sans-serif);
  color:       var(--text-dark, #2f4858);
  background:  var(--color-light-1);

  /* Optional smoothing (WebKit / macOS) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  word-spacing: var(--word-spacing-regular, 0.3em);
  text-align:   var(--text-align);
  text-wrap:    var(--text-wrap);

  margin:0; 
  padding:0;
  
  /* ――― 2. (optional) block sideways “bounce” on touch devices ――― */
  overscroll-behavior-x: none;
}

/* Paragraphs
------------------------------------------------------------------------ */
p {
	margin: 														0 0 1.5em;
	max-width: 													var(--p-width); 
}

/* Links
------------------------------------------------------------------------ */
a {
	/* para poder aplicar transform convertimos a en inline */
	display: 														inline-block;
	vertical-align: 										baseline;
	color: 															var(--brand-color);
	font-weight: 												var(--font-weight-bold);
	text-decoration: 										none;
	overflow-wrap: 											break-word;
	word-wrap: 													break-word;
  text-wrap: pretty;
	/*-webkit-hyphens: 										auto;
	-ms-hyphens: 												auto;
	hyphens: 														auto;*/
	/*margin-block-end: 									0.2em;
	border-block-end: 									.1em solid currentColor;
	*/
	padding-inline: 										.3em;
	-webkit-transition: 								all .2s ease-in;
	-o-transition: 											all .2s ease-in;
	transition: 												all .2s ease-in;
	cursor: 														pointer;
}


/* Desactivamos after hasta mejora.
a::after {
	content:	 													"\276D";
	padding-inline: 										0.15em;
	font-size: 													1.3em;
	vertical-align: 										sub;
}	*/


a:hover,
a:focus {
	-webkit-transform: 								  scale(1.10);
	-ms-transform: 										  scale(1.10);
	transform: 												  scale(1.10);
	-webkit-transition: 								all .2s ease-in-out;
	-o-transition: 											all .2s ease-in-out;
	transition: 												all .2s ease-in-out;
}

/*
a:hover::after,
a:focus::after{
content: 															"";
}*/

#wpadminbar a.ab-item::after {
	content: 														"";
}

/*a img {
	margin-block-end: 									-.5em;
}*/

a svg{
	vertical-align: 									-webkit-baseline-middle;
	vertical-align:										middle;
}

/*a:link,
a:hover,
a:active,
a:visited{
	color: 														inherit;
}*/