/* =========================================================
   Joomla 6 / Cassiopeia child template
   File: /media/templates/site/sagacicweb_extended/css/user.css

   Palette origin:
   Base = hsla(240, 50%, 50%, 1)

   Relationship map:
   - Analogous: 210, 270
   - Complementary: 60
   - Triadic: 0, 120
   - Split-complementary: 30, 90
   - Tetradic / Square set from 240 origin: 330, 60, 150
   ========================================================= */

/* =========================================================
   1. Design tokens
   ========================================================= */
:root {
  --site-max-width: 1200px;

  /* Base family */
  --color-base: hsla(240, 50%, 50%, 1);
  --color-base-strong: hsla(240, 55%, 38%, 1);
  --color-base-deep: hsla(240, 60%, 28%, 1);
  --color-base-darkest: hsla(240, 55%, 16%, 1);
  --color-base-soft: hsla(240, 45%, 58%, 1);
  --color-base-pale: hsla(240, 35%, 88%, 1);

  /* Related hues */
  --color-analogous-left: hsla(210, 50%, 50%, 1);
  --color-analogous-right: hsla(270, 50%, 50%, 1);
  --color-complement: hsla(60, 50%, 50%, 1);
  --color-triad-1: hsla(0, 50%, 50%, 1);
  --color-triad-2: hsla(120, 50%, 50%, 1);
  --color-split-1: hsla(30, 50%, 50%, 1);
  --color-split-2: hsla(90, 50%, 50%, 1);
  --color-square-1: hsla(330, 50%, 50%, 1);
  --color-square-2: hsla(60, 50%, 50%, 1);
  --color-square-3: hsla(150, 50%, 50%, 1);

  /* Neutrals and surfaces */
  --color-page-bg: hsla(240, 20%, 98%, 1);
  --color-surface: hsla(0, 0%, 100%, 1);
  --color-surface-soft: hsla(240, 25%, 96%, 1);
  --color-surface-muted: hsla(240, 18%, 92%, 1);
  --color-border: hsla(240, 20%, 82%, 1);
  --color-border-strong: hsla(240, 24%, 70%, 1);

  /* Text */
  --color-text: hsla(240, 30%, 16%, 1);
  --color-text-soft: hsla(240, 18%, 34%, 1);
  --color-text-muted: hsla(240, 16%, 46%, 1);
  --color-text-light: hsla(0, 0%, 95%, 1);

  /* Header / nav */
  --color-header-bg-top: hsla(262.5, 85%, 40%, 1);
  --color-header-bg-middle: hsla(240.5, 50%, 22%, 1);
  --color-header-bg-bottom: hsla(240, 75%, 50%, 1);
  --color-header-border: hsla(240, 100%, 65%, 1);
  --color-menu-link: var(--color-text-light);
  --color-menu-hover-bg: hsla(240, 100%, 50%, 0.35);
  --color-menu-hover-text: hsla(0, 0%, 100%, 1);
  --color-menu-active-bg: hsla(240, 100%, 50%, 0.5);
  --color-menu-active-text: hsla(240, 100%, 100%, 1);
  --color-mobile-panel-bg: hsla(240, 45%, 16%, 1);
  --color-mobile-item-border: hsla(240, 30%, 30%, 1);

  /* Links */
  --color-link: hsla(210, 55%, 42%, 1);
  --color-link-hover: hsla(270, 50%, 42%, 1);
  --color-link-visited: hsla(330, 45%, 40%, 1);

  /* Buttons */
  --color-button-primary-bg: hsla(240, 50%, 42%, 1);
  --color-button-primary-bg-hover: hsla(240, 55%, 34%, 1);
  --color-button-primary-text: hsla(0, 0%, 100%, 1);

  --color-button-secondary-bg: hsla(210, 42%, 92%, 1);
  --color-button-secondary-bg-hover: hsla(210, 42%, 86%, 1);
  --color-button-secondary-text: hsla(240, 30%, 18%, 1);
  --color-button-secondary-border: hsla(210, 28%, 70%, 1);

  --color-button-accent-bg: hsla(60, 50%, 50%, 1);
  --color-button-accent-bg-hover: hsla(60, 55%, 44%, 1);
  --color-button-accent-text: hsla(240, 45%, 14%, 1);

  /* Cards */
  --color-card-bg: hsla(0, 0%, 100%, 1);
  --color-card-border: hsla(240, 22%, 84%, 1);
  --color-card-shadow: hsla(240, 28%, 18%, 0.10);
  --color-card-shadow-hover: hsla(240, 28%, 18%, 0.16);

  /* Forms */
  --color-input-bg: hsla(0, 0%, 100%, 1);
  --color-input-border: hsla(240, 22%, 76%, 1);
  --color-input-border-focus: hsla(270, 50%, 46%, 1);
  --color-input-ring: hsla(270, 50%, 46%, 0.18);
  --color-placeholder: hsla(240, 12%, 54%, 1);

  /* Footer */
  --color-footer-bg: hsla(240, 45%, 16%, 1);
  --color-footer-text: hsla(240, 20%, 88%, 1);
  --color-footer-link: hsla(60, 50%, 66%, 1);
  --color-footer-link-hover: hsla(30, 55%, 72%, 1);

  /* Effects */
  --radius-sm: 0.35rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --shadow-sm: 0 2px 8px hsla(240, 25%, 12%, 0.08);
  --shadow-md: 0 4px 18px hsla(240, 25%, 12%, 0.12);
  --shadow-lg: 0 8px 24px hsla(240, 25%, 12%, 0.16);
  --header-shadow: 0 4px 18px hsla(240, 40%, 10%, 0.22);
  --transition-standard: 180ms ease;
}

/* =========================================================
   2. Global base
   ========================================================= */
html,
body {
  background-color: var(--color-page-bg);
  color: var(--color-text);
}

body {
  line-height: 1.6;
}

a {
  color: var(--color-link);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
  transition:
    color var(--transition-standard),
    text-decoration-color var(--transition-standard);
}

a:hover,
a:focus-visible {
  color: var(--color-link-hover);
}

a:visited {
  color: var(--color-link-visited);
}

img {
  max-width: 100%;
  height: auto;
}

/* =========================================================
   3. Header layout and header band
   ========================================================= */
.container-header {
  display: grid;
  grid-template: auto / auto 1fr;
  grid-template-areas: "logo nav";
  align-items: center;
  gap: 1rem 2rem;

  background: linear-gradient(
    180deg,
    var(--color-header-bg-top) 0%,
    var(--color-header-bg-middle) 20%,
    var(--color-header-bg-middle) 65%,
    var(--color-header-bg-bottom) 100%
  );
  color: var(--color-text-light);
  border-bottom: 1px solid var(--color-header-border);
  box-shadow: var(--header-shadow);
  padding: 0.75rem 1rem;
}

.container-header .grid-child {
  padding: 0 0.5rem;
}

.container-header .navbar-brand {
  padding-top: 0;
  color: var(--color-text-light);
  text-decoration: none;
}

.container-header nav {
  margin-top: 0;
  padding: 0;
}

.container-header .grid-child:has(.navbar-brand) {
  grid-area: logo;
}

.container-header .container-nav {
  grid-area: nav;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.brand-logo img {
  max-width: 40px !important;
  height: auto;
  display: block;
}

/* =========================================================
   4. Main menu
   ========================================================= */
.container-header .mod-menu {
  display: flex;
  font-weight: 600;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.container-header .mod-menu > li {
  margin: 0;
  position: relative;
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > button,
.container-header .mod-menu > li > span {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-md);
  color: var(--color-menu-link);
  text-decoration: none;
  line-height: 1.2;
  transition:
    background-color var(--transition-standard),
    color var(--transition-standard),
    box-shadow var(--transition-standard),
    transform var(--transition-standard);
}

/* Hover / focus */
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus-visible,
.container-header .mod-menu > li > button:hover,
.container-header .mod-menu > li > button:focus-visible {
  background-color: var(--color-menu-hover-bg);
  color: var(--color-menu-hover-text);
  text-decoration: none;
  outline: none;
  box-shadow: 0 0 0 1px hsla(285, 100%, 65%, 0.35);
}

/* Reset generic active color to avoid over-highlighting */
.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.current > a,
.container-header .mod-menu > li > a[aria-current="page"] {
  color: var(--color-menu-link);
}

/* Highlight the Projects button when a child page is active */
.nav-item.deeper.parent.current .mod-menu__toggle-sub {
  /* match whatever .current styles you're using on regular <a> tags */
  background-color: var(--color-menu-active-bg);
  color: var(--color-menu-active-text);
}


/* Current-page highlight */
.container-header .mod-menu > li.current > a,
.container-header .mod-menu > li > a[aria-current="page"],
.container-header .mod-menu > li.active.current > a {
  background-color: var(--color-menu-active-bg);
  color: var(--color-menu-active-text);
}

/*
  Parent highlight for submenu sections such as Projects.

  This assumes Joomla marks the ancestor menu item with
  .active, .current, or a similar state when a child is current.
  That is commonly how Cassiopeia menu markup behaves.
*/
.container-header .mod-menu > li.parent.active > a,
.container-header .mod-menu > li.deeper.active > a,
.container-header .mod-menu > li.parent.current > a,
.container-header .mod-menu > li.deeper.current > a {
  background-color: var(--color-menu-active-bg);
  color: var(--color-menu-active-text);
}

.container-header .mod-menu > li > a:active,
.container-header .mod-menu > li > button:active {
  transform: translateY(1px);
}

/* =========================================================
   5. Dropdown submenu
   ========================================================= */
.container-header .mod-menu .mod-menu__sub {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 0.35rem;
}

.container-header .mod-menu .mod-menu__sub li > a {
  display: block;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
}

.container-header .mod-menu .mod-menu__sub li > a:hover,
.container-header .mod-menu .mod-menu__sub li > a:focus-visible {
  background-color: var(--color-surface-soft);
  color: var(--color-link-hover);
}

.container-header .mod-menu .mod-menu__sub li.current > a,
.container-header .mod-menu .mod-menu__sub li.active > a,
.container-header .mod-menu .mod-menu__sub li > a[aria-current="page"] {
  background-color: hsla(60, 50%, 88%, 1);
  color: var(--color-menu-active-text);
  font-weight: 600;
}

/* =========================================================
   6. Headings
   ========================================================= */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-base-deep);
  line-height: 1.2;
  margin-top: 0;
}

h1 {
  color: var(--color-base-strong);
}

h2 {
  color: var(--color-analogous-left);
}

h3 {
  color: var(--color-analogous-left);
}

h4,
h5,
h6 {
  color: var(--color-text);
}

/* =========================================================
   7. Buttons
   ========================================================= */
.button,
.btn,
a.btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.625rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: inherit;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--transition-standard),
    color var(--transition-standard),
    border-color var(--transition-standard),
    box-shadow var(--transition-standard),
    transform var(--transition-standard);
}

.button:hover,
.btn:hover,
a.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
  text-decoration: none;
}

/* Primary */
.button,
.btn-primary,
a.btn-primary,
button.btn-primary {
  background-color: var(--color-button-primary-bg);
  color: var(--color-button-primary-text);
  box-shadow: var(--shadow-sm);
}

.button:hover,
.button:focus-visible,
.btn-primary:hover,
.btn-primary:focus-visible,
a.btn-primary:hover,
a.btn-primary:focus-visible,
button.btn-primary:hover,
button.btn-primary:focus-visible {
  background-color: var(--color-button-primary-bg-hover);
  color: var(--color-button-primary-text);
  box-shadow: var(--shadow-md);
  outline: none;
}

/* Secondary */
.btn-secondary,
a.btn-secondary,
button.btn-secondary {
  background-color: var(--color-button-secondary-bg);
  color: var(--color-button-secondary-text);
  border-color: var(--color-button-secondary-border);
}

.btn-secondary:hover,
.btn-secondary:focus-visible,
a.btn-secondary:hover,
a.btn-secondary:focus-visible,
button.btn-secondary:hover,
button.btn-secondary:focus-visible {
  background-color: var(--color-button-secondary-bg-hover);
  color: var(--color-button-secondary-text);
  outline: none;
}

/* Accent */
.btn-accent,
a.btn-accent,
button.btn-accent {
  background-color: var(--color-button-accent-bg);
  color: var(--color-button-accent-text);
}

.btn-accent:hover,
.btn-accent:focus-visible,
a.btn-accent:hover,
a.btn-accent:focus-visible,
button.btn-accent:hover,
button.btn-accent:focus-visible {
  background-color: var(--color-button-accent-bg-hover);
  color: var(--color-button-accent-text);
  outline: none;
}

.button:active,
.btn:active,
button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
  transform: translateY(1px);
}

/* =========================================================
   8. Cards / boxed modules / article containers
   ========================================================= */
.card,
.moduletable,
.sidebar-card,
.item-content,
.com-content-article,
.com-content-category__items > .category-item,
.com-contact {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 14px var(--color-card-shadow);
}

.card,
.moduletable,
.item-content,
.com-content-article {
  padding: 1rem;
}

.card:hover,
.moduletable:hover,
.item-content:hover,
.com-content-article:hover {
  box-shadow: 0 8px 22px var(--color-card-shadow-hover);
}

/* =========================================================
   9. Forms
   ========================================================= */
input,
select,
textarea {
  width: 100%;
  max-width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-md);
  background-color: var(--color-input-bg);
  color: var(--color-text);
  font: inherit;
  transition:
    border-color var(--transition-standard),
    box-shadow var(--transition-standard),
    background-color var(--transition-standard);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-placeholder);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-input-border-focus);
  box-shadow: 0 0 0 4px var(--color-input-ring);
  outline: none;
}

/* Checkboxes / radios keep native width */
input[type="checkbox"],
input[type="radio"] {
  width: auto;
}

/* =========================================================
   10. Footer
   ========================================================= */
.footer,
.container-footer,
footer {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
  border-top: 1px solid hsla(240, 30%, 28%, 1);
}

.footer a,
.container-footer a,
footer a {
  color: var(--color-footer-link);
}

.footer a:hover,
.footer a:focus-visible,
.container-footer a:hover,
.container-footer a:focus-visible,
footer a:hover,
footer a:focus-visible {
  color: var(--color-footer-link-hover);
}

/* =========================================================
   11. Utility polish
   ========================================================= */
.text-center {
  text-align: center;
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
}

table {
  border-collapse: collapse;
  width: 100%;
  background-color: var(--color-surface);
}

th,
td {
  border: 1px solid var(--color-border);
  padding: 0.75rem;
}

th {
  background-color: var(--color-surface-soft);
  color: var(--color-base-deep);
}

.article-info-term {
    display: none;
}

/* =========================================================
   12. Specific Desktop Styling
   ========================================================= */
@media (min-width: 992px) {
  .com-content-article,
  .com-content-category-blog__item,
  .com-contact{
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* =========================================================
   13. Mobile styling
   ========================================================= */
@media (max-width: 991.98px) {
  .container-header {
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "nav";
    gap: 0.75rem 0;
    padding: 0.75rem 0.875rem;
  }

  .container-header .grid-child {
    padding: 0;
  }

  .container-header .grid-child:has(.navbar-brand) {
    display: flex;
    justify-content: center;
  }

  .container-header .container-nav {
    justify-content: stretch;
    width: 100%;
  }

  .container-header .mod-menu {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.35rem;
    width: 100%;
    padding: 0.5rem;
    background-color: var(--color-mobile-panel-bg);
    border: 1px solid var(--color-mobile-item-border);
    border-radius: var(--radius-lg);
  }

  .container-header .mod-menu > li {
    width: 100%;
  }

  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > button,
  .container-header .mod-menu > li > span {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    padding: 0.8rem 0.95rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
  }

  .container-header .mod-menu > li + li {
    border-top: 1px solid var(--color-mobile-item-border);
    padding-top: 0.35rem;
  }

  .container-header .mod-menu .mod-menu__sub {
    margin-top: 0.35rem;
    box-shadow: none;
  }
}