/* ==========================================================================
   gogallery — brand override for Joomla 4 Cassiopeia
   Reconstructs the original Flex/Helix3 look (recovered from gogallery_old
   cached CSS): vivid red accent on white, dark header with white logo,
   Open Sans typography. Loaded automatically by Cassiopeia as user.css.
   ========================================================================== */

/* --- Brand palette (from preset1.css.cache: #ff1926 dominant) ------------- */
:root {
  --gg-red:        #ff1926;   /* primary accent */
  --gg-red-dark:   #e5000d;   /* hover / active */
  --gg-red-soft:   #ff4c56;
  --gg-ink:        #1a1a1a;   /* dark header */
  --gg-grey:       #f5f5f5;
  --gg-border:     #e2e2e2;

  /* Override Cassiopeia's own brand variables so buttons/links/menus recolour */
  --cassiopeia-color-primary: #ff1926;
  --cassiopeia-color-link:    #ff1926;
  --cassiopeia-color-hover:   #e5000d;
  --cassiopeia-color-brand:   #ff1926;
  --link-color:               #ff1926;
  --link-hover-color:         #e5000d;
}

/* --- Typography: Open Sans (as the original used) ------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');
body {
  font-family: "Open Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 300;
  color: #222;
}
h1, h2, h3, h4, h5, h6 { font-weight: 600; }

/* --- Links / accents ----------------------------------------------------- */
a { color: var(--gg-red); }
a:hover, a:focus { color: var(--gg-red-dark); }

/* --- Header: dark bar with the white gogallery logo ---------------------- */
/* Cassiopeia markup: <div class="header container-header full-width"> with
   <a class="brand-logo"> / <span class="navbar-brand"> inside. */
.header.container-header,
.container-header {
  background: var(--gg-ink);
  padding-block: .5rem;
}
.container-header .navbar-brand,
.container-header .brand-logo a,
.container-header a { color: #fff; }
.container-header .brand-logo img { max-height: 50px; width: auto; }

/* --- Primary navigation -------------------------------------------------- */
/* Cassiopeia menu module renders ul.mod-menu (metismenu). Style whatever nav
   sits in the header/nav container. */
.container-header .mod-menu,
.container-nav,
.container-nav .mod-menu {
  background: var(--gg-ink);
}
.mod-menu > li > a,
.navbar .nav-item > a { color: #f2f2f2; }
.mod-menu > li > a:hover,
.mod-menu > li.active > a,
.mod-menu > li.current > a,
.navbar .nav-item.active > a {
  color: #fff;
  border-bottom: 2px solid var(--gg-red);
}

/* --- Buttons ------------------------------------------------------------- */
.btn-primary,
.button-primary,
.btn.btn-primary {
  background-color: var(--gg-red);
  border-color: var(--gg-red);
}
.btn-primary:hover,
.btn.btn-primary:hover {
  background-color: var(--gg-red-dark);
  border-color: var(--gg-red-dark);
}

/* --- Article / blog accents (com_content) -------------------------------- */
.com-content-category-blog__item .page-header h2 a,
.article-list .page-header h2 a,
.item-title a { color: #222; }
.com-content-category-blog__item .page-header h2 a:hover,
.item-title a:hover { color: var(--gg-red); }

.article-info-term,
.category-name { color: var(--gg-red); }

/* subtle card treatment for the gallery grid */
.com-content-category-blog__item {
  border: 1px solid var(--gg-border);
  border-radius: 4px;
  padding: 1rem;
  background: #fff;
  transition: box-shadow .2s ease;
}
.com-content-category-blog__item:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
}

/* --- Footer -------------------------------------------------------------- */
.footer,
.container-footer {
  background: var(--gg-ink);
  color: #cfcfcf;
}
.footer a { color: #fff; }

/* --- Pagination accent --------------------------------------------------- */
.pagination .page-item.active .page-link {
  background: var(--gg-red);
  border-color: var(--gg-red);
}
.pagination .page-link { color: var(--gg-red); }