/* =====================================================================
   SCOUTS VICTORIA HELP CENTRE - CUSTOM CSS
   Paste into: Setup > Channels > Help Center > Help Center Customization
               > Customize (your published theme) > CSS tab
   Theme: Elegant
   ---------------------------------------------------------------------
   Step 1: Typography (Nunito Sans)
   Step 2: Brand colours (Scouts Victoria palette)
   Step 3: Home page layout (remove Popular Articles, tile the two boxes)
   Step 4: Home page quick-link tiles (Terrain, Scouts Victoria website)
   Step 5: Reusable content box (.sv-box) for boxing sections inside articles
   ===================================================================== */


/* =====================================================================
   STEP 1: TYPOGRAPHY
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,600;1,700&display=swap');

body,
.zohodesk {
  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6,
p, a, li, blockquote,
label, table, td, th,
button, input, textarea, select,
.Header__nav, .Header__brandName,
.Footer__footer, .Footer__footerCopyrigt {
  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

h1, h2, h3 {
  font-weight: 700 !important;
}


/* =====================================================================
   STEP 2: BRAND COLOURS
   The palette lives here as variables so it is easy to adjust once
   and have the change flow through the whole portal.
   ===================================================================== */

:root {
  /* Core Scouts Victoria palette */
  --sv-navy:       #003160;  /* primary brand colour - header, headings */
  --sv-dark-navy:  #16345C;  /* deep navy - strong text, footer */
  --sv-mid-blue:   #025495;  /* links, interactive elements */
  --sv-light-blue: #147BC1;  /* hover, lighter accents */
  --sv-tint:       #E5F1F8;  /* pale blue - card / section backgrounds */
  --sv-grey:       #575756;  /* body text */
  --sv-white:      #FFFFFF;

  /* Optional Scout accent colours (national palette).
     Handy later for category icons or widget accents if you want colour. */
  --sc-gold:  #FFC82E;
  --sc-green: #00AE42;
  --sc-teal:  #008F88;
  --sc-red:   #DC291E;
}

/* ---- Text (reliable, uses standard elements) ---- */
body {
  color: var(--sv-grey) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--sv-navy) !important;
}

/* ---- Links (reliable) ---- */
a {
  color: var(--sv-mid-blue) !important;
}
a:hover,
a:focus {
  color: var(--sv-light-blue) !important;
}

/* ---- Header bar ----
   The centred band (Header__container) and the full-width bar
   (Header__header) are both set navy, and we switch off the theme's
   background image so the whole header reads as one clean navy block.
   That image showing at the edges was the "dark strips". */
.Header__header,
.Header__homeContent,
.Header__container {
  background-color: var(--sv-navy) !important;
}
.Header__header,
.Header__homeContent {
  background-image: none !important;
}
/* The nav row carries a separate element (Header__navbar) with a
   semi-transparent black overlay. With the background image gone, that
   overlay was left showing over the navy at the edges as darker "strips".
   Clear it so the whole nav row shows the navy beneath, evenly. */
.Header__navbar {
  background-color: transparent !important;
}
/* Top navigation links: Home, My tickets, Knowledge Base, Sign In etc.
   Scoped to the header container so it catches the links wherever they sit. */
.Header a,
.Header__header a,
.Header__container a,
.Header a:visited,
.Header__header a:visited,
.Header__container a:visited {
  color: var(--sv-white) !important;
}
/* Gentle hover: stays white, adds a subtle underline for feedback */
.Header a:hover,
.Header__header a:hover,
.Header__container a:hover {
  color: var(--sv-white) !important;
  text-decoration: underline !important;
}

/* ---- Search icon / button ---- */
.searchIcon,
.SearchBar__searchIcon,
.SearchBox__searchIcon {
  color: var(--sv-navy) !important;
}

/* ---- Primary buttons: Submit a ticket, form submits ----
   Scoped to submit / primary buttons only, so icon and utility
   buttons are left alone. */
input[type="submit"],
button[type="submit"],
.submitBtn,
.Button__primary,
.zd-button--primary {
  background-color: var(--sv-navy) !important;
  border-color: var(--sv-navy) !important;
  color: var(--sv-white) !important;
}
input[type="submit"]:hover,
button[type="submit"]:hover,
.submitBtn:hover,
.Button__primary:hover,
.zd-button--primary:hover {
  background-color: var(--sv-mid-blue) !important;
  border-color: var(--sv-mid-blue) !important;
}

/* ---- Breadcrumbs ---- */
.breadcrumb a,
.Breadcrumb a,
.BreadCrumb a {
  color: var(--sv-mid-blue) !important;
}

/* ---- Widget / section headings, e.g. Popular Articles ---- */
.widgetTitle,
.Widget__title,
.sectionTitle {
  color: var(--sv-navy) !important;
}


/* =====================================================================
   HOME PAGE HERO HEADING
   The "Welcome to Scouts Victoria" heading has the class
   Header__searchTitle. It was navy on the navy banner, so it vanished.
   Force it white so it reads against the banner.
   ===================================================================== */

.Header__searchTitle {
  color: var(--sv-white) !important;
}


/* =====================================================================
   STEP 3: HOME PAGE LAYOUT
   Remove the Popular Articles widget and turn the two blocks
   (Knowledge Base and Tickets) into brand-styled tiles.
   Search stays where it is, above the tiles.
   ===================================================================== */

/* ---- Remove the Popular Articles widget from the home page ----
   To bring it back later, delete these two rules (or remove the widget
   in the Widgets tab instead). */
.WidgetContainer__contentList:has(.popularAricles) {
  display: none !important;
}
.popularAricles {
  display: none !important;
}

/* ---- Knowledge Base & Tickets tiles ----
   .ContentBox__boxInnerHome is the home-page inner block for each box. */
.ContentBox__boxInnerHome {
  background-color: var(--sv-white) !important;
  border: 1px solid #E3E3E3 !important;
  border-radius: 10px !important;
  padding: 34px 26px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
  height: 100% !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease !important;
}
.ContentBox__boxInnerHome:hover {
  box-shadow: 0 10px 22px rgba(0, 49, 96, 0.15) !important;
  border-color: var(--sv-mid-blue) !important;
  transform: translateY(-3px) !important;
}


/* =====================================================================
   STEP 4: HOME PAGE QUICK-LINK TILES (custom widget)
   Styles the two extra tiles (Terrain and the Scouts Victoria website)
   that you add as a Custom Widget on the home page. The markup lives in
   the widget (see the separate HTML file); these rules style it to match
   the Knowledge Base and Tickets tiles above.
   ===================================================================== */

.sv-quicklinks {
  display: flex;
  gap: 24px;
  max-width: 1170px;
  margin: 24px auto 0;
  padding: 0 15px;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.sv-quicklinks .sv-tile {
  flex: 1 1 0;
  min-width: 260px;
  display: block;
  text-align: center;
  text-decoration: none !important;
  background-color: var(--sv-white) !important;
  border: 1px solid #E3E3E3 !important;
  border-radius: 10px !important;
  padding: 34px 26px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
  color: var(--sv-grey) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease !important;
}
.sv-quicklinks .sv-tile:hover {
  box-shadow: 0 10px 22px rgba(0, 49, 96, 0.15) !important;
  border-color: var(--sv-mid-blue) !important;
  transform: translateY(-3px) !important;
}
.sv-quicklinks .sv-tile__icon {
  color: var(--sv-navy);
  display: inline-block;
  margin-bottom: 14px;
}
.sv-quicklinks .sv-tile__title {
  color: var(--sv-navy) !important;
  margin: 0 0 10px !important;
  font-weight: 700 !important;
  font-size: 1.4rem !important;
}
.sv-quicklinks .sv-tile__text {
  color: var(--sv-grey) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}


/* =====================================================================
   STEP 5: REUSABLE CONTENT BOX (for use inside articles)
   Add class="sv-box" to any div in an article body to wrap that section
   in a brand-styled box. Works the same way as your sv-download button:
   the style lives here, you apply the class in the article HTML.
   ===================================================================== */

.sv-box {
  background-color: var(--sv-white) !important;
  border: 1px solid #E3E3E3 !important;
  border-radius: 10px !important;
  padding: 24px 26px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
  margin: 0 0 20px !important;
}
/* Tighten spacing on the first and last items so the box hugs its content */
.sv-box > :first-child { margin-top: 0 !important; }
.sv-box > :last-child  { margin-bottom: 0 !important; }

/* Optional: a navy tinted variant for callouts / important notes.
   Use class="sv-box sv-box--tint" */
.sv-box--tint {
  background-color: var(--sv-tint) !important;
  border-color: #CDE3F2 !important;
}


/* =====================================================================
   STEP 6: RESOURCES / DOWNLOAD LIST (for use inside articles)
   Recreates the boxed "Resources" download rows (PDF icon, file name,
   size, download arrow) like the Scouts Australia reference article.
   The icons are drawn by the CSS, so your article HTML stays clean.
   ===================================================================== */

.sv-resources-title {
  color: var(--sv-navy) !important;
  font-weight: 700 !important;
  margin: 28px 0 14px !important;
}
.sv-resource {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  border: 1px solid #E3E3E3 !important;
  border-radius: 10px !important;
  padding: 16px 20px !important;
  margin: 0 0 14px !important;
  background-color: var(--sv-white) !important;
  text-decoration: none !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.sv-resource:hover {
  border-color: var(--sv-mid-blue) !important;
  box-shadow: 0 4px 12px rgba(0, 49, 96, 0.10) !important;
}
.sv-resource::before {
  content: "" !important;
  flex: 0 0 auto !important;
  width: 40px !important;
  height: 44px !important;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0NCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTYgMmgxOGwxMCAxMHYyOGEyIDIgMCAwIDEtMiAySDZhMiAyIDAgMCAxLTItMlY0YTIgMiAwIDAgMSAyLTJ6IiBmaWxsPSIjZmZmZmZmIiBzdHJva2U9IiNCOUMwQzciIHN0cm9rZS13aWR0aD0iMS41Ii8+PHBhdGggZD0iTTI0IDJ2MTBoMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0I5QzBDNyIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48cmVjdCB4PSI4IiB5PSIyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjEyIiByeD0iMiIgZmlsbD0iI0RDMjkxRSIvPjx0ZXh0IHg9IjIwIiB5PSIzMi41IiBmb250LWZhbWlseT0iQXJpYWwsIEhlbHZldGljYSwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSI4IiBmb250LXdlaWdodD0iNzAwIiBmaWxsPSIjZmZmZmZmIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5QREY8L3RleHQ+PC9zdmc+") center / contain no-repeat !important;
}
.sv-resource::after {
  content: "" !important;
  flex: 0 0 auto !important;
  width: 22px !important;
  height: 22px !important;
  margin-left: auto !important;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNTc1NzU2IiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgM3YxMiIvPjxwYXRoIGQ9Ik03IDEwbDUgNSA1LTUiLz48cGF0aCBkPSJNNCAyMWgxNiIvPjwvc3ZnPg==") center / contain no-repeat !important;
}
.sv-resource__text { flex: 1 1 auto !important; min-width: 0 !important; }
.sv-resource__name {
  display: block !important;
  color: var(--sv-navy) !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  word-break: break-word !important;
}
.sv-resource__size {
  display: block !important;
  color: #8A8F94 !important;
  font-size: 0.9rem !important;
  margin-top: 2px !important;
}


/* ===== File download card (paste at bottom of Customize > CSS) ===== */

.sv-file {
  margin: 16px 0;
}

.sv-file a {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #ffffff;
  border: 1px solid #e2e7ee;
  border-radius: 10px;
  padding: 18px 22px;
  text-decoration: none;
  font-family: 'Nunito Sans', sans-serif;
  transition: border-color 0.15s ease;
}

.sv-file a:hover {
  border-color: #147BC1;
}

/* PDF icon on the left */
.sv-file a::before {
  content: '';
  width: 38px;
  height: 44px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M14 1H4a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9z' fill='none' stroke='%23aab4c0' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M14 1v8h8' fill='none' stroke='%23aab4c0' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M8.2 15.5c1.6 3 3.4 4.8 5 5.6 1.7.8 2.8.4 2.8-.5 0-1-2-1.6-4.2-1.3-2.1.3-4.3 1.3-4.6 2.3-.2.8.7 1 1.5-.3.9-1.4 2-4.4 2.3-6.5.2-1.9-.4-2.6-1.1-2.3-.8.3-.9 1.6-1.7 3z' fill='none' stroke='%23d0342c' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Download arrow on the right */
.sv-file a::after {
  content: '';
  width: 22px;
  height: 22px;
  margin-left: auto;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808a96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") no-repeat center / contain;
}

.sv-file .sv-file-name {
  display: block;
  font-weight: 700;
  font-size: 16px;
  color: #16345C;
}

.sv-file .sv-file-size {
  display: block;
  font-size: 13px;
  color: #8a94a6;
  margin-top: 3px;
}