/*-----------------------------------*\
  #style.css
\*-----------------------------------*/

/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {

  /**
   * colors
   */

  --white: hsla(0, 0%, 100%, 1);
  --white_a8: hsla(0, 0%, 100%, 0.08);
  --white_a12: hsla(0, 0%, 100%, 0.12);
  --cultured: hsla(220, 20%, 97%, 1);
  --snow: hsla(345, 57%, 97%, 1);
  --manatee: hsla(219, 10%, 62%, 1);
  --black-coral: hsla(220, 12%, 43%, 1);
  --cadet-blue-crayola_a20: hsla(222, 23%, 71%, 0.2);
  --cinnamon-satin: hsla(344, 53%, 62%, 1);
  --raisin-black: hsla(216, 14%, 14%, 1);
  --raisin-black_a6: hsla(216, 14%, 14%, 0.06);
  --gunmetal: hsla(214, 15%, 21%, 1);
  --charcoal: hsla(219, 22%, 26%, 1);

  /**
   * typography
   */

  --ff-manrope: 'Manrope', sans-serif;

  --fs-1: calc(2.7rem + 1.38vw);
  --fs-2: calc(2.6rem + .66vw);
  --fs-3: calc(2.6rem + .24vw);
  --fs-4: 1.9rem;
  --fs-5: 1.8rem;
  --fs-6: 1.7rem;
  --fs-7: 1.5rem;
  --fs-8: 1.4rem;
  --fs-9: 1.3rem;
  --fs-10: 1.2rem;
  
  --fw-700: 700;

  /**
   * spacing
   */

  --section-padding: 90px;

  /**
   * box shadow
   */

  --shadow-1: 0 0 20px hsla(216, 14%, 14%, 0.05);
  --shadow-2: 0 4px 28px hsla(216, 14%, 14%, 0.07);

  /**
   * border radius
   */

  --radius-circle: 50%;
  --radius-pill: 100px;
  --radius-universal: 50px;
  --radius-8: 8px;
  --radius-6: 6px;

  /**
   * transition
   */

  --transition-1: 0.25s ease;
  --transition-2: 0.5s ease;
  --transition-3: 0.3s ease-in-out;

  /**
   * status colors (shared across components)
   */

  --status-success: #27ae60;
  --status-success-light: #d4edda;
  --status-success-text: #155724;
  --status-warning: #e67e22;
  --status-warning-light: #fff3cd;
  --status-warning-text: #856404;
  --status-error: #e74c3c;
  --status-error-light: #f8d7da;
  --status-error-text: #721c24;
  --status-info: #3498db;
  --status-info-light: #e3f2fd;
  --status-info-text: #0c5460;
}

/*-----------------------------------*\
  #RESET
\*-----------------------------------*/

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Images are block by default: inline replaced elements sit on the text
   baseline and leave a ~4px gap under logos/heroes/cards. This is deliberate
   (Tailwind-style). The old copy-pasted a/span/button/ion-icon block reset
   was removed — those elements use browser defaults now. */
img { display: block; }

a {
  color: inherit;
  text-decoration: none;
}

img { height: auto; }

input,
button,
textarea {
  background: none;
  border: none;
  font: inherit;
}

input,
textarea { width: 100%; }

button { cursor: pointer; }

ion-icon { pointer-events: none; }

html {
  font-family: var(--ff-manrope);
  font-size: 10px;
  scroll-behavior: smooth;
}

body {
  background-color: var(--white);
  color: var(--black-coral);
  font-size: 1.6rem;
  line-height: 1.7;
}

body.nav-active { overflow: hidden; }

::-webkit-scrollbar { width: 10px; }

::-webkit-scrollbar-track { background-color: hsl(0, 0%, 98%); }

::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); }

::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); }

/*-----------------------------------*\
  #Custom Universal
\*-----------------------------------*/

/* Custom class to remove margin and padding */
p.no-spacing,
a.no-spacing {
  margin: 0;
  padding: 0;
}

/*Bring it back to default li*/
.my_li {
  list-style: outside disc;
}

.my_bold {
  font-weight: bold;
}

.sort-arrow {
  font-size: 0.7em;
  display: inline-block;
  margin-left: 4px;
  vertical-align: middle;
}

.inline-elements {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;  
  align-items: flex-start; /* Align items at the top */
  gap: 2px; /* Add spacing between elements */
}

.inline-elements button {
  margin-left: 10px; /* Add some spacing between the text and the button */
}

.inline-element {
  flex: 1;
  max-width: 20%;
  /* margin-right: 10px; Add some spacing between the elements */
}

/* Ensure select elements take up the full width of their container*/
.inline-element select {
  width: 80%; 
}

/* Filter rows layout */
.filter-rows {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-row label {
  min-width: 60px;
  font-weight: 500;
}

/* Filter toggle buttons - used for gender/option filters */
.filter-toggle-group {
  display: inline-flex;
  gap: 0;
}

/* Wrapping variant for division filter with potentially long names */
.filter-toggle-wrap {
  flex-wrap: wrap;
  gap: 0.25rem;
}

.filter-toggle-wrap .filter-toggle-btn {
  border-radius: var(--radius-6);
  border: 1px solid var(--cadet-blue-crayola_a20);
}

.filter-toggle-btn {
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--cadet-blue-crayola_a20);
  background: white;
  color: var(--manatee);
  font-size: var(--fs-6);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-toggle-group:not(.filter-toggle-wrap) .filter-toggle-btn:first-child {
  border-radius: var(--radius-6) 0 0 var(--radius-6);
}

.filter-toggle-group:not(.filter-toggle-wrap) .filter-toggle-btn:last-child {
  border-radius: 0 var(--radius-6) var(--radius-6) 0;
}

.filter-toggle-group:not(.filter-toggle-wrap) .filter-toggle-btn:not(:first-child) {
  border-left: none;
}

.filter-toggle-btn:hover:not(.active) {
  background: var(--cadet-blue-crayola_a20);
}

.filter-toggle-btn.active {
  background: var(--cinnamon-satin);
  border-color: var(--cinnamon-satin);
  color: white;
  font-weight: 600;
}

/* Anchor tags styled as filter toggle buttons */
a.filter-toggle-btn {
  text-decoration: none;
}

a.filter-toggle-btn:hover:not(.active) {
  color: var(--manatee);
}

.custom-ul {
  list-style: decimal; /* Set default numbering */
  padding-left: 40px; /* Apply default padding */
}

/*inline and with links underlined*/
.custom-inline {
  display: inline;
  text-decoration: underline;
}

.custom-textarea {
  border: 1px solid var(--cinnamon-satin);
}

.inline-container {
  display: flex;
  align-items: center; /* Vertically align items */
  margin-bottom: 10px; /* Optional: Add some spacing between rows */
}

.inline-container label {
  margin-right: 10px; /*Add spacing between label and input */
  white-space: nowrap; /* Prevent text from wrapping */
}

.inline-container input {
  height: auto;
  width: 30%; /* Adjust the width of the screen */
  font-size: var(--fs-8);
}

.shaded_background {
  background-color: var(--snow);
}

.width_80 {
  width: 80%;
}

/*to ensure that the anchor target on blog doesn't get hidden under the header*/
.anchor-target {
  padding-top: 80px; /* Adjust the value based on your header height */
  margin-top: -80px; /* Create a negative margin to maintain layout */
}

.blog-post {
  /* Each post is a block-level card: used on <a> wrappers, so block keeps
     the full-width separator border and the .anchor-target offset working. */
  display: block;

  /* Use a bottom border to create a separation line */
  border-bottom: 2px solid var(--cadet-blue-crayola_a20);

  /* Add padding to create space between border and content */
  padding-bottom: 40px;
}

/*Add some space after the published date for a blog*/
.pub-info {
  margin-bottom: 10px;
}

.recaptcha {
  margin-top: 10px;
  margin-bottom: 10px;
}

.error-message{
  color: red;
  font-size: var(--fs-4);
  margin-top: 5px;
  margin-bottom: 5px;
}

.schedule-table{
  table-layout: fixed;
  border: 1px solid var(--charcoal);
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid var(--charcoal);
  text-align: center;
  font-weight: normal;
  font-size: small;
  }

/*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/

.container { padding-inline: 16px; }

.section { padding-block: var(--section-padding); }

.w-100 { width: 100%; }

.h1,
.h2,
.h3,
.h4 {
  color: var(--charcoal);
  line-height: 1.3;
}

.h1 { font-size: var(--fs-1); }
.h2 { font-size: var(--fs-2); }
.h3 { font-size: var(--fs-3); }
.h4 { font-size: var(--fs-4); }

.contract-text { font-size: var(--fs-7); }

.btn {
  /* Anchors-as-buttons need a box (padding height, hover transform). */
  display: inline-block;
  color: var(--cinnamon-satin);
  font-size: var(--fs-6);
  font-weight: var(--fw-700);
  border: 2px solid var(--cinnamon-satin);
  max-width: max-content;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  transition: var(--transition-1);
  will-change: transform;
}

.btn-smaller {
  /* Anchors-as-buttons need a box (vertical margins, hover transform). */
  display: inline-block;
  color: var(--cinnamon-satin);
  font-size: var(--fs-7);
  font-weight: var(--fw-700);
  border: 1px solid var(--cinnamon-satin); /* Reduced border thickness */
  padding: 4px 8px; /* Smaller padding */
  border-radius: var(--radius-universal);
  transition: var(--transition-1);
  will-change: transform;
  margin-top: 15px;
  margin-bottom: 15px;
}

.full-width-btn { width: 100%; }

.btn:is(:hover, :focus-visible) { transform: translateY(-4px); }

.btn-primary,
.btn-secondary:is(:hover, :focus-visible) {
  background-color: var(--cinnamon-satin);
  color: var(--white);
}

.section-text { font-size: var(--fs-5); }

.section-title { margin-block-end: 16px; }

.grid-list {
  display: grid;
  gap: 30px;
  list-style: none;
}

[data-reveal] {
  opacity: 0;
  transition: 0.75s ease;
}

[data-reveal="top"] { transform: translateY(-30px); }
[data-reveal="bottom"] { transform: translateY(30px); }
[data-reveal="left"] { transform: translateX(-30px); }
[data-reveal="right"] { transform: translateX(30px); }

[data-reveal].revealed {
  transform: translate(0);
  opacity: 1;
}

/*-----------------------------------*\
  #COMMON COMPONENTS
  Reusable classes for consistency across all modules.
  Module-specific CSS should extend these with prefixed classes.
\*-----------------------------------*/

/* ---- Status Badges ---- */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: var(--fs-10);
  font-weight: 600;
  border-radius: var(--radius-pill);
}

.status-badge-success {
  background: var(--status-success-light);
  color: var(--status-success-text);
}

.status-badge-warning {
  background: var(--status-warning-light);
  color: var(--status-warning-text);
}

.status-badge-error {
  background: var(--status-error-light);
  color: var(--status-error-text);
}

.status-badge-info {
  background: var(--status-info-light);
  color: var(--status-info-text);
}

/* ---- Alert Messages ---- */
.alert-message {
  padding: 12px 20px;
  border-radius: var(--radius-6);
  margin-bottom: 16px;
  font-weight: 500;
  font-size: var(--fs-8);
}

.alert-message-success {
  background: var(--status-success-light);
  color: var(--status-success-text);
  border: 1px solid #c3e6cb;
}

.alert-message-warning {
  background: var(--status-warning-light);
  color: var(--status-warning-text);
  border: 1px solid #ffeeba;
}

.alert-message-error {
  background: var(--status-error-light);
  color: var(--status-error-text);
  border: 1px solid #f5c6cb;
}

.alert-message-info {
  background: var(--status-info-light);
  color: var(--status-info-text);
  border: 1px solid #b8daff;
}

/* ---- Toast Notifications ---- */
/* Fixed-position overlay toasts that don't push content around */
.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  border-radius: var(--radius-6);
  font-weight: 600;
  font-size: var(--fs-8);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  border: 1px solid;
  max-width: 80%;
  text-align: center;
}

/* Several toasts live at once (admin console): a queued task's result can land
   while an earlier error is still on screen, and one overwriting the other loses
   the error. The stack owns the fixed positioning so the individual .toast rules
   above stay exactly as the single-toast pages use them. */
.toast-stack {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 80%;
}

.toast-stack .toast {
  position: static;
  transform: none;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}

.toast-dismiss {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: var(--fs-8);
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
}

.toast-dismiss:hover {
  opacity: 1;
}

.toast-success {
  background: var(--status-success-light);
  color: var(--status-success-text);
  border-color: #c3e6cb;
}

.toast-error {
  background: var(--status-error-light);
  color: var(--status-error-text);
  border-color: #f5c6cb;
}

.toast-info {
  background: var(--status-info-light);
  color: var(--status-info-text);
  border-color: #b8daff;
}

.toast-warning {
  background: var(--status-warning-light);
  color: var(--status-warning-text);
  border-color: #ffeeba;
}

/* ---- Cards ---- */
.card {
  background: var(--white);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-1);
  transition: var(--transition-1);
}

.card:hover {
  box-shadow: var(--shadow-2);
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--cadet-blue-crayola_a20);
  font-weight: var(--fw-700);
  color: var(--charcoal);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-body {
  padding: 20px;
}

/* ---- Form Inputs ---- */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: var(--fs-8);
  font-family: var(--ff-manrope);
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid var(--cadet-blue-crayola_a20);
  border-radius: var(--radius-6);
  transition: var(--transition-1);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--cinnamon-satin);
  box-shadow: 0 0 0 3px hsla(344, 53%, 62%, 0.15);
}

.form-input::placeholder {
  color: var(--manatee);
}

.form-label {
  display: block;
  font-size: var(--fs-9);
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 6px;
}

.form-group {
  margin-bottom: 16px;
}

/* ---- Base Table ---- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-8);
}

.data-table th {
  text-align: left;
  padding: 12px;
  background: var(--cultured);
  font-weight: 600;
  color: var(--charcoal);
  border-bottom: 2px solid var(--cadet-blue-crayola_a20);
}

.data-table td {
  padding: 12px;
  border-bottom: 1px solid var(--cadet-blue-crayola_a20);
  color: var(--black-coral);
}

.data-table tr:hover td {
  background: var(--snow);
}

/* ---- Modal Base ---- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-container {
  background: var(--white);
  border-radius: var(--radius-8);
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid var(--cadet-blue-crayola_a20);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title {
  font-size: var(--fs-5);
  font-weight: var(--fw-700);
  color: var(--charcoal);
  margin: 0;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 2.4rem;
  cursor: pointer;
  color: var(--manatee);
  padding: 0;
  line-height: 1;
}

.modal-close-btn:hover {
  color: var(--charcoal);
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--cadet-blue-crayola_a20);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* ---- Spinner ---- */
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--cultured);
  border-top-color: var(--cinnamon-satin);
  border-radius: var(--radius-circle);
  animation: spin 1s linear infinite;
}

.spinner-sm {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---- Button Variants ---- */
.btn-sm {
  padding: 6px 12px;
  font-size: var(--fs-9);
}

.btn-success {
  background-color: var(--status-success);
  color: var(--white);
  border-color: var(--status-success);
}

.btn-success:hover {
  background-color: #219a52;
  border-color: #219a52;
}

.btn-danger {
  background-color: var(--status-error);
  color: var(--white);
  border-color: var(--status-error);
}

.btn-danger:hover {
  background-color: #c0392b;
  border-color: #c0392b;
}

.btn-outline {
  background: transparent;
}

/*-----------------------------------*\
  #HEADER
\*-----------------------------------*/

.header {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--white);
  width: 100%;
  padding-block: 20px;
  box-shadow: var(--shadow-1);
  z-index: 4;
}

.header.active {
  position: fixed;
  animation: slideIn 0.5s ease forwards;
}

@keyframes slideIn {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-open-btn {
  /* Flex so the ion-icon child gets no baseline gap under it — keeps the
     button (and the header) at exactly the icon's height. */
  display: flex;
  font-size: 3.5rem;
  color: var(--gunmetal);
}

.navbar {
  position: fixed;
  top: 0;
  left: -300px;
  background-color: var(--raisin-black);
  color: var(--white);
  max-width: 300px;
  width: 100%;
  height: 100vh;
  padding: 30px;
  padding-block-end: 40px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  z-index: 2;
  visibility: hidden;
  transition: var(--transition-3);
}

.navbar.active {
  visibility: visible;
  transform: translateX(300px);
}

.navbar-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-close-btn {
  /* Flex for the same no-baseline-gap reason as .nav-open-btn. */
  display: flex;
  background-color: var(--white_a8);
  color: var(--white);
  font-size: 2rem;
  padding: 6px;
  border-radius: var(--radius-circle);
  transition: var(--transition-1);
}

.nav-close-btn ion-icon { --ionicon-stroke-width: 50px; }
.nav-close-btn:is(:hover, :focus-visible) { background-color: var(--white_a12); }
.navbar-list {
  margin-block-end: auto;
  list-style: none;
}
.navbar-link {
  /* Block so padding-block reserves height and drawer links span the row. */
  display: block;
  font-weight: var(--fw-700);
  padding-block: 6px;
}

.contact-link { transition: var(--transition-1); }
.contact-link:is(:hover, :focus-visible) { color: var(--cinnamon-satin); }

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--raisin-black);
  pointer-events: none;
  opacity: 0;
  transition: var(--transition-1);
}

.overlay.active {
  pointer-events: all;
  opacity: 0.8;
}

/*-----------------------------------*\
  #HERO
\*-----------------------------------*/

.hero {
  padding-block-start: calc(var(--section-padding) + 50px);
  background-color: var(--cultured);
}

.hero .container {
  display: grid;
  gap: 50px;
}

.hero-banner {
  position: relative;
  max-width: max-content;
  margin-inline: auto;
}

.hero-banner .w-100 {
  mask-image: url("../images/blob.2962e4aa5406.svg");
  -webkit-mask-image: url("../images/blob.2962e4aa5406.svg");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: auto;
  -webkit-mask-size: auto;
}

.hero .shape {
  position: absolute;
  bottom: 10%;
  right: 2%;
  filter: drop-shadow(var(--shadow-2));
}

.hero-content { text-align: center; }
.hero .section-text { margin-block: 24px 36px; }

.btn-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

/*-----------------------------------*\
  #ABOUT
\*-----------------------------------*/

.about .wrapper {
  display: grid;
  gap: 50px;
  margin-block-end: 70px;
}

.progress-list {
  list-style: none;
}

.progress-list .label-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-end: 4px;
}

.progress-item:not(:last-child) { margin-block-end: 16px; }

.progress {
  background-color: var(--raisin-black_a6);
  height: 6px;
  width: 100%;
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.progress-fill { height: inherit; }

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

.about-card .card-icon {
  max-width: max-content;
  margin-inline: auto;
}

.about-card .card-title { margin-block: 16px 10px; }

/*-----------------------------------*\
  #PROJECTS
\*-----------------------------------*/

.project { border-block: 1px solid var(--cadet-blue-crayola_a20); }

.project .title-wrapper { margin-block-end: 40px; }

.project .btn { margin-block-start: 24px; }

.project .grid-list { gap: 40px; }

.project-card {
  --padding: 24px;

  display: flex;
  flex-direction: column;
  gap: var(--padding);
  border-radius: var(--radius-8);
  overflow: hidden;
}

.project-card-1,
.project-card-2 { padding: var(--padding); }

/* DEAD CODE - Commented out 2026-02-25: project-card-3 and project-card-4 are not used anywhere */
/* :is(.project-card-3, .project-card-4) .card-content { padding: var(--padding); } */

/*
.project-card-1 { padding-block-end: 0; }
*/

/* DEAD CODE - Commented out 2026-02-25: project-card-3 and project-card-4 are not used anywhere */
/* .project :is(.project-card-3, .project-card-4) { gap: 0; } */

.project-card .card-tag {
  font-size: var(--fs-8);
  font-weight: var(--fw-700);
  text-transform: uppercase;
}

.project-card .card-title { margin-block: 16px; }

.project-card .card-text { margin-block-end: 20px; }

.project-card .btn-text {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: var(--fw-700);
  transition: var(--transition-1);
}

.project-card .btn-text:is(:hover, :focus-visible) { gap: 10px; }

/*-----------------------------------*\
  #CONTACT
\*-----------------------------------*/

.contact { padding-block-end: 0; }

.contact-card {
  background-color: var(--snow);
  padding: 32px;
  border-radius: var(--radius-8);
  display: grid;
  gap: 40px;
}

.contact .section-title { margin-block-start: 20px; }

.input-field {
  background-color: var(--white);
  color: var(--black-coral);
  font-size: var(--fs-7);
  padding: 14px 18px;
  border-radius: var(--radius-6);
  outline: none;
  margin-block-end: 20px;
}

.input-field::placeholder { color: var(--manatee); }

textarea.input-field {
  min-height: 120px;
  height: 120px;
  max-height: 240px;
  resize: vertical;
}

/*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/

.footer { 
  padding-block: 40px; 
  font-size: var(--fs-9);
}

.copyright { margin-block-end: 12px; }

/*-----------------------------------*\
  #MEDIA QUERIES
\*-----------------------------------*/

/**
 * responsive for large than 575px screen
 */

@media (min-width: 575px) {

  /**
   * REUSED STYLE
   */

  .container {
    max-width: 540px;
    width: 100%;
    margin-inline: auto;
  }

  /**
   * PROJECT
   */

  .project-card { --padding: 68px; }

  /**
   * CONTACT
   */

  .contact-card { padding: 68px; }
}

/**
 * responsive for large than 768px screen
 */

@media (min-width: 768px) {

  /**
   * REUSED STYLE
   */

  .container { max-width: 720px; }

  .section-text { --fs-5: 2rem; }

  /**
   * ABOUT
   */

  .about .grid-list { grid-template-columns: 1fr 1fr; }

  /**
   * PROJECT
   */

  .project .title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
  }

  .project .btn { min-width: max-content; }

  /**
   * CONTACT
   */

  .contact .section-text { --fs-5: 1.8rem; }

  .input-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  /**
   * FOOTER
   */

  .footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .copyright { margin-block-end: 0; }
}

/**
 * responsive for large than 992px screen
 */

@media (min-width: 992px) {

  /**
   * CUSTOM PROPERTY
   */

  :root {
    /**
     * spacing
     */
    --section-padding: 120px;
  }

  /**
   * REUSED STYLE
   */

  .container { max-width: 960px; }

  /**
   * HEADER
   */

  .nav-open-btn,
  .navbar-top,
  .navbar .wrapper,
  .overlay { display: none; }

  .navbar,
  .navbar.active {
    all: unset;
    display: flex;
    flex-grow: 1;
  }

  .navbar-list {
    display: flex;
    gap: 36px;
    margin-inline: auto;
  }

  .navbar-link {
    color: var(--charcoal);
    transition: var(--transition-1);
  }

  .navbar-link:is(:hover, :focus-visible) { color: var(--cinnamon-satin); }

  .header {
    top: 45px;
    max-width: 960px;
    left: 50%;
    transform: translateX(-50%);
    padding-inline: 16px;
    border-radius: var(--radius-8);
  }

  .header.active {
    top: 0;
    left: 0;
    max-width: unset;
    border-radius: 0;
  }

  /**
   * HERO
   */

  .hero { padding-block-start: calc(var(--section-padding) + 80px); }

  .hero .container {
    grid-template-columns: 0.8fr 1fr;
    align-items: center;
    gap: 100px;
  }

  .hero-content { text-align: left; }
  .hero .btn-wrapper { justify-content: flex-start; }

  /**
   * ABOUT
   */

  .about .wrapper {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .about .grid-list { grid-template-columns: repeat(4, 1fr); }

  /**
   * PROJECT
   */

  .project .grid-list {
    grid-template-columns: 1fr 1fr;
    row-gap: 50px;
  }

  /*
  The first 3 projects will take up 2 columns
  */

  .project .grid-list > li:nth-child(-n+3) { grid-column: 1 / 3; }

  .project-card-1,
  .project-card-2 {
    flex-direction: row;
    align-items: flex-end;
  }

  :is(.project-card-1, .project-card-2) .card-content { width: 33.33%; }
  :is(.project-card-1, .project-card-2) .card-banner { width: 66.66%; }
  .project-card-1 .card-content { padding-block-end: var(--padding); }
  .project-card-2 .card-content { order: 1; }

  /**
   * CONTACT
   */

  .contact-card {
    grid-template-columns: 0.8fr 1fr;
    align-items: center;
    gap: 90px;
  }

}


/**
 * responsive for large than 1200px screen
 */

@media (min-width: 1200px) {

  /**
   * REUSED STYLE
   */

  .container,
  .header { max-width: 1140px; }

  /**
   * ABOUT
   */

  .about .grid-list { gap: 50px; }

  /**
   * CONTACT
   */

  .contact-card { gap: 150px; }

}


/**
 * responsive for large than 1400px screen
 */

@media (min-width: 1400px) {

  /**
   * REUSED STYLE
   */

  .container,
  .header { max-width: 1320px; }

  /**
   * HERO
   */

  .hero .container { grid-template-columns: 1fr 0.8fr; }
  .hero .section-text { --fs-5: 2.4rem; }

  /**
   * ABOUT
   */

  .about .wrapper { gap: 100px; }
  .about .grid-list { gap: 60px; }
}


@media (max-width: 768px) {
  .inline-elements {
    flex-direction: column;
    gap: 10px;
  }

  .inline-element {
    /*margin-right: 0;*/
    margin-bottom: 10px;
  }

  .inline-container input {
    height: auto;
    width: 60%; /* Adjust the width of the screen */
  }  
}

/**
 * Landscape phones (short viewport in landscape orientation).
 *
 * The min-width breakpoints above pin `.container` to 720px (>=768px) or
 * 960px (>=992px), which leaves large side gutters on landscape phones
 * (~812x375 to ~932x430). Detect them by orientation + max-height and let
 * the container fill the viewport so page content (tables, forms, etc.)
 * can use the full width.
 */
@media (orientation: landscape) and (max-height: 500px) {
  .container {
    max-width: 100%;
  }
}

/*-----------------------------------*\
  #AUTH (login / signup / password reset)
\*-----------------------------------*/

/* Full-viewport tinted stage that vertically centers the auth card.
   Top padding clears the position:absolute .header from header.html. */
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 80px);
  padding: 120px 16px 60px;
  background-color: var(--snow);
}

/* The single focused card holding the form. */
.auth-card {
  width: 100%;
  max-width: 420px;
  padding: 40px 32px;
  background: var(--white);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-2);
}

/* Wordmark logo, centered above the heading. Cap width (not height) so the
   wide wordmark scales proportionally and never crowds the card edges. */
.auth-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 190px;
  margin: 0 auto 24px;
}

.auth-title {
  font-size: var(--fs-3);
  color: var(--charcoal);
  text-align: center;
  margin-bottom: 6px;
}

.auth-subtitle {
  font-size: var(--fs-8);
  color: var(--manatee);
  text-align: center;
  margin-bottom: 28px;
}

/* Field labels stack above their inputs. */
.auth-form label {
  display: block;
  font-size: var(--fs-9);
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 6px;
}

/* Scoped selector styles the raw allauth <input>s (no widget class helper
   exists in this repo). Mirrors the shared .form-input look. */
.auth-form input:not([type="checkbox"]) {
  width: 100%;
  padding: 11px 14px;
  font-size: var(--fs-8);
  font-family: var(--ff-manrope);
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid var(--cadet-blue-crayola_a20);
  border-radius: var(--radius-6);
  transition: var(--transition-1);
}

.auth-form input:not([type="checkbox"]):focus {
  outline: none;
  border-color: var(--cinnamon-satin);
  box-shadow: 0 0 0 3px hsla(344, 53%, 62%, 0.15);
}

.auth-form input::placeholder {
  color: var(--manatee);
}

/* One stacked label + input pair. */
.auth-field {
  margin-bottom: 18px;
}

/* Inline checkbox + label (e.g. Remember Me). */
.auth-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.auth-remember label {
  margin: 0;
  font-weight: 500;
  color: var(--black-coral);
}

.auth-remember input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--cinnamon-satin);
}

/* Full-width primary CTA. Dedicated class because .btn caps width at
   max-content, which would defeat a full-width submit. */
.auth-submit {
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  font-size: var(--fs-6);
  font-weight: var(--fw-700);
  font-family: var(--ff-manrope);
  color: var(--white);
  background: var(--cinnamon-satin);
  border: 2px solid var(--cinnamon-satin);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition-1);
  will-change: transform;
}

.auth-submit:is(:hover, :focus-visible) {
  transform: translateY(-2px);
}

/* "Or" separator with a rule on each side. */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  color: var(--manatee);
  font-size: var(--fs-9);
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--cadet-blue-crayola_a20);
}

/* Center + size the Google sign-in image button. */
.google-login-button {
  display: flex;
  justify-content: center;
}

.google-login-button img {
  height: 44px;
  max-width: 100%;
}

/* Footer links (forgot password / create account). */
.auth-links {
  margin-top: 24px;
  text-align: center;
  font-size: var(--fs-8);
  color: var(--manatee);
}

.auth-links a {
  color: var(--cinnamon-satin);
  font-weight: 600;
}

.auth-links a:is(:hover, :focus-visible) {
  text-decoration: underline;
}

/* Per-field errors sit tight under their input. */
.auth-field-error {
  margin-top: 6px;
  color: var(--status-error-text);
  font-size: var(--fs-9);
  list-style: none;
}