/* =========================================================
	2026 - elitetexas.org
   ========================================================= */

/* ----- root ----- */
:root {
  
  --type-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --fancy-font: "neue-kabel", sans-serif;
  --fs-base: 16px;
  
  --max-width:1100px;
  --content-max: 1100px;        
  --nav-height:64px;

  --gap: 1rem;
  --gutter: 1rem;
  --img-size: 150px; /* on wide screens */
  --txt-gap: 1rem;
  --radius: 8px;

  --bg:#ffffff;
  --surface:#ffffff;  
  --accent:#0b5cff;
  --muted:#666;
  --border: #eee; 
  --shadow:0 6px 18px rgba(0,0,0,0.06);  

	--purp: #3b0e45;
	--red: #b21e3b;
	--oran: #cb5727;
	--oran2: #BF5828;
	--green: #3c763b;
	--blue: #1d59a8;
	--white: #ffffff;
	
	  /* gradient behavior *//*
	--fade-right: linear-gradient(
		90deg,
		var(--fade-color) 0%,
		transparent 100%
	)*/
	

	--about-faded: linear-gradient(90deg, rgba(59, 14, 69, 1) 0%, rgba(255, 255, 255, 1) 100%);
	--projects-faded: linear-gradient(90deg,rgba(178, 30, 59, 1) 0%, rgba(255, 255, 255, 1) 100%);
	--mtss-faded: linear-gradient(90deg,rgba(203, 87, 39, 1) 0%, rgba(255, 255, 255, 1) 100%);
	--tt-faded: linear-gradient(90deg,rgba(60, 118, 59, 1) 0%, rgba(255, 255, 255, 1) 100%);
	--pro-faded: linear-gradient(90deg,rgba(29, 89, 168, 1) 0%, rgba(255, 255, 255, 1) 100%);
}



/* ----- base reset ----- */
* { box-sizing: border-box; }
html, body { height:100%; }

body {
  margin:0;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans";
  font-size: var(--fs-base);
  color: #111111;
  line-height:1.45;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
a:visited { color: #000000; }
*/

header {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

main {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}


/*------------------------------------------------TEXT-----------------------------*/

h1 {
font-family: var(--fancy-font);
font-weight: 300;
font-style: normal;
}


/* ----- layout wrappers ----- */
.wrap { 
max-width:var(--max-width);
margin:0 auto;
padding: 1rem;
border: 0px solid #759a9c;
}

.hdr-wrap { 
max-width:var(--max-width);
margin: 0 auto;
padding: .2rem .5em;
border: 0px solid #759a9c;
}

/*
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
*/
.container{ max-width:var(--max-width); margin:0 auto; padding:0 1rem; }


/* --------------------------------------------------------------- content ----- */

/* ---------------------------------------------------------
   Global Image Rules — minimal, semantic, and stable
   --------------------------------------------------------- */
img {
  max-width: 100%;      /* allows responsive downscaling */
  height: auto;         /* preserves aspect ratio */
  display: block;       /* removes inline whitespace gaps */
  border: 0;            /* neutralizes default link border in old browsers */
  vertical-align: middle;
}

img.centered {
  margin-left: auto;
  margin-right: auto;
}

figure {
  margin: 0;
}

figcaption {
  font-size: 0.9rem;
  color: #666;
  text-align: center;
  margin-top: 0.5em;
}

/* ---------------------------------------------------------
   color patterns
   --------------------------------------------------------- */

/*---------nav----------*/

.nav-about:hover { 
background: var(--purp);
color: #ffffff;
}
.nav-projects:hover { 
background: var(--red);
color: #ffffff;
}
.submenu .nav-mtss:hover { 
background: var(--oran);
color: #ffffff;
}
.submenu .nav-tt:hover { 
background: var(--green);
color: #ffffff;
}
.nav-pro:hover { 
background: var(--blue);
color: #ffffff;
}


/*---bg----*/

.about { 
background: var(--purp);
color: #ffffff;
}
.projects { 
background: var(--red);
color: #ffffff;
}
.mtss { 
background: var(--oran);
color: #ffffff;
}
.tt { 
background: var(--green);
color: #ffffff;
}
.pro { 
background: var(--blue);
color: #ffffff;
}

/*---banners----*/

.about-fade { background: var(--about-faded); }
.projects-fade { background: var(--projects-faded); }
.mtss-fade { background: var(--mtss-faded); }
.tt-fade { background: var(--tt-faded); }
.pro-fade { background: var(--pro-faded); }

/*----TEXT----*/
.purp { 
color: var(--purp);
}
.red { 
color: var(--red);
}
.oran { 
color: var(--oran);
}
.green { 
color: var(--green);
}
.blue { 
color: var(--blue);
}


/*--------------borders-----------------*/

.bord-purp { 
border: 3px solid var(--purp);
}
.bord-red { 
border: 3px solid var(--red);
}
.bord-oran { 
border: 3px solid var(--oran);
}
.bord-green { 
border: 3px solid var(--green);
}
.bord-blue { 
border: 3px solid var(--blue);
}


/*
.faded {
  background-image: var(--fade-right);
}
.u-fade-purp  { --fade-color: var(--purp); }
.u-fade-red   { --fade-color: var(--red); }
.u-fade-oran  { --fade-color: var(--oran); }
.u-fade-green { --fade-color: var(--green); }
.u-fade-blue  { --fade-color: var(--blue); }
*/



.white { color: #ffffff; }
.black { color: #000000; }
.grey { color: #dddccc; } 


/*--------------------------------------------------------------------home-------- */

/*----main-h1----*/
.hero-title {
	padding-left: 20px;
}

.hero { }



.hero-text {
	font-weight: normal;
	font-size: 18px;
}




h1#hero-title {}

.hero-txt {}
.hero-tile {}
.hero-tile-img {}
.hero-tile-txt {}
.hero-tile-sub-txt {}

.padded { 
	padding: 20px;
	border: 0px solid #ffff00;
}

.lede{ color:var(--muted); font-size:1.125rem; }

/*
.resource-grid{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
}
*/
.resource img{ width:100%; height:auto; display:block; border-radius:6px; }

/*
.resource h3{ font-size:1rem; margin:.5rem 0 0; }
*/

/* ----------------------------
   Resource Card Pattern
   ---------------------------- */
/*
.resource-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap);
}*/

/* ----------------------------
   Resource Card Pattern
   ---------------------------- */
.resource-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  justify-content: center;
}

/* each resource is an accessible card */
.resource {
  list-style: none;
}

/* the interactive surface — keep it a link if the card is clickable */
.resource-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding:.75rem;
  box-shadow: none;
  transition: transform.16s ease, box-shadow.16s ease, border-color.16s ease;
  position: relative;
  overflow: hidden;
  /* Fixed height for consistency */
  height: 100%;
  min-height: 320px; /* Adjust this value as needed */
}

/* subtle lift for hover / keyboard focus */
.resource-card:hover, .resource-card:focus {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: rgba(11,92,255,0.08);
  outline: none;
}

/* accessible focus ring */
.resource-card:focus-visible {
  box-shadow: 0 8px 28px rgba(11,92,255,0.10);
  border-color: var(--accent);
  outline: 3px solid rgba(11,92,255,0.10);
  outline-offset: 3px;
}

/* image frame — consistent aspect and cover behavior */
.resource-figure {
  margin: 0 0.5rem 0;
  border-radius: calc(var(--radius) - 2px);
  overflow: hidden;
  flex-shrink: 0; /* Prevent image from shrinking */
}

/* force a consistent tile aspect ratio for visual rhythm */
.resource-figure img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 4px;
}

/*------------TITLE + META-----------*/
.resource-title {
  font-family: var(--fancy-font);
  font-weight: 300;
  font-size: 1.5rem;
  margin: 0;
  line-height: 1.2;
  color: #ffffff;
  /* Text overflow handling */
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Limit to 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 10px 0 0 0;
}

/* optional short description */
.resource-desc {
  margin:.35rem 0 0;
  color: #dddddd;
  font-size:.95rem;
  /* Text overflow handling for description too */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Limit to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* small utility for multiple links inside card */
.resource-actions {
  margin-top: auto; /* Push to bottom */
  display: flex;
  gap:.5rem;
  align-items: center;
}

/* make action links look like text buttons */
.resource-actions a {
  text-decoration: none;
  font-weight: 600;
  font-size:.9rem;
  padding:.25rem.45rem;
  border-radius: 6px;
}.resource-actions a:hover,.resource-actions a:focus { 
  background: rgba(11,92,255,0.06); 
}

/* ----------------------------
   ONE-OFF CLASS: Standalone Card
   ---------------------------- */

/* Use this class on the parent <li> or <ul> when you have a single card */
.resource-standalone {
  max-width: 400px; /* Prevents single card from becoming huge */
  margin-left: auto;
  margin-right: auto;
}

/* Alternative: apply to the grid itself */
.resource-grid.single-item {
  grid-template-columns: repeat(auto-fit, minmax(220px, 400px));
}

/* responsive tweaks */
@media (max-width: 480px) {.resource-card { 
    padding:.6rem;
    min-height: 280px; /* Slightly shorter on mobile */
  }.resource-figure img { 
    aspect-ratio: 3 / 2; 
  }.resource-title {
    font-size: 1.25rem;
  }.resource-standalone {
    max-width: 100%; /* Full width on mobile */
  }
}


/*--BIOS--*/
*,
*::before,
*::after { box-sizing: border-box; }

#bios {
  background: var(--bg);
  font-family: var(--type-family);
  color: #111;
  padding: calc(var(--gutter) * 1.25);
}

/* outer flex that holds all pairs */
#bios .flex {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;          /* pairs are sequential siblings: image then text */
  gap: calc(var(--gutter) * 1.25);
  align-items: start;
}

/* image column (flex-1) and text column (flex-3) sizes on mobile default to full width */
#bios .flex-1,
#bios .flex-3{
  width: 100%;
}

/* image styles */
#bios .flex-1 {
  display: flex;
  justify-content: center;
  align-items: center;
}
#bios .flex-1 img{
  /*display: block;*/
  width: min(60%, var(--img-size));
  max-width: var(--img-size);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  /*border: 2px solid rgba(0,0,0,0.06);*/
}

/* bio text */
#bios .bio-text {
  padding: 0.25rem 0.5rem;
}
#bios .bio-text h3{
  margin: 0 0 0.35rem 0;
  font-size: 1.05rem;
  line-height: 1.15;
  font-weight: 700;
}
#bios .bio-text p{
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 0.96rem;
}

/* Desktop layout: pair image (25%) + text (75%) on the same row */
@media (min-width: 760px) {
  #bios .flex-1 { width: 22%; }   /* image column */
  #bios .flex-3 { width: 74%; }   /* text column */
  #bios .flex { gap: 1.25rem 2rem; } /* slightly larger horizontal spacing */

  /* visually align image and text vertically in each pair */
  #bios .flex-1,
  #bios .flex-3 {
    align-self: flex-start;
  }

  /* tighten text container and add comfortable left padding */
  #bios .bio-text {
    padding-left: 0.5rem;
  }

  /* slightly larger type for readability */
  #bios .bio-text p { font-size: 1rem; }
}

/* Optional small polish: when images are missing, keep layout neat */
#bios .flex-1 img[alt=""],
#bios .flex-1 img[src="#"]{
  background: rgba(0,0,0,0.03);
  border-radius: var(--radius);
  border: 1px dashed rgba(0,0,0,0.04);
}

/* utility (if you want subtle separators between rows) */
#bios .flex-3 + .flex-1 {
  /* nothing — pairs are sequential. If you ever wrap each pair in a row wrapper,
     use a border-bottom here for separation. */
	 /*border-bottom: 1px solid #eee;*/
}

.bio-flex { 
border: 3px solid var(--purp);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.bio-flex:hover { 
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transform: translateY(-7px);
/*box-shadow: var(--shadow);*/
border-color: var(--white);
}

/* ----------------------------
   FOOTER
   ---------------------------- */

/* footer */
.site-footer {
	border-top: 1px solid var(--border);
	padding: 0.5rem 0;              /* reduce “buffering” */
	color: var(--muted);
	font-size: 0.95rem;
	text-align: center;
}

.site-footer .wrap {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;                  /* tight, intentional spacing */
}

.site-footer p {
	margin: 0;                     /* kill default paragraph gaps */
	line-height: 1.3;              /* reduce leading */
}

.site-footer a {
	color: inherit;
	text-decoration: underline;
}

/* Creative Commons image */
.site-footer img {
	display: block;
	margin: 0.25rem auto;          /* subtle breathing room */
}



/* Reorder the CC badge visually *//*
.site-footer p:nth-of-type(3) {
	order: 2;                     
}
.site-footer p:nth-of-type(2) {
	order: 3;                     
}*/


/* ----------------------------
   UTILITIES
   ---------------------------- */


.flexin { display: flex; }
.flexin-1 { flex: 1; }
.flexin-2 { flex: 2; }
.flexin-3 { flex: 3; }
.flexin-4 { flex: 4; }

.halfer { width: 50%; }

.testo {
	font-style: italic;
	font-size: 1.1rem;
}
.centered {
	margin: 0 auto;
	text-align: center;
}

.rounder {
	border-radius: var(--radius);
}

p.inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

.video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;
}

.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/*-----UTILITIES----*/



/* small screens tweak 
@media (max-width:480px){
  .logo img{ max-height:36px; }
  .wrap{ padding:0.75rem; }
  .hero{ padding:1.25rem 0; }
}*/


/*
.smooth-pdf {
  background-color: transparent;
  -webkit-transition: background-color 0.5s ease;
  transition: background-color 0.5s ease;
}
.smooth-pdf a {
  color: #000000;
  -webkit-transition: color 0.5s ease;
  transition: color 0.5s ease;
}

.smooth-pdf:hover {
  border: 1px solid #197EA3;
  background-color: #197EA3;
}
.smooth-pdf:hover a {
  color: #ffffff;
  font-weight: bold;
}
*/


/*---------------------------------------------------------------------------------------*/
@media screen and (max-width: 1180px) {
 
  .tube {
    height: 315px;
    width: 560px;
  }
}
@media screen and (max-width: 960px) {

}
@media screen and (max-width: 874px) {

}
@media screen and (max-width: 730px) {
	.flexin {
		display: inline;
	}
}
@media screen and (max-width: 690px) {

}
@media screen and (max-width: 568px) {

  .tube {
    height: 253px;
    width: 450px;
  }
}
@media screen and (max-width: 500px) {

  .tube {
    height: 169px;
    width: 300px;
  }
}
@media screen and (max-width: 375px) {

  .tube {
    height: 169px;
    width: 300px;
  }
}