/* ===================================================================
   Additional custom styles for banners, recommendations slider,
   blog filtering, contact form enhancements and spacing adjustments.
   These rules are appended at the end of the stylesheet so they
   override earlier definitions when necessary.
   =================================================================== */

/* Announcement banners */

/* Update */
.announcement-container{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  pointer-events: none;
}

.top-banner{
  background: var(--blue-primary-soft);
  color: var(--white-1);
  padding: 0.5rem 1rem;
  white-space: nowrap;
  font-size: var(--fs-7);
  width: 100%;
  overflow: hidden;
}

#promo-text{
  display: inline-block;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 1s ease-in-out;
  padding-left: 100%;
  will-change: transform;
  animation: promo-scroll 14s linear infinite;
}

@keyframes promo-scroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-100%); }
}



.bottom-banner {
  background: var(--brown-soft);
  color: var(--white-2);
  padding: 0.5rem 1rem;
  text-align: center;
  font-size: var(--fs-7);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  pointer-events: none;
}

/* Recommendations slider */
.recommendations-section {
  margin-top: 2rem;
}
.recommendations-slider {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.recommendations-slider .slider-btn {
  background: var(--brown-elevated);
  border: 1px solid var(--brown-border);
  color: var(--blue-primary);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-1);
}
.recommendations-slider .slider-btn:hover {
  background: var(--brown-soft);
}
.recommendations-slider .slides {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.recommendations-slider .slide {
  width: 100%;
  flex-shrink: 0;
  display: none;
  /* ensure consistent height across slides */
  min-height: 260px;
}
.recommendations-slider .slide.active {
  display: block;
}
.recommendation-card {
  background: var(--brown-elevated);
  border: 1px solid var(--brown-border);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  gap: 1rem;
  box-shadow: var(--shadow-1);
  max-height: 200px;
  overflow: hidden;
}
.recommendation-card.expanded {
  max-height: none;
}
.recommendation-avatar img {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  object-fit: cover;
}
.recommendation-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.recommendation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  gap: 0.5rem;
}
.recommendation-title {
  font-size: var(--fs-5);
  color: var(--white-1);
  flex: 1;
}
.recommendation-linkedin ion-icon {
  font-size: 1.2rem;
  color: var(--blue-primary);
}
.recommendation-text {
  font-size: var(--fs-6);
  color: var(--white-2);
  line-height: 1.4;
  margin-bottom: 0.5rem;
  overflow: hidden;
  /* truncate to three lines by default */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.recommendation-card.expanded .recommendation-text {
  overflow: visible;
  -webkit-line-clamp: unset;
}

/* Add padding to body to ensure content is not obscured by fixed top and bottom banners */
body {
  /*
    Provide vertical padding to prevent the page content from scrolling
    beneath the fixed announcement banners at the top and bottom.  The
    top banner contains rotating promotional messages; increasing the
    top padding ensures the sidebar and page titles remain fully
    visible.  Likewise, the bottom padding keeps content above the
    fixed tagline banner and bottom nav bar.  Adjust these values
    carefully to avoid overlap without introducing excess whitespace.
  */
  /* Increase padding so that page content never overlaps the fixed promotional banners. */
  /* Increase top padding slightly so that page content never slides under
     the fixed promotional banner and navigation bar.  Combined with the
     nav height, this ensures the first section title is always fully
     visible on page load. */
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}
.read-more-btn {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  font-size: var(--fs-7);
  color: var(--blue-primary);
  text-decoration: underline;
  cursor: pointer;
}

/* Keyframes for scrolling promotional text across the top banner */
@keyframes promo-scroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Blog filter */
.blog-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.blog-filter-label {
  font-size: var(--fs-7);
  color: var(--white-2);
}
.blog-filter-select {
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--brown-border);
  background: var(--brown-surface);
  color: var(--white-1);
  font-size: var(--fs-7);
  /* Hide the native arrow and draw a custom down‑chevron.  The arrow colour adapts to the theme. */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23aaaaaa'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 011.08 1.04l-4.25 4.25a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
body.light-theme .blog-filter-select {
  background: var(--brown-elevated);
  color: var(--white-1);
  /* Use a darker arrow in light mode for contrast */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23333333'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 011.08 1.04l-4.25 4.25a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* Contact form enhancements */
.contact-form .required {
  color: var(--bittersweet-shimmer);
  margin-left: 2px;
}
.form-error {
  color: #ff6b6b;
  margin-top: 0.5rem;
  font-size: var(--fs-7);
}

/* Spacing adjustments for social icons */
.top-social-list {
  margin-top: 1.25rem;
}
/*-----------------------------------*\
  #style.css — Mocha + Deep Blue Theme
\*-----------------------------------*/

/*-----------------------------------*\
  #CUSTOM PROPERTIES
\*-----------------------------------*/

:root {
  /* Core Mocha Browns */
  --brown-bg: hsl(24, 20%, 7%);    /* page background */
  --brown-sidebar: hsl(24, 20%, 10%);
  --brown-surface: hsl(24, 22%, 13%);
  --brown-elevated: hsl(24, 22%, 16%);
  --brown-border: hsl(24, 22%, 22%);
  --brown-soft: hsl(24, 24%, 26%);

  /* Premium Deep Blue (20% highlight mode) */
  --blue-primary: #1f45fc;
  --blue-primary-soft: rgba(31, 69, 252, 0.25);
  --blue-primary-softer: rgba(31, 69, 252, 0.15);

  /* Soft caramel / gold accent */
  --accent-gold: hsl(35, 70%, 64%);
  --accent-gold-soft: hsl(35, 60%, 58%);

  /* Text & neutrals (no bright white) */
  --white-1: hsl(0, 0%, 92%);
  --white-2: hsl(0, 0%, 86%);
  --light-gray: hsl(30, 10%, 70%);
  --light-gray-70: hsla(30, 10%, 70%, 0.7);

  /* Legacy aliases mapped to mocha palette */
  --jet: var(--brown-border);
  --onyx: var(--brown-sidebar);
  --eerie-black-1: var(--brown-sidebar);
  --eerie-black-2: var(--brown-surface);
  --smoky-black: var(--brown-bg);

  /* Extra accents (used lightly) */
  --vegas-gold: hsl(35, 55%, 55%);
  --bittersweet-shimmer: hsl(15, 70%, 48%);

  /* Gradients */
  --bg-gradient-onyx: linear-gradient(
    to bottom right,
    var(--brown-elevated) 0%,
    var(--brown-bg) 100%
  );

  --bg-gradient-jet: linear-gradient(
    to bottom right,
    var(--brown-sidebar) 0%,
    var(--brown-bg) 100%
  );

  /* Gold→Blue section highlight */
  --bg-gradient-highlight: linear-gradient(
    90deg,
    var(--accent-gold-soft) 0%,
    var(--blue-primary-softer) 50%,
    transparent 100%
  );

  --border-gradient-onyx: linear-gradient(
    to bottom right,
    var(--brown-soft) 0%,
    var(--brown-surface) 50%,
    var(--brown-border) 100%
  );

  --text-gradient-yellow: linear-gradient(
    to right,
    var(--accent-gold),
    var(--blue-primary)
  );

  /* Shadows */
  --shadow-1: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 16px 30px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 16px 40px rgba(0, 0, 0, 0.45);
  --shadow-4: 0 25px 50px rgba(0, 0, 0, 0.32);
  --shadow-5: 0 24px 80px rgba(0, 0, 0, 0.48);

  /* Typography */
  --ff-poppins: "Poppins", sans-serif;
  --fs-1: 24px;
  --fs-2: 18px;
  --fs-3: 17px;
  --fs-4: 16px;
  --fs-5: 15px;
  --fs-6: 14px;
  --fs-7: 13px;
  --fs-8: 11px;

  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;

  /* Transitions */
  --transition-1: 0.25s ease;
  --transition-2: 0.5s ease-in-out;
}

/*--------------------------------------------------------*
  #LIGHT THEME OVERRIDES
  These variables override the dark palette when the
  `.light-theme` class is applied to the <body> element.
  They swap dark browns for light neutrals and adjust
  shadows so the interface feels airy on light mode.
--------------------------------------------------------*/
body.light-theme {
  /* Light neutrals for backgrounds and surfaces */
  /* Use an off‑white palette rather than pure white for a warmer appearance. */
  --brown-bg: #f9f6f2;       /* page background: eggshell off‑white */
  --brown-sidebar: #fcf9f5;   /* sidebar background */
  --brown-surface: #f8f5f1;   /* page surface */
  --brown-elevated: #ffffff; /* card backgrounds */
  --brown-border: #e5e7eb;   /* light slate border for subtle delineation */
  --brown-soft: #f2f0ec;     /* soft neutral for hover effects */

  /* Invert text colours for readability on light backgrounds */
  --white-1: hsl(0, 0%, 15%);
  --white-2: hsl(0, 0%, 35%);
  --light-gray: hsl(0, 0%, 45%);
  --light-gray-70: hsla(0, 0%, 45%, 0.7);

  /* Softer shadows on light surfaces */
  --shadow-1: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-2: 0 16px 30px rgba(0, 0, 0, 0.12);
  --shadow-3: 0 16px 40px rgba(0, 0, 0, 0.12);
  --shadow-4: 0 25px 50px rgba(0, 0, 0, 0.16);
  --shadow-5: 0 24px 80px rgba(0, 0, 0, 0.16);

  /* Re-map legacy colour aliases to the new light palette */
  --jet: var(--brown-border);
  --onyx: var(--brown-sidebar);
  --eerie-black-1: var(--brown-sidebar);
  --eerie-black-2: var(--brown-surface);
  --smoky-black: var(--brown-bg);

  /* Adjust primary colours for light mode. Use brighter, more saturated hues */
  --blue-primary: #2563eb;            /* indigo‑blue */
  --blue-primary-soft: rgba(37, 99, 235, 0.24);
  --blue-primary-softer: rgba(37, 99, 235, 0.14);
  --accent-gold: #f59e0b;            /* warm gold accent */
  --accent-gold-soft: #fcd34d;
}

body.light-theme,
html.light-theme {
  background-color: var(--brown-bg) !important;
}

/* Force dark background everywhere (kills host white wrappers) */
html,
body {
  background-color: var(--smoky-black) !important;
}

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

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

a {
  text-decoration: none;
}

li {
  list-style: none;
}

img,
ion-icon,
a,
button,
time,
span {
  display: block;
}

button {
  font: inherit;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

input,
textarea {
  display: block;
  width: 100%;
  background: none;
  font: inherit;
}

::selection {
  background: var(--blue-primary);
  color: var(--smoky-black);
}

:focus {
  outline-color: var(--blue-primary);
}

html {
  font-family: var(--ff-poppins);
}

body {
  color: var(--white-2);
}

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

.sidebar,
article {
  background: var(--eerie-black-2);
  border-radius: 20px;
  border: 1px solid var(--brown-border);
  padding: 15px;
  box-shadow: var(--shadow-1);
  z-index: 1;
}

/* When the light theme is active, lighten the sidebar and article surfaces */
body.light-theme .sidebar,
body.light-theme article {
  background: var(--brown-surface);
  border-color: var(--brown-border);
  box-shadow: var(--shadow-1);
}

/* Force the aside sidebar container to lighten in light mode */
body.light-theme .sidebar {
  background: var(--brown-surface) !important;
}

.separator {
  width: 100%;
  height: 1px;
  background: var(--jet);
  margin: 16px 0;
}

.icon-box {
  position: relative;
  background: var(--border-gradient-onyx);
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: var(--accent-gold);
  box-shadow: var(--shadow-1);
  z-index: 1;
}

.icon-box::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--eerie-black-1);
  border-radius: inherit;
  z-index: -1;
}

.icon-box ion-icon {
  --ionicon-stroke-width: 35px;
}

article {
  display: none;
}

article.active {
  display: block;
  animation: fade 0.5s ease backwards;
}

@keyframes fade {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.h2,
.h3,
.h4,
.h5 {
  color: var(--white-2);
  text-transform: capitalize;
}

.h2 {
  font-size: var(--fs-1);
}

.h3 {
  font-size: var(--fs-2);
}

.h4 {
  font-size: var(--fs-4);
}

.h5 {
  font-size: var(--fs-7);
  font-weight: var(--fw-500);
}

/* Section title underline with gold → blue highlight */
.article-title {
  position: relative;
  padding-bottom: 7px;
}

.article-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 46px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--accent-gold) 0%,
    var(--blue-primary) 100%
  );
}

.has-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.has-scrollbar::-webkit-scrollbar-track {
  background: var(--onyx);
  border-radius: 5px;
}

.has-scrollbar::-webkit-scrollbar-thumb {
  background: var(--blue-primary-softer);
  border-radius: 5px;
}

.has-scrollbar::-webkit-scrollbar-button {
  width: 20px;
}

.content-card {
  position: relative;
  background: var(--border-gradient-onyx);
  padding: 15px;
  padding-top: 45px;
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  cursor: pointer;
  z-index: 1;
}

.content-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--bg-gradient-jet);
  border-radius: inherit;
  z-index: -1;
}

/*-----------------------------------*\
  #MAIN
\*-----------------------------------*/

main {
  margin: 15px 12px;
  margin-bottom: 75px;
  min-width: 259px;
}

.main-content {
  position: relative;
}

/*-----------------------------------*\
  #SIDEBAR
\*-----------------------------------*/

.sidebar {
  margin-bottom: 15px;
  max-height: 112px;
  overflow: hidden;
  background: var(--bg-gradient-onyx);
  transition: var(--transition-2);
}

.sidebar.active {
  max-height: 420px;
}

.sidebar-info {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
}

.avatar-box {
  background: var(--bg-gradient-onyx);
  border-radius: 20px;
  padding: 3px;
}

.avatar-box img {
  border-radius: 18px;
  display: block;
}

.info-content .name {
  color: var(--white-2);
  font-size: var(--fs-3);
  font-weight: var(--fw-500);
  letter-spacing: -0.25px;
  margin-bottom: 10px;
}

.info-content .title {
  color: var(--white-1);
  background: var(--onyx);
  font-size: var(--fs-8);
  font-weight: var(--fw-300);
  width: max-content;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid var(--brown-border);
}

.info_more-btn {
  position: absolute;
  top: -15px;
  right: -15px;
  border-radius: 0 15px;
  font-size: 13px;
  color: var(--accent-gold);
  background: var(--border-gradient-onyx);
  padding: 10px;
  box-shadow: var(--shadow-2);
  transition: var(--transition-1);
  z-index: 1;
}

.info_more-btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: var(--bg-gradient-jet);
  transition: var(--transition-1);
  z-index: -1;
}

/* Hybrid highlight on hover: subtle blue halo */
.info_more-btn:hover,
.info_more-btn:focus {
  background: linear-gradient(
    135deg,
    var(--brown-soft),
    var(--blue-primary-soft)
  );
}

.info_more-btn:hover::before,
.info_more-btn:focus::before {
  background: var(--bg-gradient-jet);
}

.info_more-btn span {
  display: none;
}

.sidebar-info_more {
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-2);
}

.sidebar.active .sidebar-info_more {
  opacity: 1;
  visibility: visible;
}

.contacts-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.contact-item {
  min-width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}

.contact-info {
  max-width: calc(100% - 46px);
  width: calc(100% - 46px);
}

.contact-title {
  color: var(--light-gray-70);
  font-size: var(--fs-8);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.contact-info :is(.contact-link, time, address) {
  color: var(--white-2);
  font-size: var(--fs-7);
}

.contact-info .contact-link {
  transition: color var(--transition-1);
}

.contact-info .contact-link:hover {
  color: var(--blue-primary);
}

.contact-info address {
  font-style: normal;
}

.social-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  padding-bottom: 4px;
  padding-left: 7px;
}

.social-item .social-link {
  color: var(--light-gray-70);
  font-size: 18px;
  transition: color var(--transition-1);
}

.social-item .social-link:hover {
  color: var(--blue-primary);
}

/* Add spacing above the top-level social icons (below the name/title) */
.top-social-list {
  /* Increase margin above the social icons for better separation from the title */
  /* Provide generous breathing room above the social icons so they don't crowd the title */
  margin-top: 1.25rem;
}

/* Bottom social icons appear under the contacts section */
.bottom-social-list {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  padding-left: 7px;
}

/* Brand colours for each social platform */
.social-link.whatsapp ion-icon {
  color: #25D366;
}
.social-link.instagram ion-icon {
  color: #E4405F;
}
.social-link.x-twitter ion-icon {
  color: #1DA1F2;
}
.social-link.medium ion-icon {
  color: #00ab6c;
}
.social-link.linkedin ion-icon {
  color: #0077B5;
}
/*
  Custom styling for the GitHub logo image in the bottom social icons.  We
  replace the Ionicon with our own SVG image.  The image is dark in light
  mode and inverted in dark mode so it is always visible on any
  background.  It inherits width/height from the HTML attributes.
*/
.social-link.github img {
  display: inline-block;
  width: 20px;
  height: 20px;
}
/* In dark mode invert the GitHub logo so it appears light on a dark
   background. */
body:not(.light-theme) .social-link.github img {
  filter: invert(1);
}

/* Custom styling for the X logo (formerly Twitter).  We use a white PNG and
   invert it in light mode to create a black icon.  This ensures the logo is
   visible on both dark and light backgrounds. */
.social-link.x-twitter img {
  display: inline-block;
  width: 20px;
  height: 20px;
}
body.light-theme .social-link.x-twitter img {
  filter: invert(1);
}

/*
  Skills grid styling

  The technical skills section uses radial progress indicators to convey
  proficiency.  Each skill-card defines a CSS custom property --value
  (percentage from 0 to 100) which is used to generate a conic gradient.  A
  concentric inner circle provides contrast for the percentage label.
*/
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.skill-card {
  background: var(--brown-elevated);
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
  box-shadow: var(--shadow-1);
  position: relative;
}

.skill-chart {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 0.5rem;
  border-radius: 50%;
  background: conic-gradient(var(--blue-primary) calc(var(--value) * 1%), var(--brown-200) 0);
}

.skill-chart {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 0.5rem;
  border-radius: 50%;
  background: conic-gradient(
    var(--blue-primary) calc(var(--value) * 1%),
    var(--brown-border) 0
  );
}

.skill-chart::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  border-radius: 50%;
  background: var(--brown-elevated);
}

.skill-chart .skill-percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: var(--fw-600);
  color: var(--blue-primary);
}

.skill-name {
  margin-top: 0.25rem;
  font-size: var(--fs-7);
  color: var(--light-gray);
}

/* Light theme overrides for skills */
body.light-theme .skill-card {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
body.light-theme .skill-chart {
  background: conic-gradient(var(--blue-primary) calc(var(--value) * 1%), #e5e7eb 0);
}
body.light-theme .skill-chart::before {
  background: #ffffff;
}
body.light-theme .skill-chart .skill-percentage {
  color: var(--blue-primary);
}
body.light-theme .skill-name {
  color: var(--brown-800);
}

/* Services page layout */
.services-page .services-section {
  margin-top: 20px;
}
.services-page .services-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

/* Currency selector styling */
.services-section .currency-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: var(--fs-6);
  color: var(--light-gray);

  /* Position relative so we can draw a custom arrow via ::after */
  position: relative;
}

/* Draw a custom arrow for the currency selector.  This avoids duplicate
   arrows that can occur when relying on the native select styling. */
/*
 * The currency selector draws its own arrow via the `background-image` on the
 * `<select>` element.  We no longer use a pseudo‑element on the parent
 * `.currency-selector` container because it created duplicate arrows in
 * certain browsers.  The following rule disables any pseudo‑element that
 * might otherwise be inherited from earlier versions.  If additional
 * arrow styling is needed, adjust the `background-image` on
 * `#currency-select` instead.
 */
.services-section .currency-selector::after {
  content: none;
}


/* Remove any default or custom background image on the select and
   leave space for the arrow drawn via ::after */
.services-section #currency-select {
  background-image: none !important;
  padding-right: 2rem;
}

/* Blog filter container: make it relative so we can draw an arrow */
.blog-filter {
  position: relative;
}

/* Custom arrow for the blog filter */
/*
 * Like the currency selector, the blog filter relies on a custom
 * `background-image` for its arrow.  Disable the pseudo‑element on
 * `.blog-filter` to avoid duplicate arrows in the light theme.  Arrow
 * colours are configured via the `background-image` property on the
 * select itself.
 */
.blog-filter::after {
  content: none;
}


/* Remove custom background image on blog filter select */
.blog-filter-select {
  background-image: none !important;
  padding-right: 2rem;
}

.services-section #currency-select {
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  border: 1px solid var(--brown-300);
  background: var(--brown-elevated);
  color: var(--light-gray);
  font-size: var(--fs-6);

  /* Hide the default arrow and use a custom down chevron */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23aaaaaa'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 011.08 1.04l-4.25 4.25a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* Style select options for better visibility in both themes */
.services-section #currency-select option {
  background: var(--brown-elevated);
  color: var(--white-1);
}
body.light-theme .services-section #currency-select option {
  background: #ffffff;
  color: var(--brown-900);
}

body.light-theme .services-section #currency-select {
  background: #ffffff;
  color: var(--brown-800);
  border-color: #d1d5db;
  /* Use a darker arrow in light mode for contrast */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23333333'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 011.08 1.04l-4.25 4.25a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.services-page .service-card {
  background-color: var(--brown-elevated);
  border: 1px solid var(--brown-border);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--shadow-1);
  transition: transform var(--transition-2), box-shadow var(--transition-1);
  height: 100%;
}
.services-page .service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}
.services-page .service-card-icon ion-icon {
  font-size: 32px;
  color: var(--blue-primary);
  margin-bottom: 0.75rem;
}
.services-page .service-card-content {
  flex: 1;
}
.services-page .service-card-title {
  margin-bottom: 0.5rem;
}
.services-page .service-card-price {
  margin-top: 0.75rem;
  font-size: var(--fs-6);
}
.services-page .service-card-price strong {
  color: var(--blue-primary);
}
.services-page .service-card-price span {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-7);
  color: var(--light-gray);
}

/*
  Style the "Contact Me" buttons within service cards.  These appear at the
  bottom of each card and should look interactive rather than plain text.
*/
.service-contact-btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  margin-top: 1rem;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-weight: var(--fw-600);
  background: var(--blue-primary);
  color: var(--white-1);
  border: none;
  cursor: pointer;
  transition: background var(--transition-1), transform var(--transition-1);
}
.service-contact-btn:hover {
  background: var(--accent-gold);
  transform: translateY(-2px);
}
body.light-theme .service-contact-btn {
  background: var(--blue-primary);
  color: #ffffff;
}
body.light-theme .service-contact-btn:hover {
  background: var(--accent-gold);
}


/*-----------------------------------*\
  #NAVBAR
\*-----------------------------------*/

.navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.9),
    rgba(24, 18, 12, 0.9)
  );
  backdrop-filter: blur(12px);
  border: 1px solid var(--brown-border);
  border-radius: 12px 12px 0 0;
  box-shadow: var(--shadow-2);
  z-index: 5;
  /* Use a flex layout so that the theme toggle sits on the far right. */
  display: flex;
  align-items: center;
  /* When using a flex layout, there is no need to reserve space for the theme toggle. */
  padding-right: 20px;
  box-sizing: border-box;
  overflow: visible;
}

/* Light theme overrides for the navbar: use a translucent white gradient to
   improve contrast against the light background, and lighten link colours */
body.light-theme .navbar {
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.9),
    rgba(245, 245, 245, 0.9)
  );
  border-color: var(--brown-border);
  box-shadow: var(--shadow-1);
}

body.light-theme .navbar-link {
  color: var(--light-gray);
}

body.light-theme .navbar-link.active {
  color: var(--blue-primary);
}

body.light-theme .navbar-link::after {
  background: linear-gradient(90deg, var(--accent-gold) 0%, var(--blue-primary) 100%);
}

.navbar-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  gap: 8px;
  flex-grow: 1;
}

.navbar-link {
  position: relative;
  color: var(--light-gray);
  font-size: var(--fs-8);
  padding: 16px 10px;
  transition: color var(--transition-1), transform var(--transition-1);
}

/* Hybrid: mocha normally, blue on hover/active */
.navbar-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--blue-primary);
  transform: translateX(-50%);
  transition: width var(--transition-1);
}

.navbar-link:hover,
.navbar-link:focus {
  color: var(--blue-primary-soft);
  transform: translateY(-1px);
}

.navbar-link:hover::after,
.navbar-link:focus::after {
  width: 40%;
}

.navbar-link.active {
  color: var(--blue-primary);
}

.navbar-link.active::after {
  width: 50%;
}

/* Theme toggle button inside the navbar */
/* Theme toggle button inside the navbar */
.theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brown-surface);
  border: 1px solid var(--brown-border);
  color: var(--accent-gold);
  font-size: 1.25rem;
  cursor: pointer;
  transition: background var(--transition-1), color var(--transition-1);
  /* push the toggle to the far right within the nav bar */
  margin-left: auto;
}

.theme-btn:hover {
  background: var(--brown-soft);
}

.theme-btn .theme-icon {
  pointer-events: none;
}

/* Download resume button styling */
.resume-download {
  margin-top: 10px;
  margin-bottom: 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--blue-primary);
  color: var(--white-1);
  font-size: var(--fs-6);
  font-weight: var(--fw-500);
  box-shadow: var(--shadow-1);
  transition: background var(--transition-1), box-shadow var(--transition-1);
  /* Provide space below the button so that subsequent sections do not run into it */
  margin-bottom: 0.75rem;
}

.resume-download:hover {
  background: var(--accent-gold);
  color: var(--brown-bg);
  box-shadow: var(--shadow-3);
}

.resume-download ion-icon {
  font-size: 1.2rem;
}

/* Service item hover animation */
.service-item {
  transition: transform var(--transition-2), box-shadow var(--transition-1);
}

/* When the light theme is active, lighten the service (quick highlight) cards.
   The default design uses gradient-filled borders on dark surfaces which look
   heavy in light mode. Overriding the backgrounds here removes the dark
   gradients and replaces them with solid light neutrals, creating a consistent
   appearance with the rest of the interface. */
body.light-theme .service-item {
  background: var(--brown-surface);
  box-shadow: var(--shadow-1);
}
body.light-theme .service-item::before {
  background: var(--brown-bg);
}

.service-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}

/* Clients logo interactions */
.clients-item img {
  height: 60px;
  width: auto;
  object-fit: contain;
  /* Do not desaturate logos; retain their original colours */
  filter: none;
  transition: transform var(--transition-1);
}

.clients-item a:hover img {
  transform: scale(1.05);
}

/* Testimonials redesign */
.testimonials .content-card {
  background: var(--brown-surface);
  border: 1px solid var(--brown-border);
  padding: 20px;
  border-radius: 16px;
  box-shadow: var(--shadow-1);
  transition: transform var(--transition-2), box-shadow var(--transition-2);
}

/* In light mode give recommendation cards a white background and subtle border to
   mimic LinkedIn’s card design. */
body.light-theme .testimonials .content-card {
  background: #ffffff;
  border-color: var(--brown-border);
  box-shadow: var(--shadow-1);
}

/* Also override the inner pseudo-element so the white background isn’t covered by
   the dark gradient layer defined on .content-card::before. */
body.light-theme .testimonials .content-card::before {
  background: #ffffff;
}

/* Bullet styling for resume timeline. Each timeline-text block gets a custom
   bullet to visually separate unique accomplishments. */


/* Update */

/* Keep the custom dot only for the short summary paragraph */
p.timeline-text {
  position: relative;
  padding-left: 1rem;
}

p.degree-class{
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.9em;
  font-weight: 500;
  background: var(--blue-primary-soft);
  color: var(--white-1);
}

.degree-class{
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  margin-left: 0.5rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.9em;
  font-weight: 500;
  background: var(--blue-primary-soft);
  color: var(--white-1);
  vertical-align: middle;
}

/*
  LinkedIn‑style recommendation cards.  These replace the original
  testimonial content cards and provide a clean, white card layout with
  avatar on the left and text on the right.  The cards adapt between
  dark and light themes and use the accent colours defined in the
  variables section.
*/
.recommendation-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--brown-surface);
  border: 1px solid var(--brown-border);
  padding: 20px;
  border-radius: 16px;
  box-shadow: var(--shadow-1);
}

body.light-theme .recommendation-card {
  background: #ffffff;
  border-color: var(--brown-border);
  box-shadow: var(--shadow-1);
}

.recommendation-avatar img {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  object-fit: cover;
}

.recommendation-title {
  margin: 0 0 6px;
  color: var(--accent-gold);
}

/*--------------------------------------------------------*
  #PROJECTS SECTION
  A simple grid layout for showcasing featured projects with
  icons, titles and descriptions. The cards adapt to
  available space and transition to light mode seamlessly.
--------------------------------------------------------*/
.projects-page {
  margin-top: 2rem;
}

.projects-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.project-item {
  /* Use the elevated surface colour to ensure cards contrast against the page */
  /* Use a distinct card background so the project cards stand out against the
     page surface.  The neutral elevated colour makes them visible in both
     dark and light modes. */
  background: var(--brown-elevated);
  padding: 1.2rem;
  border-radius: 12px;
  box-shadow: var(--shadow-1);
  border: 1px solid var(--brown-border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform var(--transition-1), box-shadow var(--transition-1);
}

.project-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}

.project-icon img {
  width: 60px;
  height: 60px;
  margin-bottom: 0.75rem;
}

.project-title {
  margin-bottom: 0.5rem;
  font-size: var(--fs-3);
  color: var(--accent-gold);
}

.project-description {
  font-size: var(--fs-5);
  color: var(--white-2);
  line-height: 1.4;
}

/* Light mode overrides for project cards */
body.light-theme .project-item {
  /* Lighten project cards slightly against the page background for contrast */
  background: #f9fafb;
  border-color: #e5e7eb;
}

body.light-theme .project-title {
  color: var(--blue-primary);
}

body.light-theme .project-description {
  color: var(--light-gray);
}

.recommendation-text {
  font-size: var(--fs-7);
  line-height: 1.6;
  color: var(--light-gray-70);
}

body.light-theme .recommendation-text {
  color: var(--light-gray);
}

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

.testimonials .testimonials-item-title {
  color: var(--accent-gold);
  margin-top: 10px;
}

.testimonials .testimonials-text p {
  color: var(--white-2);
  font-style: italic;
}

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

.about .article-title {
  margin-bottom: 15px;
}

.about-text {
  color: var(--light-gray);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
  line-height: 1.6;
}

.about-text p {
  margin-bottom: 15px;
}

/* Services */

.service {
  margin-bottom: 35px;
}

.service-title {
  margin-bottom: 20px;
}

.service-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.service-item {
  position: relative;
  background: var(--border-gradient-onyx);
  padding: 20px;
  border-radius: 16px;
  box-shadow: var(--shadow-2);
  z-index: 1;
}

.service-item::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--bg-gradient-jet);
  border-radius: inherit;
  z-index: -1;
}

.service-icon-box {
  margin-bottom: 10px;
}

.service-icon-box img {
  margin: auto;
  /* Add a gentle floating animation to icons to introduce subtle motion.
     This animation gives the page a sense of liveliness without being
     distracting, satisfying the user's request for light web movement. */
  animation: float 6s ease-in-out infinite;
}

/* Keyframes for floating icons used in Quick Highlights */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-6px);
  }
}

.service-content-box {
  text-align: center;
}

.service-item-title {
  margin-bottom: 7px;
}

.service-item-text {
  color: var(--light-gray);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
  line-height: 1.6;
}

/*-----------------------------------*\
  #TESTIMONIALS
\*-----------------------------------*/

.testimonials {
  margin-bottom: 30px;
}

.testimonials-title {
  margin-bottom: 20px;
}

.testimonials-list {
  /* Display recommendations in a responsive grid instead of a horizontal scroll. This
     makes the LinkedIn‑style cards easier to read and removes the need for
     horizontal scrolling. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 20px 0;
  overflow-x: visible;
  scroll-behavior: auto;
  overscroll-behavior-inline: auto;
  scroll-snap-type: none;
}

.testimonials-item {
  /* Allow the items to size automatically within the grid */
  min-width: 0;
  scroll-snap-align: start;
}

.testimonials-avatar-box {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(15px, -25px);
  background: var(--bg-gradient-onyx);
  border-radius: 16px;
  box-shadow: var(--shadow-1);
}

.testimonials-item-title {
  margin-bottom: 7px;
}

.testimonials-text {
  color: var(--light-gray);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Testimonials Modal */

.modal-container {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 20;
  pointer-events: none;
  visibility: hidden;
}

.modal-container::-webkit-scrollbar {
  display: none;
}

.modal-container.active {
  pointer-events: all;
  visibility: visible;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 5, 0.9);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
  transition: var(--transition-1);
}

.overlay.active {
  opacity: 0.85;
  visibility: visible;
  pointer-events: all;
}

.testimonials-modal {
  background: var(--eerie-black-2);
  position: relative;
  padding: 15px;
  margin: 15px 12px;
  border: 1px solid var(--brown-border);
  border-radius: 18px;
  box-shadow: var(--shadow-5);
  transform: scale(1.05);
  opacity: 0;
  transition: var(--transition-1);
  z-index: 2;
}

.modal-container.active .testimonials-modal {
  transform: scale(1);
  opacity: 1;
}

.modal-close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: var(--onyx);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white-2);
  font-size: 18px;
  opacity: 0.75;
  transition: background var(--transition-1), opacity var(--transition-1);
}

.modal-close-btn:hover,
.modal-close-btn:focus {
  opacity: 1;
  background: var(--blue-primary-soft);
}

.modal-close-btn ion-icon {
  --ionicon-stroke-width: 50px;
}

.modal-avatar-box {
  background: var(--bg-gradient-onyx);
  width: max-content;
  border-radius: 16px;
  margin-bottom: 15px;
  box-shadow: var(--shadow-2);
}

.modal-img-wrapper > img {
  display: none;
}

.modal-title {
  margin-bottom: 4px;
}

.modal-content time {
  font-size: var(--fs-6);
  color: var(--light-gray-70);
  font-weight: var(--fw-300);
  margin-bottom: 10px;
}

.modal-content p {
  color: var(--light-gray);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
  line-height: 1.6;
}

/*-----------------------------------*\
  #CLIENTS
\*-----------------------------------*/

.clients {
  margin-bottom: 15px;
}

/* Display the collaboration logos in a responsive grid instead of a
   horizontally scrolling list. By allowing wrapping and centering
   items, all logos remain visible across screen sizes without
   requiring horizontal scroll. */
.clients-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  gap: 25px;
  margin: 0;
  padding: 25px;
}

.clients-item {
  flex: 1 1 120px;
  max-width: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.clients-item img {
  width: 100%;
  /* Preserve original colours of partner logos for brand recognition.  Remove
     grayscale and apply a subtle opacity that lifts on hover. */
  filter: none;
  opacity: 0.9;
  transition: var(--transition-1);
}

.clients-item img:hover {
  filter: none;
  opacity: 1;
}

/*-----------------------------------*\
  #RESUME
\*-----------------------------------*/

.article-title {
  margin-bottom: 30px;
}

.timeline {
  margin-bottom: 30px;
}

.timeline .title-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
}

.timeline-list {
  font-size: var(--fs-6);
  margin-left: 45px;
}

.timeline-item {
  position: relative;
}

.timeline-item:not(:last-child) {
  margin-bottom: 20px;
}

.timeline-item-title {
  font-size: var(--fs-6);
  line-height: 1.3;
  margin-bottom: 7px;
}

.timeline-list span {
  color: var(--vegas-gold);
  font-weight: var(--fw-400);
  line-height: 1.6;
}

.timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: -25px;
  left: -30px;
  width: 1px;
  height: calc(100% + 50px);
  background: var(--jet);
}

.timeline-item::after {
  content: "";
  position: absolute;
  top: 5px;
  left: -33px;
  height: 6px;
  width: 6px;
  background: radial-gradient(
    circle,
    var(--blue-primary) 0%,
    var(--accent-gold) 60%
  );
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--jet);
}

.timeline-text {
  color: var(--light-gray);
  font-weight: var(--fw-300);
  line-height: 1.6;
}

/* Skills */

.skills-title {
  margin-bottom: 20px;
}

.skills-list {
  padding: 20px;
}

.skills-item:not(:last-child) {
  margin-bottom: 15px;
}

.skill .title-wrapper {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
}

.skill .title-wrapper data {
  color: var(--light-gray);
  font-size: var(--fs-7);
  font-weight: var(--fw-300);
}

.skill-progress-bg {
  background: var(--jet);
  width: 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
}

/* Gold → blue hybrid skill bar */
.skill-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--accent-gold) 0%,
    var(--blue-primary) 100%
  );
}

/*-----------------------------------*\
  #PORTFOLIO
\*-----------------------------------*/

.filter-list {
  display: none;
}

.filter-select-box {
  position: relative;
  margin-bottom: 25px;
}

.filter-select {
  background: var(--eerie-black-2);
  color: var(--light-gray);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--jet);
  border-radius: 14px;
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
}

.filter-select.active .select-icon {
  transform: rotate(0.5turn);
}

.select-list {
  background: var(--eerie-black-2);
  position: absolute;
  top: calc(100% + 6px);
  width: 100%;
  padding: 6px;
  border: 1px solid var(--jet);
  border-radius: 14px;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: 0.15s ease-in-out;
}

.filter-select.active + .select-list {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.select-item button {
  background: var(--eerie-black-2);
  color: var(--light-gray);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
  text-transform: capitalize;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background var(--transition-1), color var(--transition-1);
}

.select-item button:hover {
  background: var(--blue-primary-softer);
  color: var(--white-1);
}

.project-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-bottom: 10px;
}

.project-item {
  display: none;
}

.project-item.active {
  display: block;
  animation: scaleUp 0.25s ease forwards;
}

@keyframes scaleUp {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.project-item > a {
  width: 100%;
}

.project-img {
  position: relative;
  width: 100%;
  height: 200px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 15px;
}

.project-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 1;
  transition: var(--transition-1);
}

.project-item > a:hover .project-img::before {
  background: radial-gradient(
    circle at center,
    rgba(31, 69, 252, 0.18) 0%,
    transparent 60%
  );
}

/* Icon box gets stronger blue on hover */
.project-item-icon-box {
  --scale: 0.8;
  background: var(--jet);
  color: var(--accent-gold);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--scale));
  font-size: 20px;
  padding: 18px;
  border-radius: 12px;
  opacity: 0;
  z-index: 1;
  transition: var(--transition-1);
}

.project-item > a:hover .project-item-icon-box {
  --scale: 1;
  opacity: 1;
  background: var(--blue-primary-soft);
  color: var(--white-1);
}

.project-item-icon-box ion-icon {
  --ionicon-stroke-width: 50px;
}

.project-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-1);
}

.project-item > a:hover img {
  transform: scale(1.05);
}

.project-title,
.project-category {
  margin-left: 10px;
}

.project-title {
  color: var(--white-2);
  font-size: var(--fs-5);
  font-weight: var(--fw-400);
  text-transform: capitalize;
  line-height: 1.3;
}

.project-category {
  color: var(--light-gray-70);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
}

/*-----------------------------------*\
  #BLOG
\*-----------------------------------*/

.blog-posts {
  margin-bottom: 10px;
}

.blog-posts-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.blog-post-item > a {
  position: relative;
  background: var(--border-gradient-onyx);
  height: 100%;
  box-shadow: var(--shadow-4);
  border-radius: 16px;
  z-index: 1;
}

.blog-post-item > a::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: var(--eerie-black-1);
  z-index: -1;
}

.blog-banner-box {
  width: 100%;
  height: 200px;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}

.blog-banner-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-1);
}

.blog-post-item > a:hover .blog-banner-box img {
  transform: scale(1.08);
}

.blog-content {
  padding: 15px;
}

.blog-meta {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
}

.blog-meta :is(.blog-category, time) {
  color: var(--light-gray-70);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
}

.blog-meta .dot {
  background: var(--light-gray-70);
  width: 4px;
  height: 4px;
  border-radius: 4px;
}

.blog-item-title {
  margin-bottom: 10px;
  line-height: 1.3;
  font-weight: var(--fw-500);
  transition: var(--transition-1);
}

/* Blue headline hover */
.blog-post-item > a:hover .blog-item-title {
  color: var(--blue-primary);
}

.blog-text {
  color: var(--light-gray);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
  line-height: 1.6;
}

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

.mapbox {
  position: relative;
  height: 250px;
  width: 100%;
  border-radius: 16px;
  margin-bottom: 30px;
  border: 1px solid var(--jet);
  overflow: hidden;
}

.mapbox figure {
  height: 100%;
}

.mapbox iframe {
  width: 100%;
  height: 100%;
  border: none;
  filter: grayscale(1) contrast(1.1);
}

.contact-form {
  margin-bottom: 10px;
}

.form-title {
  margin-bottom: 20px;
}

.input-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px;
  margin-bottom: 25px;
}

.form-input {
  color: var(--white-2);
  font-size: var(--fs-6);
  font-weight: var(--fw-400);
  padding: 13px 20px;
  border: 1px solid var(--jet);
  border-radius: 14px;
  outline: none;
  background-color: var(--eerie-black-1);
}

.form-input::placeholder {
  font-weight: var(--fw-500);
  color: var(--light-gray-70);
}

.form-input:focus {
  border-color: var(--blue-primary);
}

/* Message box */
textarea.form-input {
  min-height: 100px;
  height: 120px;
  max-height: 200px;
  resize: vertical;
  margin-bottom: 25px;
}

textarea.form-input::-webkit-resizer {
  display: none;
}

/* Form field grouping and labels */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.input-group.full-width {
  grid-column: 1 / -1;
}
.form-label {
  font-size: var(--fs-7);
  color: var(--light-gray);
}
.required {
  color: var(--accent-gold);
}
.form-error {
  color: #f87171; /* red accent for errors */
  font-size: var(--fs-7);
  margin-bottom: 10px;
}

.form-input:focus:invalid {
  border-color: var(--bittersweet-shimmer);
}

/* Hybrid Button: brown base, blue hover */
.form-btn {
  position: relative;
  width: 100%;
  background: linear-gradient(
    135deg,
    var(--brown-elevated),
    var(--brown-soft)
  );
  color: var(--accent-gold);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 14px;
  font-size: var(--fs-6);
  text-transform: capitalize;
  box-shadow: var(--shadow-3);
  border: 1px solid var(--brown-border);
  z-index: 1;
  transition: var(--transition-1);
}

.form-btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--bg-gradient-jet);
  border-radius: inherit;
  z-index: -1;
  transition: var(--transition-1);
}

.form-btn ion-icon {
  font-size: 16px;
}

/* On hover: blue takes over */
.form-btn:hover {
  background: linear-gradient(
    135deg,
    var(--blue-primary),
    var(--blue-primary-soft)
  );
  color: var(--white-1);
  border-color: var(--blue-primary);
}

.form-btn:hover::before {
  background: transparent;
}

.form-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.form-btn:disabled:hover {
  background: linear-gradient(
    135deg,
    var(--brown-elevated),
    var(--brown-soft)
  );
  border-color: var(--brown-border);
}

/*-----------------------------------*\
  #RESPONSIVE
\*-----------------------------------*/

/* >= 450px */
@media (min-width: 450px) {
  .clients-item {
    min-width: calc(33.33% - 10px);
  }

  .project-img,
  .blog-banner-box {
    height: auto;
  }
}

/* >= 580px */
@media (min-width: 580px) {
  :root {
    --fs-1: 32px;
    --fs-2: 24px;
    --fs-3: 26px;
    --fs-4: 18px;
    --fs-6: 15px;
    --fs-7: 15px;
    --fs-8: 12px;
  }

  .sidebar,
  article {
    width: 520px;
    margin-inline: auto;
    padding: 30px;
  }

  .article-title {
    font-weight: var(--fw-600);
    padding-bottom: 15px;
  }

  .article-title::after {
    height: 4px;
  }

  .icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    font-size: 18px;
  }

  main {
    margin-top: 60px;
    margin-bottom: 100px;
  }

  .sidebar {
    max-height: 180px;
    margin-bottom: 30px;
  }

  .sidebar.active {
    max-height: 580px;
  }

  .sidebar-info {
    gap: 25px;
  }

  .avatar-box {
    border-radius: 28px;
  }

  .avatar-box img {
    width: 120px;
  }

  .info-content .name {
    margin-bottom: 15px;
  }

  .info-content .title {
    padding: 5px 18px;
  }

  .info_more-btn {
    top: -30px;
    right: -30px;
    padding: 10px 15px;
  }

  .info_more-btn span {
    display: block;
    font-size: var(--fs-8);
  }

  .info_more-btn ion-icon {
    display: none;
  }

  .separator {
    margin: 32px 0;
  }

  .contacts-list {
    gap: 20px;
  }

  .contact-info {
    max-width: calc(100% - 64px);
    width: calc(100% - 64px);
  }

  .navbar {
    border-radius: 20px 20px 0 0;
  }

  .navbar-list {
    gap: 20px;
  }

  .navbar-link {
    --fs-8: 14px;
  }

  .about .article-title {
    margin-bottom: 20px;
  }

  .about-text {
    margin-bottom: 40px;
  }

  .service-item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 18px;
    padding: 30px;
  }

  .service-icon-box {
    margin-bottom: 0;
    margin-top: 5px;
  }

  .service-content-box {
    text-align: left;
  }

  .testimonials-title {
    margin-bottom: 25px;
  }

  .testimonials-list {
    gap: 30px;
    margin: 0 -30px;
    padding: 30px 30px 35px;
  }

  .content-card {
    padding: 30px;
    padding-top: 25px;
  }

  .testimonials-avatar-box {
    transform: translate(30px, -30px);
    border-radius: 20px;
  }

  .testimonials-avatar-box img {
    width: 80px;
  }

  .testimonials-item-title {
    margin-bottom: 10px;
    margin-left: 95px;
  }

  .testimonials-text {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .modal-container {
    padding: 20px;
  }

  .testimonials-modal {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: 25px;
    padding: 30px;
    border-radius: 20px;
  }

  .modal-img-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .modal-avatar-box {
    border-radius: 18px;
    margin-bottom: 0;
  }

  .modal-avatar-box img {
    width: 65px;
  }

  .modal-img-wrapper > img {
    display: block;
    flex-grow: 1;
    width: 35px;
  }

  .clients-list {
    gap: 50px;
    margin: 0 -30px;
    padding: 45px;
    scroll-padding-inline: 45px;
  }

  .clients-item {
    min-width: calc(33.33% - 35px);
  }

  .timeline-list {
    margin-left: 65px;
  }

  .timeline-item:not(:last-child)::before {
    left: -40px;
  }

  .timeline-item::after {
    height: 8px;
    width: 8px;
    left: -43px;
  }

  .skills-item:not(:last-child) {
    margin-bottom: 25px;
  }

  .project-img,
  .blog-banner-box {
    border-radius: 16px;
  }

  .blog-posts-list {
    gap: 30px;
  }

  .blog-content {
    padding: 25px;
  }

  .mapbox {
    height: 380px;
    border-radius: 18px;
  }

  .input-wrapper {
    gap: 30px;
    margin-bottom: 30px;
  }

  .form-input {
    padding: 15px 20px;
  }

  textarea.form-input {
    margin-bottom: 30px;
  }

  .form-btn {
    --fs-6: 16px;
    padding: 16px 20px;
  }

  .form-btn ion-icon {
    font-size: 18px;
  }
}

/* >= 768px */
@media (min-width: 768px) {
  .sidebar,
  article {
    width: 700px;
  }

  .has-scrollbar::-webkit-scrollbar-button {
    width: 100px;
  }

  .contacts-list {
    grid-template-columns: 1fr 1fr;
    gap: 30px 15px;
  }

  .navbar-link {
    --fs-8: 15px;
  }

  .testimonials-modal {
    gap: 35px;
    max-width: 680px;
  }

  .modal-avatar-box img {
    width: 80px;
  }

  .article-title {
    padding-bottom: 20px;
  }

  .filter-select-box {
    display: none;
  }

  .filter-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 25px;
    padding-left: 5px;
    margin-bottom: 30px;
  }

  .filter-item button {
    color: var(--light-gray);
    font-size: var(--fs-5);
    transition: var(--transition-1);
  }

  .filter-item button:hover {
    color: var(--blue-primary-soft);
  }

  .filter-item button.active {
    color: var(--blue-primary);
  }

  .project-list,
  .blog-posts-list {
    grid-template-columns: 1fr 1fr;
  }

  .input-wrapper {
    grid-template-columns: 1fr 1fr;
  }

  .form-btn {
    width: max-content;
    margin-left: auto;
  }
}

/* >= 1024px */
@media (min-width: 1024px) {
  .sidebar,
  article {
    width: 950px;
    box-shadow: var(--shadow-5);
  }

  main {
    margin-bottom: 60px;
  }

  .main-content {
    position: relative;
    width: max-content;
    margin: auto;
  }

  .navbar {
    position: absolute;
    bottom: auto;
    top: 0;
    left: auto;
    right: 0;
    width: max-content;
    border-radius: 0 20px;
    padding: 0 20px;
    box-shadow: none;
  }

  .navbar-list {
    gap: 30px;
    padding: 0 20px;
  }

  .navbar-link {
    font-weight: var(--fw-500);
  }

  .service-list {
    grid-template-columns: 1fr 1fr;
    gap: 20px 25px;
  }

  .testimonials-item {
    min-width: calc(50% - 15px);
  }

  .clients-item {
    min-width: calc(25% - 38px);
  }

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

  .blog-banner-box {
    height: 230px;
  }
}

/* >= 1250px */
@media (min-width: 1250px) {
  body::-webkit-scrollbar {
    width: 16px;
  }

  body::-webkit-scrollbar-track {
    background: var(--smoky-black);
  }

  body::-webkit-scrollbar-thumb {
    border: 4px solid var(--smoky-black);
    background: rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    box-shadow:
      inset 1px 1px 0 rgba(255, 255, 255, 0.12),
      inset -1px -1px 0 rgba(255, 255, 255, 0.12);
  }

  body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.18);
  }

  body::-webkit-scrollbar-button {
    height: 60px;
  }

  .sidebar,
  article {
    width: auto;
  }

  article {
    min-height: 100%;
  }

  main {
    max-width: 1200px;
    margin-inline: auto;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 25px;
  }

  .main-content {
    min-width: 75%;
    width: 75%;
    margin: 0;
  }

  .sidebar {
    position: sticky;
    top: 60px;
    max-height: max-content;
    height: 100%;
    margin-bottom: 0;
    padding-top: 60px;
    z-index: 1;
  }

  .sidebar-info {
    flex-direction: column;
  }

  .avatar-box img {
    width: 150px;
  }

  .info-content .name {
    white-space: nowrap;
    text-align: center;
  }

  .info-content .title {
    margin: auto;
  }

  .info_more-btn {
    display: none;
  }

  .sidebar-info_more {
    opacity: 1;
    visibility: visible;
  }

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

  .contact-info :is(.contact-link) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .contact-info :is(.contact-link, time, address) {
    --fs-7: 14px;
    font-weight: var(--fw-300);
  }

  .separator:last-of-type {
    margin: 15px 0;
    opacity: 0;
  }

  .social-list {
    justify-content: center;
  }

  .timeline-text {
    max-width: 700px;
  }
}

/*-----------------------------------*\
  # NAVBAR LIGHT THEME OVERRIDE
\*-----------------------------------*/
body.light-theme .navbar {
  background: linear-gradient(to top,
    rgba(255, 255, 255, 0.95),
    rgba(249, 246, 242, 0.95)
  );
  border-color: var(--brown-border);
  box-shadow: var(--shadow-1);
}

/* Ensure the theme toggle is always visible on small screens.  When the nav
   bar collapses on mobile, the toggle can be obscured.  We fix this by
   positioning it above the bottom nav for viewports under 580px. */
/*
  Ensure the theme toggle remains visible on mobile and tablet screens.
  When the navbar collapses on smaller devices, the toggle can become
  obscured.  We fix this by making it a floating button anchored to
  the bottom right of the viewport for viewports below 768px.  This
  mirrors the pattern used by many mobile apps and keeps the toggle
  accessible without overlapping content.
*/
@media (max-width: 768px) {
  .theme-btn {
    position: fixed;
    bottom: 80px;
    right: 16px;
    margin-left: 0;
    z-index: 1100;
  }
}


@media (max-width: 580px) {
  .sidebar {
    max-height: 124px;
  }

  .sidebar-info {
    padding-bottom: 4px;
  }
}

/* Ensure bottom navbar stays above fixed banners */
.navbar {
  z-index: 1101;
}

/* Real bullets for resume experience lists */
.timeline-item ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin-top: 0.5rem;
}

.timeline-item ul li {
  list-style: disc;
  display: list-item;
  margin-bottom: 0.4rem;
}

/* Experience timeline text and bullets (standardised) */
.timeline-summary {
  color: var(--light-gray);
  font-weight: var(--fw-300);
  line-height: 1.6;
}

.timeline-bullets {
  list-style: disc;
  padding-left: 1.25rem;
  margin-top: 0.5rem;
  color: var(--light-gray);
  font-weight: var(--fw-300);
}

.timeline-bullets li {
  list-style: disc;
  display: list-item;
  margin-bottom: 0.4rem;
}


/* Reduce extra horizontal spacing */
main {
  margin-left: 4px;
  margin-right: 4px;
}

/* Optional: make cards use full width on small screens */
@media (max-width: 580px) {
  .sidebar,
  article {
    width: 95%;
    margin-inline: 0;
  }
}


/* Recommendation cards mobile layout fix */
.rec-role {
  display: block;
  font-weight: 400;
  opacity: 0.9;
}

@media (max-width: 580px) {
  .recommendation-card {
    padding: 0.85rem;
    gap: 0.75rem;
    max-height: none;
  }

  .recommendation-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .recommendation-title {
    font-size: 0.95rem;
    line-height: 1.25;
    margin: 0;
  }

  .rec-role {
    font-size: 0.85rem;
    line-height: 1.2;
  }

  .recommendation-text {
    font-size: 0.9rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .recommendation-card.expanded .recommendation-text {
    -webkit-line-clamp: unset;
    overflow: visible;
  }
}


/* Label row (label + info icon) */
.form-label-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Tooltip wrapper */
.info-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: help;
  outline: none;
}

/* The little "i" circle */
.info-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  border: 1px solid currentColor;
  opacity: 0.85;
}

/* Tooltip bubble */
.tooltip-text {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;                /* anchor to right edge instead of center */
  left: auto;
  transform: translateY(0);

  width: min(320px, 85vw);
  max-width: 90vw;

  padding: 10px 12px;
  border-radius: 10px;

  background: rgba(15, 23, 42, 0.95);
  color: #fff;
  font-size: 12px;
  line-height: 1.35;

  box-shadow: 0 10px 30px rgba(0,0,0,0.25);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  z-index: 9999;
}

.tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 12px;   /* aligns arrow under the icon */
  left: auto;

  border-width: 7px;
  border-style: solid;
  border-color: rgba(15, 23, 42, 0.95) transparent transparent transparent;
}

.info-tooltip:hover .tooltip-text,
.info-tooltip:focus .tooltip-text {
  opacity: 1;
  visibility: visible;
  transform: translateY(-2px);
}

/* Light theme tweak */
body.light-theme .tooltip-text {
  background: rgba(17, 24, 39, 0.95);
}
body.light-theme .tooltip-text::after {
  border-color: rgba(17, 24, 39, 0.95) transparent transparent transparent;
}



/* Put this at the VERY END of style.css */
.form-label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  position: relative;
}

.form-label-row .info-tooltip {
  margin-left: auto;
  position: static; /* tooltip will position relative to label row */
}

.form-label-row .tooltip-text {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  left: auto;
  transform: none;
  width: min(320px, calc(100vw - 48px));
  max-width: calc(100vw - 48px);
}

.form-label-row .tooltip-text::after {
  left: auto;
  right: 12px;
  transform: none;
}

.form-label-row .info-tooltip:hover .tooltip-text,
.form-label-row .info-tooltip:focus .tooltip-text {
  transform: translateY(-2px);
}

@media (max-width: 580px) {
  .form-label-row .tooltip-text {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
    right: 0;
  }
}