/*
  CogniWise — Cassiopeia customization
  ------------------------------------
  Install as: media/templates/site/cassiopeia/css/user.css
  (Joomla 4.1+ moved template CSS/JS/images out of templates/cassiopeia/ into media/ — the
  templates/ folder now only holds PHP layout files. Easiest path: admin → System → Site →
  Templates → Cassiopeia → "Cassiopeia Details and Files" → css folder → New → filename
  "user", type ".css" → paste this in → Save. The Template Manager's file editor already
  points at the correct real location for your Joomla version, so you don't need to navigate
  media/ by hand there — this path matters if you're editing directly via SFTP/shell instead.
  Cassiopeia loads user.css automatically after its own stylesheet if the file exists — no
  other config needed.)

  This file is organized in two parts. PART 1 uses generic HTML tags and Bootstrap 5's own
  standard classes (Cassiopeia is built on Bootstrap 5, so these are safe regardless of exact
  markup) and alone gets you most of the way to matching mockup/cogniwise_home_preview.html —
  correct colors, correct fonts, correct link/heading treatment. PART 2 targets Cassiopeia's
  own conventional class names (site-title, header, menu, article view) for the finer details.
  Those are common Cassiopeia conventions but I haven't inspected your live rendered HTML to
  confirm them against your specific Joomla 6 build — if a rule in Part 2 doesn't visibly do
  anything, view-source (or your browser's inspector) on the live page, find the real class name
  on that element, and swap it in. Part 1 alone will still carry the bulk of the visual identity
  even if every Part 2 selector needs adjusting.

  Reference: design/design-tokens.md in the project package for the full palette and reasoning.
  The actual logo image files (light/dark variants) and upload instructions are in media/cw/ —
  see media/cw/README.md. The .brand-logo rules below are confirmed against Joomla 6's own
  Cassiopeia source, not a guess, unlike the rest of Part 2.
*/

@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@300;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap');

:root {
  --cw-paper: #FAF8FC;
  --cw-paper-raised: #F1ECF7;
  --cw-ink: #211433;
  --cw-muted: #6E6480;
  --cw-line: #E3DCEC;
  --cw-brand: #6B0099;
  --cw-brand-strong: #3E0058;
  --cw-brand-tint: #EDE3F7;
  --cw-focus: #7A4FC4;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cw-paper: #150C22;
    --cw-paper-raised: #1E1230;
    --cw-ink: #ECE6F5;
    --cw-muted: #B0A5C4;
    --cw-line: #382B4C;
    --cw-brand: #C6A8F2;
    --cw-brand-strong: #E4D4FA;
    --cw-brand-tint: #2A1D40;
    --cw-focus: #C6A8F2;
  }
}

/* ============================================================
   PART 1 — generic tags + Bootstrap 5 standard classes
   ============================================================ */

body {
  background: var(--cw-paper);
  color: var(--cw-ink);
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-size: 17px;
  line-height: 1.65;
}

a {
  color: var(--cw-brand);
}
a:hover {
  color: var(--cw-brand-strong);
}
a:focus-visible {
  outline: 2px solid var(--cw-focus);
  outline-offset: 3px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Source Serif 4', Georgia, serif;
  color: var(--cw-ink);
}

/* Uppercase small labels (nav, breadcrumb-like text, form labels) read as the sans "kicker"
   register from the mockup — Urbanist, tracked out, muted color. */
.small, small, label, .form-label, nav a, .breadcrumb {
  font-family: 'Urbanist', 'Segoe UI', sans-serif;
}

/* Main menu (mod_menu) — confirmed from Joomla 6's actual modules/mod_menu/tmpl/default.php: the
   module always renders as <ul class="mod-menu mod-list nav ..."> with <li class="nav-item ...">
   (current/active added to the li, not a Bootstrap .navbar wrapper, and links aren't guaranteed a
   .nav-link class) — so these rules target the confirmed-real .mod-menu/.nav-item classes directly
   rather than assuming .navbar/.nav-link, which is what was silently not matching before.
   Confirmed live on cogniwise.com (DevTools computed styles): Cassiopeia's own template.min.css
   sets ".mod-menu { flex-direction: column; }" -- our earlier rule set a gap but never overrode
   that direction, so the menu was rendering as a vertical stack instead of a horizontal bar. The
   text colors were already correct (verified: Home showed the ink color, Approach/Contact showed
   the muted color) -- only the layout direction needed fixing. */
/* Confirmed live from cogniwise.com's own deployed template.min.css: Cassiopeia is mobile-first --
   .mod-menu defaults to flex-direction: column, and only becomes a horizontal row itself at its own
   @media (width>=992px) breakpoint (below that, Cassiopeia collapses the whole nav behind its own
   toggle button). Our row/wrap styling below needs the same breakpoint, or it also overrides
   Cassiopeia's default vertical stacking inside that collapsed mobile panel. */
@media (min-width: 992px) {
  .mod-menu.nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
  }
}
.mod-menu .nav-item > a {
  font-family: 'Urbanist', 'Segoe UI', sans-serif;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cw-muted) !important;
  text-decoration: none;
}
.mod-menu .nav-item.current > a,
.mod-menu .nav-item.active > a,
.mod-menu .nav-item > a:hover {
  color: var(--cw-ink) !important;
}

.btn-primary {
  background-color: var(--cw-brand);
  border-color: var(--cw-brand);
  font-family: 'Urbanist', 'Segoe UI', sans-serif;
  font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--cw-brand-strong);
  border-color: var(--cw-brand-strong);
}

.card {
  background: var(--cw-paper-raised);
  border-color: var(--cw-line);
}

/* Forms (the Contact component) */
.form-control, .form-select {
  background: var(--cw-paper-raised);
  border-color: var(--cw-line);
  color: var(--cw-ink);
}
.form-control:focus {
  border-color: var(--cw-focus);
  box-shadow: 0 0 0 0.2rem var(--cw-brand-tint);
}

/* ============================================================
   PART 2 — Cassiopeia-specific conventions (verify against your
   live markup; see the note at the top of this file)
   ============================================================ */

#header, header.header, .site-header {
  background: var(--cw-paper);
  border-bottom: 1px solid var(--cw-line);
}

/* Logo — confirmed from Joomla 6's own templates/cassiopeia/index.php: a custom Logo Image
   (System -> Templates -> Site Templates -> Cassiopeia -> Advanced tab) always renders as a
   plain <img> with no class, inside <a class="brand-logo">, regardless of Joomla version. This
   is what actually swaps the logo between light/dark themes -- see media/cw/README.md for the
   two image files and full explanation. Upload cogniwise-logo-light.png as the Logo Image field
   itself (the fallback for anything that doesn't run this CSS); this rule then overrides which
   image actually displays based on the visitor's theme. */
.brand-logo { display: inline-flex; align-items: center; }
.brand-logo img {
  content: url('/images/cw/cogniwise-logo-light.png');
  /* The uploaded PNG is exported at 900x198 (full resolution for retina/print); without an explicit
     display size the browser renders it at that native size, which is why it showed up gigantic in
     the header instead of the compact wordmark size the mockup used (164x36, same 4.55:1 aspect
     ratio). Height fixed, width left to scale automatically so it never distorts. */
  height: 36px;
  width: auto;
}
@media (prefers-color-scheme: dark) {
  .brand-logo img { content: url('/images/cw/cogniwise-logo-dark.png'); }
}

/* Header logo, sized up a bit from the base 36px without growing the header row itself.
   Confirmed live on cogniwise.com: .navbar-brand (Cassiopeia's real wrapper around the header
   logo) currently renders at height 62.79px inside an 80.46px header row. Fixing .navbar-brand's
   own height and setting overflow: visible lets the logo grow past that box visually -- centered
   on both the box's fixed height and the image's own -- without the header row growing to match;
   the box height chosen here (52px) is well under the header's current 80px, per "doesn't even
   have to be close to the current height of the block." Width stays auto so the aspect ratio
   (4.55:1, same as the mockup) is never distorted. */
.navbar-brand {
  height: 52px;
  overflow: visible;
  display: flex;
  align-items: center;
}
.navbar-brand .brand-logo img {
  height: 46px;
  width: auto;
}

/* Fallback only for the rare case Joomla renders the site title as plain text instead of the
   logo image (e.g. the Logo field is left empty) -- verify against your live markup. */
.site-title, #header .site-title a, a.site-title {
  font-family: 'Urbanist', 'Segoe UI', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cw-brand) !important;
  text-decoration: none;
}

/* Language switcher (mod_languages) -- discreet, small, muted, matching the footer's own type
   scale. Only takes effect once the module is actually published (see docs/JOOMLA6_INSTALL_AND_
   DEPLOY.md's language-switcher section) -- these are Joomla's own common class names for this
   module but haven't been checked against your live markup yet; adjust if a rule doesn't apply. */
.mod-languages, ul.lang-inline {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: 'Urbanist', 'Segoe UI', sans-serif;
  font-size: 0.78rem;
  color: var(--cw-muted);
}
.mod-languages a, ul.lang-inline a {
  color: var(--cw-muted);
  text-decoration: none;
}
.mod-languages a:hover, ul.lang-inline a:hover { color: var(--cw-ink); }
.mod-languages .lang-active a, ul.lang-inline .active a {
  color: var(--cw-ink);
  font-weight: 600;
}

/* Article view: title as the page H1, intro/full text as body copy */
.item-page .page-header, .item-page h1, .com-content-article__title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
}
.item-page {
  max-width: 62ch;
}

/* Footer — layout for the Custom HTML module described in media/cw/README.md (or the standalone
   footer content file), matching mockup/cogniwise_home_preview.html's footer exactly. This was
   previously missing from this file entirely: the mockup's footer redesign only ever existed in
   the mockup's own inline <style>, so the real site had no matching CSS for it even after the
   footer content itself was created -- that gap is fixed here, not just documented. */
#footer, footer.footer, .site-footer {
  /* Confirmed live on cogniwise.com: Cassiopeia's own template.min.css paints ".footer" with a
     navy-to-purple gradient background (color: white, background-image: linear-gradient(...)) --
     our rule set the border and text color but never overrode the background, so that gradient
     was showing through underneath (the "strong blue"). Text color was already correct. */
  background-color: var(--cw-paper);
  background-image: none;
  border-top: 1px solid var(--cw-line);
  color: var(--cw-muted);
  font-family: 'Urbanist', 'Segoe UI', sans-serif;
  font-size: 0.78rem;
  padding: 2.5rem 1.75rem 2rem;
}
.cw-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 2rem;
  max-width: 1040px;
  margin: 0 auto;
}
/* Mobile overflow fix -- confirmed live at the 375px mobile viewport: Cassiopeia's own
   ".grid-child" wrapper around each footer module is "display: flex; flex-direction: column;
   align-items: center", which does not stretch its children to a set width. Left to size itself,
   the footer's Custom HTML module (".mod-custom") sized to fit its grid's auto-fit columns at
   their own natural width -- 3 columns x 11rem plus gaps, about 592px -- and that oversized box
   was then simply centered, overflowing evenly off both edges of the phone screen (the visible
   symptom: the copyright line and the "Privacy Policy" link both got clipped). Giving the module
   wrapper an explicit 100%-of-its-column width removes the guesswork: the grid then measures its
   real, definite available width and correctly resolves to one column on a phone and three columns
   again once there's room (tablet and up) -- no breakpoint needed, no separate mobile rule. */
footer.container-footer .grid-child > * {
  width: 100%;
}
.cw-footer-col h3 {
  margin: 0 0 0.85rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cw-muted);
  opacity: 0.75;
}
.cw-footer-col .brand-logo img { height: 22px; width: auto; }
.cw-footer-col p.cw-footer-blurb { margin: 0.85rem 0 0; max-width: 22ch; color: var(--cw-muted); }
.cw-footer-links { display: flex; flex-direction: column; gap: 0.6rem; }
.cw-footer-links a, .cw-footer-bottom a { text-decoration: none; color: var(--cw-muted); }
.cw-footer-links a:hover, .cw-footer-bottom a:hover { color: var(--cw-ink); }
.cw-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 1040px;
  margin: 2.25rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--cw-line);
}
.cw-footer-bottom .note { color: var(--cw-muted); opacity: 0.65; }

/* ============================================================
   PART 3 — Site Offline (maintenance) page
   ============================================================ */

/* Cassiopeia's own templates/cassiopeia/offline.php falls back to its bundled logo.svg (a
   "Cassiopeia" wordmark) whenever the active Template Style has no Logo Image/Site Title param
   set -- confirmed from the real file (not guessed): its fallback image renders with
   class="logo d-inline-block", not .brand-logo, which is why the homepage's logo swap above never
   reached this page. offline.php already loads this exact stylesheet itself (its own
   useStyle('template.user') call is the same asset name Cassiopeia uses to auto-load user.css
   everywhere else), so no separate file or PHP edit is needed for this. */
.offline-card .header h1 img.logo {
  content: url('/images/cw/cogniwise-logo-light.png');
  height: 36px;
  width: auto;
}
@media (prefers-color-scheme: dark) {
  .offline-card .header h1 img.logo { content: url('/images/cw/cogniwise-logo-dark.png'); }
}

/* Hides the login form Cassiopeia's offline page always renders, with no admin setting to turn it
   off. This only hides the form on this page -- the actual /administrator login and the
   underlying login endpoint are unaffected either way, same as if the form were removed from the
   PHP file instead. */
.offline-card .login { display: none; }

/* ============================================================
   PART 4 — Contact page
   ============================================================ */

/* Removes the redundant "Send an Email" heading that sits right above the Name field -- the page
   already has its own "Get in touch." title, so this second heading was just repeating the same
   idea. Visually hidden rather than display:none so a screen reader still announces the
   fieldset's purpose; sighted visitors just don't see the duplicate text. Confirmed from the
   live page's real markup: #contact-form is the actual, specific id Joomla gives this form, not
   used anywhere else on the site. */
#contact-form legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}