age/* ************************************************************************** */
/*                                                                               */
/*                                                        :::      ::::::::      */
/*   style.css                                          :+:      :+:    :+:      */
/*                                                    +:+ +:+         +:+        */
/*   By: Ian Hupsetter <i.hupsetter@gmail.com>      +#+  +:+       +#+           */
/*                                                +#+#+#+#+#+   +#+              */
/*   Created: 2026/07/02 12:30:05 by Ian Hupsetter     #+#    #+#                */
/*   Updated: 2026/07/07 10:23:33 by Ian Hupsetter    ###   ########.fr          */
/*                                                                               */
/* ***************************************************************************** */

/* ================================================================================================================== */
/* !                                                    IMPORTS                                                       */
/* ================================================================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Anta&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Telex&display=swap');
@import url('/css/tootik.css');
/* # ------------------------------------------------- END IMPORTS -------------------------------------------------- */

/* ================================================================================================================== */
/* !                                             ROOT VARIABLES SECTION                                               */
/* ================================================================================================================== */
:root {
  /* Colors & Shadows */
  --primary-color: #022d4e;      	/*Deep blue*/
  --accent-color: #14b8a6;       	/* Bright teal */
  --dark-color: #000000;         	/* Slate dark */
  --light-bg: #b8b8b8;           	/* Slate 50 */
  --card-bg: #ffffff;
  --text-muted: #b9c3f9;
  --border-color: #e2e8f0;
  --shadow: 0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05);
  --shadow-hover: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  /* Lightbox Settings */
  --lb-overlay-bg: black;
  --lb-overlay-opacity: 0.8;
  --lb-container-bg: white;
  --lb-image-border-width: 4px;
  --lb-image-border-color: white;
  --lb-border-radius: 3px;
  --lb-text-color: #ccc;
  --lb-caption-link-color: #4ae;
  --lb-number-color: #999;
  --lb-nav-transition-speed: 0.6s;
  --lb-close-transition-speed: 0.2s;
}
/* # ----------------------------------------- END ROOT VARIABLES SECTION ------------------------------------------- */

/* #---------------------------------------------- LOADING OVERLAY GIF ---------------------------------------------- */
#overlay {
  position: fixed; /* Fix the loader to the viewport */
  top: 0; 
  left: 0;
  width: 100vw; /* Full viewport width */
  height: 100vh; /* Full viewport height */
  background-color: rgba(255, 255, 255, 0.3); /* Semi-transparent white background */
  display: flex; /* Use flexbox to center the GIF */
  justify-content: center; /* Horizontally center */
  align-items: center; /* Vertically center */
  z-index: 9999; /* Ensure loader is above all other content */
  transition: opacity 0.5s ease; /* Smooth fade-out effect */
	cursor: wait;
}

html {
  scrollbar-gutter: stable;
}

header div.container {
	z-index: 2;
}

/* Locally hosted font (TTF) */
@font-face {
    font-family: 'anta-regular';
    src: url('/fonts/Anta-Regular.ttf') format('truetype'); 
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: "Outfit"; /* set name */
  src: url(/fonts/Outfit-VariableFont_wght.ttf); /* url of the font */
}

/* ================================================================================================================== */
/* !                                               BASE VALUES SECTION                                                */
/* ================================================================================================================== */
body {
  font-family: 'Segoe UI', Roboto, sans-serif;
	font-weight: 500 !important;
	font-size: 1.2rem;
  background-color: var(--light-bg);
  color: var(--dark-color) !important;
  line-height: 1.7;
  text-align: justify;
}

h1, h2, h3, h4, h5 {
  font-family: 'anta-regular', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}

.anta-regular {
  font-family: 'anta-regular';
  font-weight: 400;
	font-size: 1.2rem;
  font-style: normal;
}

/* ? <weight>: Use a value from 100 to 700 */
/* ? <uniquifier>: Use a unique and descriptive class name */
.victor-mono {
  font-family: "Victor Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.outfit {
	font-family: "Outfit", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-size: .96rem;
	font-style: normal;
}

span.hl {
  color: orange;
}
/* # ------------------------------------------- END BASE VALUES SECTION -------------------------------------------- */

/* ================================================================================================================== */
/* !                                          FANCY CONTENT DIVIDER SECTION                                           */
/* ================================================================================================================== */
.divider {								/* minor cosmetics */
            display: table; 
            font-size: 24px; 
            text-align: center; 
            width: 85%; 						/* divider width */
            margin: 40px auto;					/* spacing above/below */
        }
.divider span { display: table-cell; position: relative; }
.divider span:first-child, .divider span:last-child {
    width: 50%;
    top: 20px;							/* adjust vertical align */
    -moz-background-size: 100% 2px; 	/* line width */
    background-size: 100% 2px; 			/* line width */
    background-position: 0 0, 0 100%;
    background-repeat: no-repeat;
}
.divider span:first-child {				/* color changes in here */
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(#000));
    background-image: -webkit-linear-gradient(180deg, transparent, #000);
    background-image: -moz-linear-gradient(180deg, transparent, #000);
    background-image: -o-linear-gradient(180deg, transparent, #000);
    background-image: linear-gradient(90deg, transparent, #000);
}
.divider span:nth-child(2) {
    color: var(--bs-yellow); padding: 0px 5px; width: auto; white-space: nowrap;
}
.divider span:last-child {				/* color changes in here */
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
    background-image: -webkit-linear-gradient(180deg, #000, transparent);
    background-image: -moz-linear-gradient(180deg, #000, transparent);
    background-image: -o-linear-gradient(180deg, #000, transparent);
    background-image: linear-gradient(90deg, #000, transparent);
}
/* # -------------------------------------- END FANCY CONTENT DIVIDER SECTION --------------------------------------- */

/* ================================================================================================================== */
/* !                                              BEGIN NAVBAR SECTION                                                */
/* ================================================================================================================== */
.navbar {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--border-color);
  transition: all 0.3s ease;
}

.navbar-brand {
  font-weight: 800;
  font-size: 1.5rem !important;
  color: #1a1e24 !important;
  letter-spacing: -0.02em;
}

.navbar-nav .nav-link {
	font-family: 'anta-regular', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  font-weight: 700 !important;
  color: #000000 !important;
  padding: 0.5rem 1rem !important;
  transition: color 0.2s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: #446e9b !important;
	/*background-color: #4e4e4e !important;*/
}

/*a.nav-brand {
	font-family: 'anta-regular', sans-serif;
	font-weight: 700;
	font-size: 1.5rem !important;
	color: #1a1e24 !important;
	letter-spacing: -0.02em;
}*/

span.site-title {
	font-family: 'anta-regular', sans-serif;
	font-weight: 700;
	font-size: 2.3rem !important;
	color: #1a1e24 !important;
	letter-spacing: -0.02em;
}
/* # --------------------------------------------- END NAVBAR SECTION ----------------------------------------------- */

/* ================================================================================================================== */
/* !                                                 NAVTABS SECTION                                                  */
/* ================================================================================================================== */
.nav-tabs .nav-item .nav-link {
  background-color: #d5d5d5;
  color: #959595;

}

.nav-tabs .nav-item .nav-link.active {
  background-color: var(--bs-secondary-bg);
  color: #15487d;
	border: 1px solid var(--bs-secondary-bg);
	font-weight: bold;
}

.tab-content {
  border: 1px solid #dee2e6;
  border-top: transparent;
  padding: 15px;
}

.tab-content .tab-pane {
  background-color: var(--bs-secondary-bg);
  font-size: .85rem;
  color: #3a5c81;
  min-height: 200px;
  height: auto;
}

/* # ----------------------------------------- BEGIN EZTAB CONTENT SECTION ------------------------------------------ */
#EzTabContent {
  padding: 30px;
  border-radius: 10px;
	border-top-left-radius: 0%;
  color: var(--bs-black);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: .95rem;
  font-weight: 200;
  background-color: var(--bs-secondary-bg);
}
/* # --------------------------------------------- END EZTAB CONTENT SECTION ---------------------------------------- */

.emphasis-text {
  padding: 30px;
  border-radius: 10px;
  color: var(--bs-black);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: .95rem;
  font-weight: 200;
  background-color: var(--bs-secondary-bg);
}
/* # --------------------------------------------- END NAVTABS SECTION ---------------------------------------------- */

/* ================================================================================================================== */
/* !                                           HERO / PAGE HEADER SECTION                                             */
/* ================================================================================================================== */
.page-hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 520px;
  position: relative;
  display: flex;
  align-items: center;
  color: white;
  margin-bottom: 2.5rem;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15, 23, 42, 0.75) 0%,
    rgba(15, 23, 42, 0.80) 70%,
    rgba(15, 23, 42, 0.95) 100%
  );
  z-index: 1;
}

.page-hero .container {
  position: relative;
  z-index: 2;
}

.page-hero h1 {
  font-size: 3rem;
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.page-hero .lead {
  font-size: 1.25rem;
  max-width: 620px;
  opacity: 0.95;
}
/* # --------------------------------------- END HERO / PAGE HEADER SECTION ----------------------------------------- */

/* ================================================================================================================== */
/* !                                              MAIN CONTENT SECTION                                                */
/* ================================================================================================================== */
.main-content {
  padding-bottom: 3rem;
}

.auth-intro {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14px;
  font-weight: lighter;
}

/* ! --------------------------------------------- BLOG HEADER STYLING ---------------------------------------------- */
.article-number {
	color: #999;
}


/* ! ------------------------------------------- BLOG POST CARDS SECTION -------------------------------------------- */
.post-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  height: 100%;
  box-shadow: var(--shadow);
}

.post-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}

.post-card .card-img-top {
  height: 180px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.post-card:hover .card-img-top {
  transform: scale(1.05);
}

.post-meta {
  font-size: 0.875rem;
  color: var(--dark-color);
}

.post-tags .badge {
  font-size: 0.75rem;
  padding: 0.35em 0.7em;
  font-weight: 500;
  background-color: #e0f2fe;
  color: #0369a1;
  margin-right: 0.35rem;
  margin-bottom: 0.35rem;
}

.post-excerpt {
  color: #1a1e24;
  display: -webkit-box;
  /* -webkit-line-clamp: 3; */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-title {
	color: #000000;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.text-emphasis {
  color: var(--primary-color);
}

.blog-list :not(:last-child) {
    margin-bottom: .70rem;
}

.note-panel {
  width: 85%;
  margin: auto;
  font-size: .85rem;
  padding: 1.5rem;
  line-height: 1.2rem;
  color: gray;
  background-color: lightgray;
  border-radius: .65rem;
  margin-bottom: 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  padding-bottom: .5rem;
}

.blog-sep {
	width: 80%;
	border: 1.5px solid #1c1923;
	margin: auto;
	margin-top: 2.5rem;
	margin-bottom: 2.5rem;
}

/* # ------------------------------------------- BLOG POST CARDS SECTION -------------------------------------------- */

/* ! ----------------------------------------- BLOG ARTICLE VIDEO SECTION ------------------------------------------- */
.blog-article-video {
  position: relative;
  height: auto;
  max-width: 100%;
  width: 100%;
  text-align: center;
}
/* # --------------------------------------- END BLOG ARTICLE VIDEO SECTION ----------------------------------------- */

.my-note {
  text-align: center;
  padding: 1.75rem;
  border: solid .2rem var(--accent-color);
  border-radius: 1.5rem;
  background-color: var(--bs-secondary-bg);
}

/* ! ----------------------------------------- BLOG TABLE SETTINGS SECTION ------------------------------------------ */
th {
  text-align: left;
	background-color: rgba(75, 85, 128, 0.5) !important;
	color: white !important;
}

th, td {
  /* border: 1px solid black; */
  /* border-style: solid; */
  padding: 10px;
}
/* # ----------------------------------------- END TABLE SETTINGS SECTION ------------------------------------------- */

#note-1 {
  font-size: .85rem;
}

.comm-panel {
  width: 85%;
  margin: auto;
  font-size: .85rem;
  padding: 1.5rem;
  line-height: .95rem;
  color: gray;
  background-color: lightgray;
  border-radius: .65rem;
  margin-bottom: 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  padding-bottom: .5rem;
}

/* ! ----------------------------------------- BLOCKQUOTE MAIN CSS SECTION ------------------------------------------ */
blockquote {
  border-left: 3px solid #446e9b;
  color: #446e9b;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: .94em; 
  font-style: italic;
  line-height: 1.8em;
  margin: 3.1em 2em;
  text-align: justify;
  padding: 1em 2em;
  position: relative;
  transition: .2s border ease-in-out;
  z-index: 0;
}

&:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -4px;
  height: 2em;
  background-color: white;
  width: 5px;
  margin-top: -1em
}

&:after { 
  content: "\f35f";
  position: absolute;
  top: 50%;
  left: -0.5em;
  color: var(--bs-primary-color);
  font-family: "Ionicons";
  font-style: normal;
  line-height: 1em;
  text-align: center;
  text-indent: -2px;
  width: 1em;
  margin-top: -0.5em;
  transition: .2s all ease-in-out, .4s transform ease-in-out;
}

&.format:before, &.format:after {
  display: none;
} 

cite {
  display: block;
  font-size: 0.75em;
  font-weight: bold;
  line-height: 1.8em;
  margin-top: 1em;
} 
/* # --------------------------------------- END BLOCKQUOTE MAIN CSS SECTION ---------------------------------------- */

/* ! ------------------------------------------ BLOCKQUOTE MEDIA QUERIES -------------------------------------------- */
@media (max-width: 1200px) { 
  body, html {
    font-size: 18px;
  }
}

@media (max-width: 980px) {
  body, html {
    font-size: 16px;
  } 

  .container {
    max-width: 720px;
    padding: 0 3em 3em;
  }

  blockquote {
      font-size: 1.1em;
      margin: 1.1em -2em;
  }
}

@media (max-width: 767px) {
  body, html {
    font-size: 16px;
  }
  .container {
    padding: 0 2em 3em;
  }

  blockquote {
    border-top: 2px solid var(--bs-primary-color);
    border-bottom: 2px solid var(--bs-primary-color);
    border-left: none;
    margin: 1.5em 0;
    padding: 1.5em 1em;
  }

  &:before {
    left: 50%;
    top: 0;
    height: 4px;
    margin-top: -3px;
    margin-left: -1em;
    width: 2em; 
  }

  &:after {
    font-size: 0.75em; 
    left: 50%;
    top: 0;
    margin-top: -0.5em;
    margin-left: -0.5em;
  }

  cite {
    text-align: right
  }
}
/* # ---------------------------------------- END BLOCKQUOTE MEDIA QUERIES ------------------------------------------ */

/* ! ----------------------------------------------- LIBRARY SECTION ------------------------------------------------ */
.book-cover {
  width: 100%;
}

/* ================================================================================================================== */
/* !                                             ASIDE / SIDEBAR SECTION                                              */
/* ================================================================================================================== */
.col-aside {
  /*overflow-y: scroll; */
  /*height: auto;*/
}

aside {
  /* position: sticky; */
  top: 2rem;
}

.aside-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.75rem;
  box-shadow: var(--shadow);
}

.aside-card h5 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark-color);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--primary-color);
}

.aside-card h5 i {
  color: var(--primary-color);
  margin-right: 0.5rem;
}
/* # ----------------------------------------- END ASIDE / SIDEBAR SECTION ------------------------------------------ */

/* ================================================================================================================== */
/* !                                               SEARCH BAR SECTION                                                 */
/* ================================================================================================================== */
#search-input {
	color: #000000;
  border-radius: 50px;
  padding-left: 1.25rem;
  padding-right: 1rem;
  border: 1px solid #334155;
  transition: all 0.2s ease;
}

#search-input:focus {
  border-color: #022d4e;
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.1);
}
/* # ------------------------------------------- END SEARCH BAR SECTION --------------------------------------------- */

/* ================================================================================================================== */
/* !                                                TAG CLOUD SECTION                                                 */
/* ================================================================================================================== */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag-pill {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  background-color: #f1e7ff;
  color: #6b21a8;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
}

.tag-pill:hover {
  background-color: #6b21a8;
  color: white;
  transform: translateY(-1px);
}

.tag-pill.active {
  background-color: var(--primary-color);
  color: white;
}
/* # -------------------------------------------- END TAG CLOUD SECTION --------------------------------------------- */

/* ================================================================================================================== */
/* !                                              ARCHIVE LINKS SECTION                                               */
/* ================================================================================================================== */
.archive-list a {
  display: block;
  padding: 0.4rem 0;
  color: #475569;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.archive-list a:hover {
	background-color: #94a3b8;
  color: var(--primary-color);
  padding-left: 0.25rem;
}
/* # ------------------------------------------ END ARCHIVE LINKS SECTION ------------------------------------------- */

/* ================================================================================================================== */
/* !                                               LATEST NEWS SECTION                                                */
/* ================================================================================================================== */
.latest-news-item {
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-color);
}

.latest-news-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.latest-news-item a {
  color: #6786b1;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.4;
}

.latest-news-item a:hover {
	border-bottom: #0063ed;
  color: #0063ed;
	font-style: italic;
}

.latest-news-item .news-date {
  font-size: 0.8rem;
  color: var(--text-muted);
}
/* # ------------------------------------------- END LATEST NEWS SECTION -------------------------------------------- */

/* ================================================================================================================== */
/* !                                                 LIBRARY SECTION                                                  */
/* ================================================================================================================== */
.resource-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.resource-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.resource-card .card-header {
  background-color: var(--primary-color);
  color: white;
  font-weight: 600;
}

.cover-center {
  position: relative;
  display: flex;
  justify-content: center;
}

.book-cover {
  height: 500px !important;
  max-height: 500px !important;
  width: auto !important;
  padding-top: 3rem !important;
}
/* # --------------------------------------------- END LIBRARY SECTION ---------------------------------------------- */

/* ================================================================================================================== */
/* !                                                 BUTTONS SECTION                                                  */
/* ================================================================================================================== */
.btn-primary {
  background-color: #004f8f;
  border-color: #004f8f;
}

.btn-primary:hover {
  background-color: #2e23ff;
  border-color: #2e23ff;
}

.btn-outline-primary {
  color: #334155;
  border-color: #334155;
}

.btn-outline-primary:hover {
  background-color: #94a3b8;
  color: white;
}
/* # --------------------------------------------- END BUTTONS SECTION ---------------------------------------------- */

/* ================================================================================================================== */
/* !                                               PAGE FOOTER SECTION                                                */
/* ================================================================================================================== */
footer {
  background-color: #334155;
  color: #94a3b8;
  padding: 3rem 0 2rem;
}

footer a {
  color: #cbd5e1;
  text-decoration: none;
}

footer a:hover {
  color: white;
}

/* ? ----------------------------------- GRADUATED BACKGROUND COLOR FOR FOOTERS ------------------------------------- */
.grad1 {
   background-color: #0000a5;
   /* For browsers that do not support gradients */
   background-image: linear-gradient(#175792, #001b4d);
   border-radius: 0.25rem;
   z-index: -1;
}

/* # ------------------------------------------- END PAGE FOOTER SECTION -------------------------------------------- */

/* ================================================================================================================== */
/* !                                                 UTILITY SECTION                                                  */
/* ================================================================================================================== */
.section-title {
  position: relative;
  display: inline-block;
  padding-bottom: 0.5rem;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 45%;
  height: 3px;
  background: linear-gradient(to right, var(--primary-color), var(--accent-color));
  border-radius: 3px;
}
/* # --------------------------------------------- END UTILITY SECTION ---------------------------------------------- */

/* ================================================================================================================== */
/* !                                            RESPONSIVE TWEAKS SECTION                                             */
/* ================================================================================================================== */
@media (max-width: 992px) {
  .page-hero {
    min-height: 320px;
  }
  
  .page-hero h1 {
    font-size: 2.35rem;
  }
  
  aside {
    position: static;
    margin-top: 2.5rem;
  }
}

/* @media (max-width: 576px) { */
  /* .post-card .card-img-top { */
    /* height: 160px; */
  /* } */
/* } */
/* # ---------------------------------------- END RESPONSIVE TWEAKS SECTION ----------------------------------------- */