/*
    global.css - Global Variables and Functions Across All biliscraft.co Pages
    Website iteration 1 : "¡Hola Mundo!" | v 1.5.0
	
	16.07.26 - img width in smaller screens;product class for product pages;creations/creasciones styles -wm
	17.06.26 - logotype sizing; -wm
	15.06.26 - contacts/social media footer grid; -wm
	14.06.26 - bili's portrait grandient bg;universal header h1 animation;footer styles; -wm
    13.06.26 - logo animation;href styles; -wm
    31.05.26 - product grid animation;accent color classes;apply animation to all images, apply to video;added yellow color for complete Colombian flag; -wm
    30.05.26 - grid in small screens;water is life image sizing;variables;highlight and text shadow; -wm
    29.05.26 - initialize variables; special-note;full viewport image style;letter and margin spacing styles;font tests;grid test for border radius; -wm
    28.05.26 - duplicate header for foundation page;foundation images and responsiveness; -wm
    27.05.26 - Headline styling and for smaller screen; -wm
    22.05.26 - doris classes for responsive image; all smaller float images;figure;margins on figures;figcaption color, style, position;li figure img style;product-grid and styles;special-note;section responsive margins;video gallery;doris widening;caption class; -wm
    18.05.26 - toggle 💠 bullets as inline for larger screens and ul style for smaller;hide/show toggle fix;centering issue;figure img box shadow; -wm
    17.05.26 - ul and .caption tests; global img radius;caption letter-spacing in small screen;h2 font-size in small screens -wm
    16.05.26 - file initialization;h1 small version for trademark mark;text-shadow for paisa emoji;smooth scrolling;margin-top adjustment for internal link spacing;figures;li margins;li img;li clear;ul small screen; -wm
*/

/* OFFICIAL COLOMBIAN FLAG COLORS

Yellow: rgb(252, 209, 22) — hex #FFCD00 (Pantone 116)
Blue: rgb(0, 56, 147) — hex #003893 (Pantone 287)
Red: rgb(206, 17, 38) — hex #CE1126 (Pantone 186)
*/

:root {
    --accent-color: dodgerblue;
	--accent-color-25: rgb(30,144,255,0.25);
    --accent-color-dark: navy; /* rgb(0, 0, 128) #000080 */
    --accent-color-maroon: maroon;
    --accent-color-red: crimson;
    --accent-color-yellow: rgb(255 223 0);
    --global-dark: #a0522d;
    --global-light: #fdf5e6;
    --shadow-color: brown;
    --highlight: rgb(255 255 255);
	/* COLOMBIAN FLAG COLOR ACCENTS */
	--co-flag-yellow: rgb(252 209 22);
	--co-flag-blue:   rgb(0 56 147);
	--co-flag-red:    rgb(206 17 38);
	/* 75% opacity variants */
	--co-flag-yellow-50: rgba(252,209,22,0.50);
	--co-flag-blue-75:   rgba(0,56,147,0.75);
	--co-flag-red-75:    rgba(206,17,38,0.75);
}

a:link, a:visited, .email {
	color: chocolate;
}
a:hover, a:active, .email:hover {
	color: orange;
}

/* adjust to match height of fixed menu */
article, section, h2 {
    scroll-margin-top: 100px;
}

body, html {
	background-color: var(--global-light);
    font-family: Arial, sans-serif;
	color: var(--global-dark);
    scroll-behavior: smooth;
}

figure img {
    width: 100%;
    box-shadow: 3px 5px 10px var(--shadow-color);
}

figcaption, .text-caption {
    font-size: 90%;
    font-style: italic;
    margin: 0.2em 0.2em auto;
}

/* Takes up remaining space to keep the text perfectly centered vertically */
footer {
	margin: 5em auto 10em;
	text-align: center;
	clear: both;
}

header, .header-2 {
	height: 100%;
	margin: 0;
	display: flex;
	flex-direction: column; /* Stack nav above container */
	flex: 1; 
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20px;
	/* Negative margin offsets the navbar height so text is mathematically dead-centered */
	margin-top: 5em; 
	margin-bottom: 5em;
}

header h1, .header-2 h1 {
    background-color: rgb(0 0 0 / 0.04);
    padding: 0.3em 0.8em;
    border-top: 2px solid rgb(255 255 255 / 0.9);
    border-right: 1px solid rgb(0 0 0 / 0.4);
    border-bottom: 1.5px solid rgb(0 0 0 / 0.5);
    border-left: 2px solid rgb(255 255 255 / 0.9);
    box-shadow: 2px 5px 1em var(--shadow-color);
	opacity: 0;
    animation: FadeIn 3s ease-in-out;
    opacity: 1;
	font-size: 7.5rem;
}

header p {
    text-shadow: -1px -1px var(--highlight);
}

h1 {
    font-size: 4rem;
	margin: 10px 0;
	font-weight: 800;
	letter-spacing: -1px;
	text-shadow: -2px -2px 3px white, 2px 2px 5px #999;
}

h1, h2, h3 {
	color: brown;
}

img, .video-container {
    border-radius: 30px;
    opacity: 0;
    transform: translateY(60px) scale(0.95);
    will-change: transform, opacity;
    animation: product-fly-up linear both;
    animation-timeline: view();
    animation-range: entry 25% contain 40%;
}

li {
  margin: 0 auto 0.5em;
  clear: left;
}

li figure {
    margin: 0;
    width: 100%;
}

li figure img {
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
    display:block;
    margin-top: 0;
}

mark {
	background-color: rgb(255 228 196 / 0.8);
	color: maroon;
}

/* Sticky Navigation Bar */
nav {
	position: sticky;
	top: 0;
	z-index: 1000;
	width: 100%;
	background-color: rgb(253 245 230 / 0.8);
	backdrop-filter: blur(8px);
	padding: 20px 0;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: maroon;
	box-sizing: border-box;
	text-align: center;
}

nav a {
	color: maroon;
	text-decoration: none;
	margin: 0 10px;
	transition: opacity 0.2s ease;
}

nav a:hover {
	opacity: 0.6;
}

section {
	margin: 0 0.5em 5em;
}

ul, ol {
  margin-left: 3px;   /* remove outer margin */
  padding-left: 0.5em;  /* remove default indentation */
}

.accent-color {
    color: var(--accent-color);
}

.accent-color-dark {
    color: var(--accent-color-dark);
}

.accent-color-maroon {
    color: var(--accent-color-maroon);
}

.accent-color-red {
    color: var(--accent-color-red);
}

.accent-color-yellow {
    color: var(--accent-color-yellow);
}

.align-center {
    text-align: center;
}

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

.align-right {
    text-align: right;
}

.alt-color {
    color: var(--accent-color);
}

.bullet-block {
  display: inline-block;
  text-align: left;
  line-height: 1.6;
}

/* header subtext with 💠 bullets: ul style in small screens, inline text in larger */
.bullet-specials {
    display: inline;
}

.caption {
    font-style: monospaced;
    text-align: center;
    letter-spacing: 10px;
    margin: 1em auto;
}

.center {
	text-align: center;
}

.flex-center {
  display: flex;
  justify-content: center;
  margin-bottom: 3em;
}

.clear-both {
    clear: both;
}

.clear-left {
    clear: left;
}

/* Container */
.contact-grid {
  display: grid;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 12px;
  /* Default: 2 columns (mobile-first) */
  grid-template-columns: repeat(2, minmax(48px, 1fr));
  max-width: 420px;
  margin: 0 auto;
}

/* Link reset and accessibility */
.contact-grid a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: transparent;
  border-radius: 8px;
  padding: 6px;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
  outline: none;
}

/* Focus for keyboard users */
.contact-grid a:focus {
  box-shadow: 0 0 0 3px rgba(21,156,228,0.25);
}

/* Hover/tap feedback */
.contact-grid a:hover,
.contact-grid a:active {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* Image sizing and object fit */
.contact-grid img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}

.creaciones {
	letter-spacing: 1.5em;
	font-size: 140%;
}

.creations {
	letter-spacing: 1.5em;
	font-size: 140%;
}

.doris {
    float: right;
    width: 25%;
    margin: 0 0 auto 15px;
}

.emoji-large {
    font-size: 2rem;
    margin-bottom: 0.5em;
}
]
.emoji-text-shadow {
    text-shadow: 1px 1px #555;
}

.float-left {
    float: left;
    margin: 0 15px 10px 0;
}

.float-right {
    float: right;
    margin: 0 0 10px 15px;
}

.float-left, .float-right {
    width: 30%;
}

.foundation-first-image {
    float: left;
    margin: 0 15px auto 0;
    width: 40%;
}

.foundation-second-image {
    float: right;
    margin: 0 auto auto 15px;
    width: 40%;
}

.header-2 {
    color: var(--accent-color);
}

.h1-trademark {
    font-size: 50%;
    color: rgb(166 43 43 / 0.4);
    text-shadow: none;
}

.hide-on-small-screens {
	display: inline;
}

.image-full-viewport {
    width: 100%;
    margin: 0 0 1em;
}

.larger-text {
	font-size: 110%;
	font-weight: 600;
}

.letter-spacing-1 {
    letter-spacing: 1px;
}

.letter-spacing-2 {
    letter-spacing: 2px;
}

.letter-spacing-3 {
    letter-spacing: 3px;
}

a.link-no-underline:link, 
a.link-no-underline:visited,
a.link-no-underline:hover,
a.link-no-underline:active {
	text-decoration: none;
}

.love {
    color: var(--accent-color-red);
}

.margin-bottom-1e {
    margin-bottom: 1em;
}

.margin-bottom-2e {
    margin-bottom: 2em;
}

.margin-bottom-3e {
    margin-bottom: 3em;
}

.margin-bottom-4e {
    margin-bottom: 4em;
}

.margin-top-1e {
    margin-top: 1em;
}

.margin-top-3e {
    margin-top: 3em;
}

.no-wrap {
	white-space: nowrap;
}

/* 🇨🇴  */
figure.portrait-bili {
	max-width: 50%;
	display: inline-block;
	position: relative;
	overflow: hidden;
	box-shadow: 3px 5px 10px var(--shadow-color);
	border-radius: 30px;
}

figure.portrait-bili img {
	display: block;
	height: auto;
	position: relative;
	z-index: 1;
  	background: linear-gradient(
		var(--co-flag-yellow-50) 0 50%,
    	var(--co-flag-blue) 50% 75%,
    	var(--co-flag-red) 75% 100%
	);
	top: -16%; /* tuned for your portrait; adjust as needed */
	box-shadow: none;
	border-radius: 30px 30px 0 0;
	/* fallback: runs everywhere */
	animation: product-fly-up 700ms ease both;
	/* modern timeline version (kept if supported) */
	animation-timeline: view();
	animation-range: entry 25% contain 40%;
}

.post {
    background-color: rgba(250 250 250 / 0.8);
    color: var(--accent-color);
    padding: 0.75em;
    border: 1px solid var(--accent-color);
    box-shadow: 2px 2px 5px rgb(50 50 50 / 0.25);
    letter-spacing: 1px;
    text-align: center;
}

.product-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  list-style: none;
  padding: 0;
  margin: 40px 0;
}

.product-grid li {
  flex: 1 1 calc(25% - 30px);
  max-width: calc(25% - 22.5px);
  min-width: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(0, 0, 0, 0.04);
  padding: 20px;
  gap: 15px;
}

.show-on-small-screens {
	display: none;
}

.small-screen-block-display {
    display: inline;
}

.small-print {
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 0;
	opacity: 0.7;
	color: maroon;
}

.special-note {
    margin-top: 40px;
    text-align: center;
    background-image: linear-gradient(rgb(255 255 255 / 0.45), rgb(255 255 255 / 0.45)), url('../media/images/assets/parque-arvi.jpg');
    background-size: cover;
    background-position: center;
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    min-height: 40vh;
    padding: 3em; 
}

.thrive {
	font-weight: bold;
	font-style: italic;
	letter-spacing: 3px;
}

.top-z-index {
    position: relative;
    z-index: 900;
}

/* base styles: default setup for small mobile screens (under 800px) */
.video-row {
	display: flex;
	flex-direction: column; /* forces stacking on phones */
	gap: 20px;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
}

.video-container {
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(0 0 0 / 0.1);
	
	/* added: forces the containers to maintain the same structural height */
	display: flex;
	flex-direction: column;
}

.video-container video {
	width: 100%;
	display: block;
	
	/* updated: forces identical heights without warping the video content */
	aspect-ratio: 9 / 16; /* change to 16 / 9 if your videos are horizontal widescreen */
	object-fit: cover;    /* clips the extra 30-50px cleanly so they match perfectly */
}

#product {
	text-align: center;
	width: 60%;
	margin: 3em auto 1em;
}

#spanish {
    color: var(--accent-color);            
    text-align: right;
}

#water-is-life div {
    background-color: rgb(255,255,153,0.5);
    margin-bottom: 3em;
    box-shadow: 5px 7px 20px 20px var(--accent-color-25);
    border: 2px solid var(--highlight);
}

#water-is-life h3 {
    letter-spacing: 4px;
    color: var(--accent-color-dark);
    text-shadow: -1px -1px var(--highlight);
    font-size: 150%;
    margin-bottom: 0.5em;
}

#water-is-life img {
    box-shadow: 5px 7px 20px 20px rgb(165,255,31,0.2), -5px -7px 20px 20px rgb(165,255,31,0.2);
    border: 2px solid var(--highlight);
}

/*PLACED HERE TO OVERRIDE ID STYLES*/
.water-back {
    padding: 0.6em 1em;
    background-color: rgb(253,246,231,1) !important;
    box-shadow: 2px 4px 5px grey !important;
    border: 1px solid var(--highlight) !important;
    position: relative;
    top: -20px;
    z-index: 0;
    font-style: italic;
    font-weight: 800;
}

/* Extra-large screens: keep icons compact and centered */
@media (min-width: 1024px) {
  .contact-grid {
    gap: 20px;
  }

  .contact-grid img {
    width: 72px;
    height: 72px;
  }
}

/* tablet and desktop styles (screens 800px and wider) */
@media (min-width: 800px) {
	.video-row {
		flex-direction: row; /* triggers side-by-side layout */
		justify-content: center;
		align-items: flex-start;
	}

	.video-container {
		/* 'flex: 1' is the secret sauce: it forces them to split the space 
		   50/50 and shrink fluidly below 600px to fit the ipad screen width */
		flex: 1; 
		margin: 0;
	}
}

@media (max-width: 600px) {    
    h2 {
        text-align: center;
    }

    figure {
        width: 50%;
    }
	
	h1 {
		font-size: 2.5rem;
	}

    h2 {
        font-size: auto;
    }

    header h1 {
		font-size: 3rem;
        box-shadow: 2px 5px 2em var(--shadow-color);
    }

    li figure {
        width: 100%;
        margin: 0;
    }

    li figure img {
        width: 100%;
        height: auto;
        aspect-ratio: 1/1;
        object-fit: cover;
        display: block;
        margin-top: 0;
    }

    li div {
        width: 100%;
    }

    section {
        margin: 0 0.25em 1em;
    }

    ul { 
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* header subtext with 💠 bullets: ul style in small screens, inline text in larger */
    .bullet-specials {
        display: block;
        margin: 2em auto auto;
    }

    .caption {
        letter-spacing: 5px;
    }

	.creaciones {
		letter-spacing: 1em;
		font-size: 130%;
	}
	
    .doris, .float-left, .float-right {
        width: 45%;
    }

    [class^="foundation-"] {
        width: 60%;
    }

	.hide-on-small-screens {
		display: none;
	}

    .margin-bottom-2e {
        margin-bottom: 1em;
    }

    .margin-bottom-3e {
        margin-bottom: 2em;
    }

    .margin-bottom-4e {
        margin-bottom: 1em;
    }

    .product-grid li {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
        padding: 15px;
        min-width: 350px;
    }

	.show-on-small-screens {
		display: inline;
	}

    .small-screen-block-display {
        display: block;
        margin: 0;
    }

    .special-note {
        margin-top: 20px;
    }

	.video-row {
		flex-direction: column; /* forces stacking on small screens */
		justify-content: center;
		align-items: center;
	}

	.video-container {
		flex: none; /* prevents stretching or clipping bugs on mobile */
		width: 100%;
		margin: 0 auto; /* keeps the stacked videos centered */
	}

    #water-is-life figure {
        width: 75%;
        margin: 0 auto 1.5em;
    }

    #water-is-life.special-note {
        padding: 3em 1em;
    }

}

/* Larger screens: 4 columns in a row */
@media (min-width: 640px) {
  .contact-grid {
    grid-template-columns: repeat(4, minmax(56px, 1fr));
    gap: 16px;
    max-width: 720px;
  }

  .contact-grid img {
    width: 64px;
    height: 64px;
  }
}

@media (max-width:420px){
  figure.float-left { width: 220px; }
  figure.float-left img { top: -12%; }
}