/* itp-user-css v0.3.11 */
/*
 * ITP child template of Cassiopeia - site styling.
 *
 * Loaded automatically by Cassiopeia's inherited "template.user" asset
 * (Joomla resolves template assets child-first), so no asset registration and
 * no index.php are needed. Put site-wide overrides here.
 *
 * Cassiopeia derives most of its colours from a few CSS custom properties; the
 * header background is
 *   linear-gradient(135deg, --cassiopeia-color-primary, --cassiopeia-color-hover)
 * (see Cassiopeia's template.css .container-header).
 *
 * Palette, matched to the ITP logo's green (sampled #339f6a):
 *   header / brand green   #339f6a
 *   darker green           #237c53
 *   link green             #1f6f4a
 */

:root {
  /* Cassiopeia colour scheme */
  --cassiopeia-color-primary: #339f6a;
  --cassiopeia-color-hover: #237c53;
  --cassiopeia-color-link: #1f6f4a;
  --cassiopeia-color-brand: #ffffff;

  /* Bootstrap 5.3 link variables (Cassiopeia resets these too) */
  --link-color: #1f6f4a;
  --link-color-rgb: 31, 111, 74;
  --link-hover-color: #14502f;
  --link-hover-color-rgb: 20, 80, 47;
}

/* Page background: the photo, veiled by white (80% white overlay => the photo
 * shows at ~20%). Fixed so it covers every page behind the content. */
body {
  background-color: #fff;
  background-image:
    linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)),
    url("../images/sable-flow-_ZojfXxQ0vw-unsplash.jpg");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Header: keep the brand green but flat instead of Cassiopeia's diagonal
   gradient, for a calmer, more modern header. */
.container-header {
  background-image: none;
  background-color: var(--cassiopeia-color-primary);
}

/* The brand/site title sits on the green header - keep it white and legible. */
.container-header .navbar-brand,
.container-header .navbar-brand a,
.container-header .site-description {
  color: #fff;
}

/* The ITP logo (media/templates/site/itp/images/logo.png) is green artwork on
   an opaque white background, so present it in a white rounded badge on the
   green header. */
.container-header .navbar-brand img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  object-position: center;
  background-color: #fff;
  border-radius: .5rem;
  padding: .2rem;
}

/* ------------------------------------------------------------------ *
 * Brand polish
 * ------------------------------------------------------------------ */

/* Utility strip (topbar position) - thin white strip, themed green text.
 * A flex row (right-aligned) so the top menu and the search sit side by side. */
.container-topbar {
  background-color: #ffffff;
  color: #1f6f4a;
  border-bottom: 1px solid #d9ebe1;
  font-size: .875rem;
  padding: .2rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .25rem 1rem;
}
.container-header .container-topbar .mod-menu > li > a,
.container-header .container-topbar .mod-menu > li > a:link,
.container-header .container-topbar .mod-menu > li > a:visited,
.container-topbar a {
  color: #1f6f4a;
}
.container-topbar a:hover,
.container-topbar a:focus {
  color: #14502f;
  text-decoration: underline;
}
.container-topbar .mod-menu {
  justify-content: flex-end;
}

/* Org name above the main menu (Cassiopeia renders the logo OR the site title,
 * never both, so the name is added as text here; the logo <img> alt carries the
 * accessible name, and this text scales/wraps for responsiveness). */
.container-header .container-nav::before {
  content: "Institute of Training Professionals";
  flex: 1 0 100%;
  color: #fff;
  font-weight: 600;
  font-size: clamp(1.1rem, 1.7vw, 1.7rem);
  line-height: 1.15;
  margin: 0 0 .35rem;
  padding-inline-start: 20px;
  box-sizing: border-box;
}
@media (max-width: 575.98px) {
  .container-header .container-nav::before { display: none; }
}

/* Header layout: utility strip across the top; then the logo on the LEFT with
 * the main nav immediately to its right (org name above the menu). Flex so the
 * strip spans its own row. */
.container-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  overflow: visible;
}
.container-header > .container-topbar { flex: 1 0 100%; }
.container-header > .grid-child:not(.container-nav) {
  flex: 0 0 auto;
  width: 84px;
  max-width: none;
  padding: 0;
  /* Shift the logo+menu group left by the logo box so the MENU (Home) lines up
   * with the site's main panel (Bootstrap xxl container = 1320px). */
  margin-inline-start: max(0px, calc((100% - 1320px) / 2 - 84px));
  margin-inline-end: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container-header > .container-nav {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding-inline-start: 0;
  padding-bottom: 0;
  justify-content: flex-start;
  text-align: left;
}
.container-header .navbar-brand { margin-inline-end: 0; }

/* Main menu left-aligned, packed to its content so it sits next to the logo;
 * org name above it. */
.container-header .container-nav .mod-menu {
  flex: 0 1 auto;
  flex-wrap: wrap;
  margin-inline-end: auto;
  justify-content: flex-start;
  text-align: left;
}
.container-header .container-nav::before { text-align: left; }

/* Chevron inline to the RIGHT of the parent item's text. */
.container-header .metismenu.mod-menu > li {
  display: inline-flex;
  align-items: center;
}
.container-header .metismenu.mod-menu > li > .mm-toggler {
  position: static;
  height: auto;
}
@media (max-width: 767.98px) {
  .container-header > .container-topbar,
  .container-header > .grid-child:not(.container-nav),
  .container-header > .container-nav { flex: 1 0 100%; }
}

/* Line chevron on items that have sub-items (instead of Cassiopeia's solid
 * triangle, which was rendering half-clipped). */
.container-header .metismenu.mod-menu > li > .mm-toggler {
  color: #fff;
  background: none;
  border: 0;
  height: auto;
  padding: 0 .2em;
  display: inline-flex;
  align-items: center;
}
.container-header .metismenu.mod-menu .mm-toggler:after {
  content: "";
  display: inline-block;
  width: .42em;
  height: .42em;
  margin-left: .35em;
  border: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-.12em);
}
.container-header .metismenu.mod-menu .mm-toggler[aria-expanded="true"]:after {
  transform: rotate(-135deg) translateY(-.12em);
}

/* Desktop: hovering a parent opens its dropdown (no click needed), and the
 * parent item's background turns white so it blends with the dropdown panel. */
@media (min-width: 992px) {
  .container-header .metismenu.mod-menu > li:hover > .mm-collapse,
  .container-header .metismenu.mod-menu > li:focus-within > .mm-collapse {
    display: block !important;
  }
  .container-header .container-nav .metismenu.mod-menu > li:hover > a,
  .container-header .container-nav .metismenu.mod-menu > li:focus-within > a,
  .container-header .container-nav .metismenu.mod-menu > li.mm-active > a {
    background-color: #fff;
    color: #1f6f4a;
    text-decoration: none;
  }
}

/* Top nav links: white, top-level only (so submenu links keep their colour). */
.container-header .container-nav .mod-menu > li > a,
.container-header .container-nav .mod-menu > li > a:link,
.container-header .container-nav .mod-menu > li > a:visited {
  color: #fff;
}
.container-header .container-nav .mod-menu > li > a:hover,
.container-header .container-nav .mod-menu > li > a:focus {
  color: #eafff5;
  text-decoration: underline;
}
.container-header .container-nav .mod-menu > li.current > a,
.container-header .container-nav .mod-menu > li.active > a,
.container-header .container-nav .mod-menu > li > a[aria-current] {
  color: #fff;
  font-weight: 700;
}
/* Small arrow on items that have sub-items. */
.container-header .metismenu .mm-toggler:before { color: #fff; }

/* Dropdown submenus: white panel, green links (specific enough to win over the
 * top-level white rule above). */
.container-header .metismenu.mod-menu .mm-collapse,
.container-header .metismenu ul {
  background-color: #fff;
}
.container-header .metismenu.mod-menu .mm-collapse a,
.container-header .metismenu.mod-menu .mm-collapse a:link,
.container-header .metismenu.mod-menu .mm-collapse a:visited {
  color: #1f6f4a;
}
.container-header .metismenu.mod-menu .mm-collapse a:hover,
.container-header .metismenu.mod-menu .mm-collapse a:focus {
  color: #14502f;
  background-color: #f2f9f5;
}

/* Green breadcrumb band, echoing the old ITP site (#57c890 / dark-green text). */
nav.mod-breadcrumbs__wrapper {
  background-color: #57c890;
  border-radius: .25rem;
  padding: .3rem .6rem;
  margin-bottom: 1rem;
}
.mod-breadcrumbs.breadcrumb { margin: 0; }
.mod-breadcrumbs__here,
.mod-breadcrumbs__item a,
.mod-breadcrumbs__item span {
  color: #fff;
}
.mod-breadcrumbs__item a:hover { color: #eafff5; }

/* Right sidebar modules (e.g. DJ-ImageSlider): no card frame - just the content
 * on the page background. */
.container-sidebar-right .card {
  border: 0;
  background-color: transparent;
  border-radius: 0;
}
.container-sidebar-right .card-body {
  padding: 0;
}

/* ------------------------------------------------------------------ *
 * Phoca Gallery categories view (ITP override): one row per category
 * ------------------------------------------------------------------ */
.itp-phg-rows { margin: 0; padding: 0; }
.itp-phg-row {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1rem 0;
  border-bottom: 1px solid #e3e8e5;
}
.itp-phg-row:last-child { border-bottom: 0; }
.itp-phg-thumb { flex: 0 0 256px; max-width: 45%; }
.itp-phg-thumb img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #d9dfdc;
  border-radius: .25rem;
}
.itp-phg-noimg,
.itp-phg-lock {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  background: #f2f5f3;
  border-radius: .25rem;
  color: #8a938e;
  text-decoration: none;
}
.itp-phg-info { flex: 1 1 auto; min-width: 0; }
.itp-phg-title { margin: 0 0 .25rem; font-size: 1.15rem; }
.itp-phg-title a { color: var(--cassiopeia-color-link); text-decoration: none; }
.itp-phg-title a:hover { text-decoration: underline; }
.itp-phg-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .35rem;
  color: #5c6660;
  font-size: .875rem;
}
.itp-phg-label { color: #8a938e; }
.itp-phg-desc { color: #3f4842; }
@media (max-width: 575.98px) {
  .itp-phg-row { flex-direction: column; }
  .itp-phg-thumb { flex-basis: auto; max-width: 100%; }
}
.itp-phg-actions { margin-top: .4rem; }
.itp-phg-slideshow {
  display: inline-block;
  color: var(--cassiopeia-color-link);
  font-weight: 600;
  text-decoration: none;
}
.itp-phg-slideshow::before { content: "\25B6\00a0"; font-size: .8em; }
.itp-phg-slideshow:hover { text-decoration: underline; }

/* Hide Phoca Gallery's "Powered by Phoca Gallery" footer (no class of its own -
 * it is the div wrapping the phoca.cz link; Phoca also sets an inline
 * display:block, hence !important). CSS, not a template override, so Phoca's
 * default.php can be updated freely without divergence. */
div:has(> a[href*="phoca.cz"]) { display: none !important; }

/* ------------------------------------------------------------------ *
 * Footer: Facebook follow link
 * (Custom HTML module replacing the J3-era mod_nice_social_bookmark)
 * ------------------------------------------------------------------ */
.itp-foot-social { margin: 0; }
.itp-foot-social img { height: 44px; width: auto; vertical-align: middle; }

/* Header social icon (Custom HTML module replacing mod_nice_social_bookmark) */
.itp-social-icon {
  display: inline-block;
  line-height: 0;
  color: #fff;
  text-decoration: none;
}
.itp-social-icon img { display: block; width: 24px; height: 24px; }
.itp-social-icon svg { width: 24px; height: 24px; fill: currentColor; }
.itp-social-icon:hover { opacity: .8; }

/* ------------------------------------------------------------------ *
 * Mobile (the header collapses to a hamburger below 992px via the
 * "Collapse (Metismenu)" menu layout / Bootstrap navbar-expand-lg)
 * ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
  /* Stack: topbar, logo row, then the nav row */
  .container-header > .container-topbar,
  .container-header > .grid-child:not(.container-nav),
  .container-header > .container-nav { flex: 1 0 100%; }
  .container-header > .grid-child:not(.container-nav) { justify-content: flex-start; }

  /* Utility strip: menu on one line, search below (block flow avoids the
     flex-basis:100% Cassiopeia sets on .mod-menu) */
  .container-topbar { display: block; padding: .35rem .75rem; overflow: visible; }
  .container-topbar .mod-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    flex: none !important;
    width: 100% !important;
    margin: 0 !important;
    justify-content: flex-start !important;
  }
  .container-topbar .mod-menu > li { display: inline-block !important; width: auto !important; margin: 0 .75rem .25rem 0 !important; }
  .container-topbar .search { width: 100%; margin-top: .25rem; }

  /* Logo a bit smaller on phones */
  .container-header .navbar-brand img { width: 64px; height: 64px; }

  /* Nav: full width, hamburger on the RIGHT, menu expands full width below */
  .container-header .container-nav { flex-wrap: wrap; justify-content: space-between; padding-block: .35rem; }
  .container-header .container-nav .navbar { width: 100%; flex-wrap: wrap; padding: 0; }
  .container-header .container-nav .navbar .navbar-toggler { margin-inline-start: auto; }
  .container-header .container-nav .navbar .navbar-collapse { flex-basis: 100%; }

  /* Expanded menu: vertical list of white links on the green header */
  .container-header .container-nav .navbar .mod-menu { flex-direction: column; }
  .container-header .container-nav .navbar .mod-menu > li { width: 100%; }
  .container-header .container-nav .navbar .mod-menu > li > a { padding: .5rem 0; }

  /* Hide the header social icon on phones (the footer badge remains) */
  .container-header .container-nav .mod-custom { display: none; }
}