/**
 * NDIS Theme — theme.css
 * Mobile-first. Bootstrap 5 base. 3-space indentation.
 *
 * BRAND COLOURS — replace placeholder values once assets are supplied.
 * All colours are defined here and referenced everywhere else via var().
 * -----------------------------------------------------------------------
 */

/* ==========================================================================
   1. BRAND TOKENS (replace these with client-supplied values)
   ========================================================================== */

:root {
   /* --- Primary palette --- */
   --clr-primary:        #7E31B7;   /* main brand purple */
   --clr-primary-dark:   #5A2390;   /* darker shade (~25% darker) */
   --clr-primary-light:  #E6D6F2;   /* soft tint for backgrounds */

   /* --- Secondary / accent palette --- */
   --clr-accent:         #31B79A;   /* teal (complementary balance) */
   --clr-accent-dark:    #248C76;   /* darker teal for hover */

   /* --- Primary palette
   --clr-primary:        #005EA2;
   --clr-primary-dark:   #003D6B;
   --clr-primary-light:  #D9E8F5;
   --clr-accent:         #00A499;
   --clr-accent-dark:    #007A71;   */

   /* --- Neutral palette --- */
   --clr-white:          #FFFFFF;
   --clr-grey-50:        #F8F9FA;
   --clr-grey-100:       #F1F3F5;
   --clr-grey-200:       #E9ECEF;
   --clr-grey-400:       #ADB5BD;
   --clr-grey-600:       #6C757D;
   --clr-grey-800:       #343A40;
   --clr-black:          #111111;

   /* --- Semantic colours --- */
   --clr-text:           #212529;
   --clr-text-muted:     var(--clr-grey-600);
   --clr-bg:             var(--clr-white);
   --clr-bg-alt:         var(--clr-grey-50);
   --clr-border:         var(--clr-grey-200);
   --clr-link:           var(--clr-primary);
   --clr-link-hover:     var(--clr-primary-dark);

   /* --- Status colours --- */
   --clr-success:        #1A7F37;
   --clr-warning:        #9A6700;
   --clr-danger:         #CF222E;
   --clr-info:           var(--clr-primary);

   /* ==========================================================================
      2. TYPOGRAPHY
      ========================================================================== */
   /* Supply own fonts — no external CDN requests (privacy + performance) */
   --font-heading:       Helvetica, Georgia, serif;  /* PLACEHOLDER */
   --font-body:          Helvetica, system-ui, sans-serif; /* PLACEHOLDER */
   --font-mono:          Helvetica, Courier, monospace;

   --text-base:          1rem;         /* 16px */
   --text-sm:            0.875rem;     /* 14px */
   --text-lg:            1.125rem;     /* 18px */
   --text-xl:            1.25rem;
   --text-2xl:           1.5rem;
   --text-3xl:           1.875rem;
   --text-4xl:           2.25rem;

   --leading-tight:      1.25;
   --leading-base:       1.6;
   --leading-loose:      1.8;

   --fw-normal:          400;
   --fw-medium:          500;
   --fw-semibold:        600;
   --fw-bold:            700;

   /* ==========================================================================
      3. SPACING SCALE
      ========================================================================== */

   --space-1:    0.25rem;
   --space-2:    0.5rem;
   --space-3:    0.75rem;
   --space-4:    1rem;
   --space-5:    1.25rem;
   --space-6:    1.5rem;
   --space-8:    2rem;
   --space-10:   2.5rem;
   --space-12:   3rem;
   --space-16:   4rem;
   --space-20:   5rem;

   /* ==========================================================================
      4. LAYOUT
      ========================================================================== */

   --max-content:     75ch;       /* readable line length */
   --border-radius:   0.375rem;
   --border-radius-lg: 0.5rem;
   --border-width:    1px;

   /* ==========================================================================
      5. SHADOWS & TRANSITIONS
      ========================================================================== */

   --shadow-sm:   0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow:      0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

   --transition:  150ms ease-in-out;
}


/* ==========================================================================
   6. BASE / RESET
   ========================================================================== */

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

html {
   scroll-behavior: smooth;
   -webkit-text-size-adjust: 100%;
}

body {
   font-family:    var(--font-body);
   font-size:      var(--text-base);
   font-weight:    var(--fw-normal);
   line-height:    var(--leading-base);
   color:          var(--clr-text);
   background:     var(--clr-bg);
   margin:         0;
   padding:        0;
}

img,
svg,
video {
   display:   block;
   max-width: 100%;
   height:    auto;
}

a {
   color:           var(--clr-link);
   text-decoration: underline;
   transition:      color var(--transition);
}

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

h1, h2, h3, h4, h5, h6 {
   font-family:  var(--font-heading);
   font-weight:  var(--fw-bold);
   line-height:  var(--leading-tight);
   margin-top:   var(--space-6);
   color:        var(--clr-black);
}


/* ==========================================================================
   7. HEADER
   ========================================================================== */

.site-header {
   background: var(--clr-white);
   border-bottom: var(--border-width) solid var(--clr-border);
   position: sticky;
   top: 0;
   z-index: 1000;
   box-shadow: var(--shadow-sm);
}

.header-top {
   background:  var(--clr-primary);
   color:       var(--clr-white);
   padding:     var(--space-2) 0;
   font-size:   var(--text-sm);
}

/* .header-main { padding: var(--space-4) 0; } */

.site-logo a {
   display:         flex;
   align-items:     center;
   text-decoration: none;
   color:           inherit;
}

.site-logo img {
   height: 3rem;
   width:  auto;
}

.site-name {
   font-family:  var(--font-heading);
   font-size:    var(--text-xl);
   font-weight:  var(--fw-bold);
   color:        var(--clr-primary);
}

/* --- Search toggle button --- */

.btn-search-toggle {
   background:   transparent;
   border:       none;
   color:        var(--clr-primary);
   cursor:       pointer;
   padding:      var(--space-2);
   border-radius: var(--border-radius);
   display:      flex;
   align-items:  center;
   transition:   background var(--transition), color var(--transition);
}

.btn-search-toggle:hover,
.btn-search-toggle[aria-expanded="true"] {
   background: var(--clr-primary-light);
   color:      var(--clr-primary-dark);
}

/* --- Search bar --- */

.search-bar {
   background:    var(--clr-grey-50);
   border-top:    var(--border-width) solid var(--clr-border);
   padding:       var(--space-4) 0;
}

.search-bar[hidden] {
   display: none;
}

/* --- Hamburger --- */

.btn-nav-toggle {
   background:    transparent;
   border:        var(--border-width) solid var(--clr-border);
   border-radius: var(--border-radius);
   padding:       var(--space-2) var(--space-3);
   cursor:        pointer;
}

.hamburger,
.hamburger::before,
.hamburger::after {
   display:      block;
   width:        1.25rem;
   height:       2px;
   background:   var(--clr-primary);
   transition:   transform var(--transition);
}

.hamburger {
   position: relative;
}

.hamburger::before,
.hamburger::after {
   content:  '';
   position: absolute;
   left:     0;
}

.hamburger::before { top:    -6px; }
.hamburger::after  { bottom: -6px; }


/* ==========================================================================
   8. NAVIGATION
   ========================================================================== */

.main-nav {
   background: var(--clr-primary);
}

/* Top-level links */
.main-nav .nav-link {
   color:       var(--clr-white);
   font-family: var(--font-heading);
   font-weight: var(--fw-semibold);
   font-size:   var(--text-sm);
   padding:     var(--space-3) var(--space-4);
   transition:  background var(--transition);
}

.main-nav .nav-link:hover,
.main-nav .nav-link:focus,
.main-nav .nav-link.active,
.main-nav .nav-link[aria-current="page"] {
   color:      var(--clr-white);
   background: var(--clr-primary-dark);
}

/* Active page indicator */
.main-nav .nav-item.active > .nav-link,
.main-nav .nav-link[aria-current="page"] {
   border-bottom: 3px solid var(--clr-accent);
}

/* Dropdown toggle arrow colour */
.main-nav .dropdown-toggle::after {
   border-top-color: var(--clr-white);
}

/* Dropdown panel */
.main-nav .dropdown-menu {
   border-top:    3px solid var(--clr-accent);
   border-radius: 0 0 var(--border-radius) var(--border-radius);
   box-shadow:    var(--shadow-md);
   min-width:     12rem;
   padding:       var(--space-2) 0;
}

/* Dropdown items */
.main-nav .dropdown-item {
   color:       var(--clr-text);
   font-size:   var(--text-sm);
   font-weight: var(--fw-medium);
   padding:     var(--space-2) var(--space-5);
}

.main-nav .dropdown-item:hover,
.main-nav .dropdown-item:focus,
.main-nav .dropdown-item.active {
   background: var(--clr-primary-xlight);
   color:      var(--clr-primary);
}

/* Mobile — full-width collapse */
@media (max-width: 1199.98px) {
   .main-nav .navbar-collapse {
      background: var(--clr-primary-dark);
      padding:    var(--space-3);
   }

   .main-nav .dropdown-menu {
      background: var(--clr-primary-dark);
      border:     none;
      box-shadow: none;
      padding:    0 0 0 var(--space-4);
   }

   .main-nav .dropdown-item {
      color: var(--clr-white);
   }

   .main-nav .dropdown-item:hover {
      background: rgb(255 255 255 / 0.1);
      color:      var(--clr-white);
   }
}

/* ==========================================================================
   9. HERO
   ========================================================================== */

.hero-section {
   background: var(--clr-primary);
   color:      var(--clr-white);
   padding:    var(--space-12) 0;
   text-align: center;
}

.hero-section h1 {
   color:       var(--clr-white);
   font-size:   clamp(var(--text-2xl), 5vw, var(--text-4xl));
   margin-bottom: var(--space-4);
}

.hero-section p {
   font-size:   var(--text-lg);
   max-width:   60ch;
   margin:      0 auto var(--space-6);
   opacity:     0.9;
}


/* ==========================================================================
   10. BREADCRUMB
   ========================================================================== */

.breadcrumb-bar {
   background:  var(--clr-grey-100);
   border-bottom: var(--border-width) solid var(--clr-border);
   padding:     var(--space-2) 0;
   font-size:   var(--text-sm);
}

.breadcrumb-bar .breadcrumb {
   margin: 0;
}


/* ==========================================================================
   11. CONTENT LAYOUT
   ========================================================================== */

.content-wrapper {
   padding: var(--space-8) 0 var(--space-12);
}

.content-grid {
   display: grid;
   gap:     var(--space-8);
}

.content-grid.has-sidebar {
   grid-template-columns: 1fr;
}

@media (min-width: 992px) {
   .content-grid.has-sidebar {
      grid-template-columns: 1fr 18rem;
   }
}

.main-content {
   min-width: 0; /* prevent grid blowout */
}

.main-content > * + * {
   margin-top: var(--space-6);
}


/* ==========================================================================
   12. ARTICLE
   ========================================================================== */

.article-header {
   margin-bottom: var(--space-6);
}

.article-title {
   font-size: clamp(var(--text-2xl), 3.5vw, var(--text-3xl));
}

.article-info {
   font-size:  var(--text-sm);
   color:      var(--clr-text-muted);
   margin-top: var(--space-2);
}

.article-body {
   max-width:   var(--max-content);
   line-height: var(--leading-loose);
}

.article-body h2 { font-size: var(--text-2xl); margin-top: var(--space-8); }
.article-body h3 { font-size: var(--text-xl);  margin-top: var(--space-6); }
.article-body h4 { font-size: var(--text-lg);  margin-top: var(--space-4); }

.article-body p,
.article-body ul,
.article-body ol {
   margin-bottom: var(--space-4);
}

.article-body a {
   text-decoration: underline;
}

/* --- Edit button (frontend editing) --- */
.article-edit-button {
   margin-bottom: var(--space-4);
}

.article-edit-button a.btn {
   font-size:  var(--text-sm);
   background: var(--clr-accent);
   color:      var(--clr-white);
   border:     none;
}

.article-edit-button a.btn:hover {
   background: var(--clr-accent-dark);
   color:      var(--clr-white);
}

/* ==========================================================================
   13. BUTTONS
   ========================================================================== */

.btn-primary {
   --bs-btn-bg:           var(--clr-primary);
   --bs-btn-border-color: var(--clr-primary);
   --bs-btn-hover-bg:     var(--clr-primary-dark);
   --bs-btn-hover-border-color: var(--clr-primary-dark);
}

.btn-accent {
   background: var(--clr-accent);
   color:      var(--clr-white);
   border:     none;
   padding:    var(--space-3) var(--space-6);
   border-radius: var(--border-radius);
   font-weight: var(--fw-semibold);
   transition: background var(--transition);
   display:    inline-block;
   text-decoration: none;
}

.btn-accent:hover,
.btn-accent:focus-visible {
   background: var(--clr-accent-dark);
   color:      var(--clr-white);
}


/* ==========================================================================
   14. SIDEBAR
   ========================================================================== */

.sidebar-right {
   font-size: var(--text-sm);
}

.sidebar-right .module {
   background:    var(--clr-grey-50);
   border:        var(--border-width) solid var(--clr-border);
   border-radius: var(--border-radius-lg);
   padding:       var(--space-5);
   margin-bottom: var(--space-4);
}

.sidebar-right .module-title {
   font-size:     var(--text-base);
   font-weight:   var(--fw-semibold);
   margin-bottom: var(--space-3);
   color:         var(--clr-primary);
}


/* ==========================================================================
   15. FOOTER
   ========================================================================== */

.site-footer {
   background: var(--clr-grey-800);
   color:      var(--clr-grey-200);
}

.footer-columns {
   padding: var(--space-12) 0 var(--space-8);
}

.footer-columns h3,
.footer-columns h4 {
   color:        var(--clr-white);
   font-size:    var(--text-base);
   font-weight:  var(--fw-semibold);
   margin-bottom: var(--space-4);
}

.footer-columns a {
   color:           var(--clr-grey-400);
   text-decoration: none;
   transition:      color var(--transition);
}

.footer-columns a:hover {
   color: var(--clr-white);
}

.footer-bottom {
   background:  var(--clr-black);
   padding:     var(--space-4) 0;
   font-size:   var(--text-sm);
   color:       var(--clr-grey-600);
}

.footer-copyright {
   margin: 0;
}


/* ==========================================================================
   16. SEARCH RESULTS (com_finder)
   ========================================================================== */

.search-result-item {
   padding:       var(--space-5) 0;
   border-bottom: var(--border-width) solid var(--clr-border);
}

.search-result-item:last-child {
   border-bottom: none;
}

.search-result-title {
   font-size:    var(--text-lg);
   font-weight:  var(--fw-semibold);
   margin-bottom: var(--space-1);
}

.search-result-title a {
   text-decoration: none;
}

.search-result-title a:hover {
   text-decoration: underline;
}

.search-result-url {
   color:       var(--clr-success);
   font-size:   var(--text-sm);
   margin-bottom: var(--space-2);
}

.search-result-desc {
   color:     var(--clr-text-muted);
   font-size: var(--text-sm);
}


/* ==========================================================================
   17. MESSAGES (system messages)
   ========================================================================== */

.system-message {
   border-radius: var(--border-radius);
   padding:       var(--space-4);
   margin-bottom: var(--space-4);
}

.system-message.alert-success { border-left: 4px solid var(--clr-success); }
.system-message.alert-warning { border-left: 4px solid var(--clr-warning); }
.system-message.alert-danger  { border-left: 4px solid var(--clr-danger);  }
.system-message.alert-info    { border-left: 4px solid var(--clr-info);    }


/* ==========================================================================
   18. UTILITIES
   ========================================================================== */

.visually-hidden {
   position: absolute !important;
   width:    1px !important;
   height:   1px !important;
   padding:  0 !important;
   margin:   -1px !important;
   overflow: hidden !important;
   clip:     rect(0,0,0,0) !important;
   white-space: nowrap !important;
   border:   0 !important;
}

/* =======================================================================
   FIX 1 — Burger menu hidden on small screens
   Append to bottom of theme.css
   ======================================================================= */

/* Bootstrap's .navbar-toggler is display:none by default and shown
   only when .navbar-expand-{breakpoint} collapses. Our custom CSS
   was overriding it. This restores correct visibility. */
.main-nav .navbar-toggler {
   display:          flex;
   align-items:      center;
   justify-content:  center;
   background:       transparent;
   border:           2px solid rgb(255 255 255 / 0.6);
   border-radius:    var(--border-radius);
   padding:          var(--space-2) var(--space-3);
   color:            var(--clr-white);
   cursor:           pointer;
   margin-left:      auto;
}

/* Hide on xl and above — Bootstrap handles this via the collapse,
   but we make it explicit so our CSS doesn't fight Bootstrap */
@media (min-width: 1200px) {
   .main-nav .navbar-toggler {
      display: none;
   }
}

/* Hamburger icon lines inside the toggler */
.main-nav .hamburger,
.main-nav .hamburger::before,
.main-nav .hamburger::after {
   display:    block;
   width:      1.25rem;
   height:     2px;
   background: var(--clr-white);
}

.main-nav .hamburger {
   position: relative;
}

.main-nav .hamburger::before,
.main-nav .hamburger::after {
   content:  '';
   position: absolute;
   left:     0;
}

.main-nav .hamburger::before { top:    -6px; }
.main-nav .hamburger::after  { bottom: -6px; }


/* =======================================================================
   FIX 2 — Articles take full content width (no 2/3 constraint)
   Append to bottom of theme.css
   ======================================================================= */

/* The .content-grid.no-sidebar was implicitly leaving a gap.
   Force the main content to span the full grid column. */
.content-grid.no-sidebar {
   grid-template-columns: 1fr;
}

.content-grid.no-sidebar .main-content {
   width:     100%;
   max-width: 100%;
}

/* .article-body had max-width: 72ch which constrained readable text width.
   This is good for long-form reading but makes the page feel narrow.
   Remove the cap so content fills the container. */
.article-body {
   max-width: 100%;
}

/* =======================================================================
   SITE WIDTH CONSTRAINT — WCAG-friendly
   Append to bottom of theme.css
   ======================================================================= */

/* Override Bootstrap's container-xl (1320px) with a narrower max.
   1100px gives comfortable reading on large monitors while ensuring
   the layout doesn't feel overwhelming. All container-xl instances
   across header, nav, content and footer are affected. */
.container-xl {
   max-width: 1100px !important;
}

/* Article body text — constrain line length for readability.
   WCAG 1.4.8 recommends max 80 characters per line.
   68ch is a comfortable reading measure for body text. */
.article-body p,
.article-body li,
.article-body blockquote {
   max-width: 72ch;
}

/* Headings and non-paragraph content stay full width */
.article-body h2,
.article-body h3,
.article-body h4,
.article-body figure,
.article-body table,
.article-body .feature-cards {
   max-width: 100%;
}

/* =======================================================================
   CONTACT PAGE — append to bottom of theme.css
   ======================================================================= */
.contact-method-link {
   font-weight:     600;
   font-size:       var(--text-lg);
   color:           var(--clr-primary);
   text-decoration: none;
}

.contact-method-link:hover {
   text-decoration: underline;
   color:           var(--clr-primary-dark);
}

/* Bilal: Hide "send email" */
#contact-form legend { display: none; }

/* =======================================================================
   FRONTEND EDIT FORM — hide Toggle Editor button
   The div has multiple classes — target it precisely.
   Append to bottom of theme.css.
   ======================================================================= */
div.toggle-editor,
.toggle-editor.btn-toolbar {
   display:    none !important;
   visibility: hidden !important;
}

/* hide the 'Published Article' link, which displayed by code in \administrator\components\com_content\src\Service\HTML\Icon.php */
[role="tooltip"] {
   display: none !important;
}

/* Bilal: the "Edit" button on the frontend */
.icons .float-end a {
   display: inline-block;
   padding: 10px 20px;
   background: var(--clr-accent);
   color: white;
   text-decoration: none;
   border-radius: 4px;
}

.img-full-width {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.img-full-width img {
    width: 100%;
    height: auto;
    display: block;
}