/* =====================================================================
   Toronto Ghosts: user.css for the Cassiopeia child template
   Recreates the look of Diablo Designs "dd_classiccarsgrunge_50"
   (Artisteer-built J3 template) on Joomla 6.

   All images load from the OLD template folder:
       /templates/dd_classiccarsgrunge_50/images/
   Keep that folder on the server. If you'd rather move the images to
   e.g. /images/ddgrunge/, find-and-replace that path in this file.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Alex+Brush&family=Bilbo+Swash+Caps&display=swap");


/* ---------------------------------------------------------------------
   1. Colours Cassiopeia uses internally
   --------------------------------------------------------------------- */
:root {
  --cassiopeia-color-primary: #000000;
  --cassiopeia-color-link:    #841200;
  --cassiopeia-color-hover:   #9E1500;
}


/* ---------------------------------------------------------------------
   2. Page background and base text
   --------------------------------------------------------------------- */
body.site {
  background: #000 url("/templates/dd_classiccarsgrunge_50/images/page.png");
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;            /* original was 13px; bump back down if you like */
  color: #000;
}


/* ---------------------------------------------------------------------
   3. Header: header.jpg plus the old floating "grunge" graphics
   --------------------------------------------------------------------- */
.container-header {
  position: relative;
  min-height: 500px;
  margin-bottom: 0;
  background: #000 url("/templates/dd_classiccarsgrunge_50/images/header.jpg") center top no-repeat;
  box-shadow: none;
  overflow-x: clip;           /* hides overflow sideways, still lets dropdown menus hang down */
  align-content: space-between; /* title at top, menu at bottom. Delete to keep menu right under the title */
}

/* The old template's decorative PNGs, placed where Artisteer had them.
   Positions are measured on a 2060px-wide canvas centred on the page
   (the original 1060px layout + 500px spill-over each side). */
.container-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2060px;
  height: 500px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  background:
    url("/templates/dd_classiccarsgrunge_50/images/object387664548.png")  1547px 484px no-repeat,
    url("/templates/dd_classiccarsgrunge_50/images/object187107830.png")  1023px -24px no-repeat,
    url("/templates/dd_classiccarsgrunge_50/images/object1819700770.png") 1226px -42px no-repeat,
    url("/templates/dd_classiccarsgrunge_50/images/object510605882.png")    66px 400px no-repeat,
    url("/templates/dd_classiccarsgrunge_50/images/object781318349.png")  1314px   0px no-repeat,
    url("/templates/dd_classiccarsgrunge_50/images/object1700303096.png")  564px 452px no-repeat,
    url("/templates/dd_classiccarsgrunge_50/images/object1469073161.png")  439px 382px no-repeat,
    url("/templates/dd_classiccarsgrunge_50/images/object2118359711.png")  957px  89px no-repeat,
    url("/templates/dd_classiccarsgrunge_50/images/object1144236718.png")  481px 140px no-repeat,
    url("/templates/dd_classiccarsgrunge_50/images/object808346314.png")  1392px 180px no-repeat,
    url("/templates/dd_classiccarsgrunge_50/images/object1599326250.png")  864px  78px no-repeat,
    /* These two framed the old slideshow. Delete them if they look odd with no slideshow inside */
    url("/templates/dd_classiccarsgrunge_50/images/object659069648.png")   484px 151px no-repeat,
    url("/templates/dd_classiccarsgrunge_50/images/object1246414142.png")  474px 148px no-repeat;
}

/* Keep the title, menu and search above the decorations */
.container-header > * {
  position: relative;
  z-index: 1;
}

/* Site title (Template Style → Advanced → Brand: Yes, no logo, set Title Text) */
.container-header .navbar-brand {
  padding-top: 20px;
}

.container-header .brand-logo,
.container-header .brand-logo:hover,
.container-header .brand-logo:focus {
  font-family: "Alex Brush", Arial, sans-serif;
  font-size: 72px;
  font-weight: bold;
  line-height: 1;
  color: #470001;
  text-shadow: 0 1px 0 #EDF0F2;
  text-decoration: none;
}

/* Tagline (Template Style → Advanced → Site Description) */
.container-header .site-description {
  font-family: "Bilbo Swash Caps", Arial, sans-serif;
  font-size: 24px;
  color: #CFD6DD;
  text-shadow: 0 0 6px rgba(23, 23, 23, 0.98);
}


/* ---------------------------------------------------------------------
   4. Top menu (module in the "menu" position)
   --------------------------------------------------------------------- */
.container-header .container-nav {
  padding-bottom: 10px;
}

.container-header .mod-menu > li {
  padding-left: 5px;
  background: url("/templates/dd_classiccarsgrunge_50/images/menuseparator.png") left center no-repeat;
}

.container-header .mod-menu > li:first-child {
  padding-left: 0;
  background: none;
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
  display: inline-block;
  padding: 0 17px;
  line-height: 32px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 13px;
  font-weight: bold;
  color: #B5BFCA;
  text-decoration: none;
}

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li:hover > a {
  background: #71090B;
  color: #A9B5C1;
  text-decoration: none;
}

.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.current > a {
  background: linear-gradient(to bottom, #DA2E1B 0, #E3301C 40%, #E3301C 70%, #911F12 100%);
  border-color: #7F1B10;
  color: #FADAD6;
}

/* Dropdowns (use the menu module layout "Collapsible Dropdown") */
.container-header .mod-menu ul,
.container-header .mod-menu .mm-collapse {
  background: #050505;
  border: 0;
  border-radius: 0 0 3px 3px;
  padding: 4px;
}

.container-header .mod-menu ul a {
  display: block;
  padding: 0 22px;
  line-height: 29px;
  font-size: 12px;
  color: #B5BFCA;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 3px;
  border-bottom: 1px dotted #283039;
}

.container-header .mod-menu ul li:last-child > a {
  border-bottom: 0;
}

.container-header .mod-menu ul a:hover {
  background: rgba(255, 255, 255, 0.8);
  color: #000;
}


/* ---------------------------------------------------------------------
   5. Smart Search box (wherever you put it)
   --------------------------------------------------------------------- */
.mod-finder input[type="text"],
.mod-finder input.form-control {
  background: linear-gradient(to bottom, #D6D6D6 0, #F2F2F2 40%, #F5F5F5 50%, #F5F5F5 100%);
  border: 1px solid #333D47;
  border-radius: 3px;
  color: #111418;
  font-size: 13px;
}


/* ---------------------------------------------------------------------
   6. The "sheet": the dark textured panel holding everything
   --------------------------------------------------------------------- */
.site-grid {
  max-width: 1060px;
  margin: 0 auto;
  padding: 3px 3px 10px;
  background: #000 url("/templates/dd_classiccarsgrunge_50/images/sheet.png");
  border-top: 2px solid #FFFFFF;
  border-radius: 5px 5px 0 0;
}


/* ---------------------------------------------------------------------
   7. Sidebars and their module boxes
   --------------------------------------------------------------------- */
.container-sidebar-left,
.container-sidebar-right {
  background: #000;
}

.container-sidebar-left .card,
.container-sidebar-right .card {
  margin: 10px 0;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(to bottom, rgba(65, 78, 91, 0.09) 0, rgba(20, 24, 28, 0.06) 100%) no-repeat,
    url("/templates/dd_classiccarsgrunge_50/images/blockcontent.png"),
    linear-gradient(to bottom, #394551 0, #1C2127 100%) no-repeat;
  background-color: #2F3842;
  color: #9DABB9;
  font-size: 13px;
}

/* Red module headers */
.container-sidebar-left .card-header,
.container-sidebar-right .card-header {
  margin: 0;
  padding: 6px 10px;
  border: 0;
  border-bottom: 2px solid #72571D;
  border-radius: 0;
  background:
    linear-gradient(to bottom, rgba(121, 10, 12, 0.04) 0, rgba(121, 10, 12, 0.04) 14%, rgba(164, 13, 16, 0.11) 15%, rgba(86, 7, 8, 0.06) 100%) no-repeat,
    url("/templates/dd_classiccarsgrunge_50/images/blockheader.png"),
    linear-gradient(to bottom, #7B0A0C 0, #7B0A0C 14%, #970C0F 15%, #63080A 100%) no-repeat;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold;
}

.container-sidebar-left .card-header::before,
.container-sidebar-right .card-header::before {
  content: url("/templates/dd_classiccarsgrunge_50/images/blockheadericon.png");
  margin-right: 6px;
  vertical-align: middle;
}

/* Brown headers on boxes that contain a menu (the old "vmenu" blocks) */
.container-sidebar-left .card:has(.mod-menu) > .card-header,
.container-sidebar-right .card:has(.mod-menu) > .card-header {
  background:
    linear-gradient(to bottom, rgba(78, 59, 19, 0.1) 0, rgba(78, 59, 19, 0.1) 14%, rgba(114, 87, 29, 0.25) 15%, rgba(41, 31, 10, 0.15) 100%) no-repeat,
    url("/templates/dd_classiccarsgrunge_50/images/vmenublockheader.png"),
    linear-gradient(to bottom, #4E3B13 0, #4E3B13 14%, #664E19 15%, #35280D 100%) no-repeat;
  color: #EEDDBA;
  font-weight: normal;
}

.container-sidebar-left .card:has(.mod-menu) > .card-header::before,
.container-sidebar-right .card:has(.mod-menu) > .card-header::before {
  content: url("/templates/dd_classiccarsgrunge_50/images/vmenublockheadericon.png");
}

.container-sidebar-left .card-body a,
.container-sidebar-right .card-body a {
  color: #EDF0F2;
  text-decoration: none;
}

.container-sidebar-left .card-body a:hover,
.container-sidebar-right .card-body a:hover {
  color: #C9D1D9;
}

.container-sidebar-left .card-body ul:not(.mod-menu) > li,
.container-sidebar-right .card-body ul:not(.mod-menu) > li {
  list-style-image: url("/templates/dd_classiccarsgrunge_50/images/blockbullets.png");
  color: #BDC7D0;
}

/* Sidebar menus (styled like the old vertical menu) */
.container-sidebar-left .mod-menu,
.container-sidebar-right .mod-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.container-sidebar-left .mod-menu > li,
.container-sidebar-right .mod-menu > li {
  margin-top: 3px;
}

.container-sidebar-left .mod-menu > li > a,
.container-sidebar-right .mod-menu > li > a {
  display: block;
  padding: 0 10px;
  line-height: 28px;
  background: #000 url("/templates/dd_classiccarsgrunge_50/images/vmenuitem.png");
  font-family: Verdana, Geneva, Arial, sans-serif;
  font-size: 12px;
  color: #EEDDBA;
}

.container-sidebar-left .mod-menu > li > a::before,
.container-sidebar-right .mod-menu > li > a::before {
  content: url("/templates/dd_classiccarsgrunge_50/images/vmenuitemicon.png");
  margin-right: 5px;
  vertical-align: middle;
}

.container-sidebar-left .mod-menu > li > a:hover,
.container-sidebar-right .mod-menu > li > a:hover {
  background: rgba(114, 87, 29, 0.3);
  color: #72571D;
}

.container-sidebar-left .mod-menu > li > a:hover::before,
.container-sidebar-right .mod-menu > li > a:hover::before {
  content: url("/templates/dd_classiccarsgrunge_50/images/vmenuhovereditemicon.png");
}

.container-sidebar-left .mod-menu > li.active > a,
.container-sidebar-right .mod-menu > li.active > a {
  color: #72571D;
}

.container-sidebar-left .mod-menu > li.active > a::before,
.container-sidebar-right .mod-menu > li.active > a::before {
  content: url("/templates/dd_classiccarsgrunge_50/images/vmenuactiveitemicon.png");
}

/* Sidebar sub-menus */
.container-sidebar-left .mod-menu ul,
.container-sidebar-right .mod-menu ul {
  list-style: none;
  padding: 0;
  margin: 2px 0;
}

.container-sidebar-left .mod-menu ul a,
.container-sidebar-right .mod-menu ul a {
  display: block;
  padding-left: 25px;
  line-height: 22px;
  font-size: 11px;
  color: #72571D;
  background: rgba(53, 40, 13, 0.5);
  border-top: 1px dotted #35280D;
}

.container-sidebar-left .mod-menu ul a::before,
.container-sidebar-right .mod-menu ul a::before {
  content: url("/templates/dd_classiccarsgrunge_50/images/vmenusubitemicon.png");
  margin-right: 10px;
  vertical-align: middle;
}

.container-sidebar-left .mod-menu ul a:hover,
.container-sidebar-right .mod-menu ul a:hover {
  background: #72571D;
  color: #EEDDBA;
}

.container-sidebar-left .mod-menu ul li.active > a,
.container-sidebar-right .mod-menu ul li.active > a {
  color: #9F2214;
}


/* ---------------------------------------------------------------------
   8. Main content: white "post" box on the dark sheet
   --------------------------------------------------------------------- */
.container-component > main {
  margin: 10px 0;
  padding: 10px 15px;
  background: #FFFFFF;
}

/* Breadcrumbs sit on the dark sheet, so light text */
.container-component .mod-breadcrumbs,
.container-component .mod-breadcrumbs a,
.container-component .breadcrumb-item + .breadcrumb-item::before {
  color: #9AA8B7;
}

.container-component .mod-breadcrumbs a:hover {
  color: #FF5338;
}

/* Links */
.container-component main a:not(.btn):not(.page-link) {
  color: #841200;
  text-decoration: none;
}

.container-component main a:not(.btn):not(.page-link):visited {
  color: #76190F;
}

.container-component main a:not(.btn):not(.page-link):hover {
  color: #9E1500;
  text-decoration: underline;
}

/* Article and blog titles */
.container-component main .page-header h1,
.container-component main .page-header h2 {
  margin: 5px 0;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 20px;
  font-weight: bold;
  color: #111418;
  text-shadow: 0 1px 0 #FFFFFF;
}

.container-component main .page-header h1::before,
.container-component main .page-header h2::before {
  content: url("/templates/dd_classiccarsgrunge_50/images/postheadericon.png");
  margin-right: 6px;
  vertical-align: middle;
}

.container-component main .page-header a:not(.btn) {
  color: #000000;
}

.container-component main .page-header a:not(.btn):hover {
  color: #841200;
  text-decoration: none;
}

/* Author / date / category line */
.container-component main .article-info {
  font-size: 11px;
  color: #35404A;
}

/* Body text */
.com-content-article__body {
  text-align: justify;
}

:is(.com-content-article__body, .item-content, .category-desc) :is(h1, h2, h3, h4, h5, h6) {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

:is(.com-content-article__body, .item-content, .category-desc) h1 { color: #841200; font-size: 32px; }
:is(.com-content-article__body, .item-content, .category-desc) h2 { color: #76190F; font-size: 24px; }
:is(.com-content-article__body, .item-content, .category-desc) h3 { color: #71090B; font-size: 19px; }
:is(.com-content-article__body, .item-content, .category-desc) h4 { color: #962013; font-size: 16px; }
:is(.com-content-article__body, .item-content, .category-desc) h5 { color: #962013; font-size: 13px; }
:is(.com-content-article__body, .item-content, .category-desc) h6 { color: #E95D4E; font-size: 11px; }

/* Bulleted lists inside articles */
:is(.com-content-article__body, .item-content, .category-desc) ul > li {
  list-style-image: url("/templates/dd_classiccarsgrunge_50/images/postbullets.png");
  color: #111418;
}

/* Quotes */
.container-component main blockquote {
  margin: 10px 10px 10px 50px;
  padding: 10px 10px 10px 33px;
  background: #C9D1D9 url("/templates/dd_classiccarsgrunge_50/images/postquote.png") no-repeat;
  color: #000;
  font-style: italic;
  text-align: left;
}

/* Tables inside articles */
:is(.com-content-article__body, .item-content) :is(th, td) {
  padding: 2px 4px;
  border: 1px solid #667A8F;
  vertical-align: top;
}

/* Blog layouts: a little separation between items */
.container-component main .blog-item + .blog-item {
  border-top: 1px dotted #667A8F;
  padding-top: 10px;
}


/* ---------------------------------------------------------------------
   9. Buttons (search button, "Read more", etc.)
   --------------------------------------------------------------------- */
.btn-primary,
.btn-secondary {
  background: linear-gradient(to bottom, #801100 0, #570C00 50%, #1F0400 50%, #420900 100%);
  border: 1px solid #52110A;
  border-radius: 3px;
  color: #C3CCD5;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus {
  background: linear-gradient(to bottom, #B81800 0, #8F1300 50%, #570C00 50%, #7A1000 100%);
  border-color: #222930;
  color: #FFFFFF;
}


/* ---------------------------------------------------------------------
   10. Pagination (blog / category / search result pages)
   --------------------------------------------------------------------- */
.pagination .page-link {
  background: #333D47;
  border: 1px solid #556677;
  color: #AFBAC6;
}

.pagination .page-item.active .page-link {
  background: #667A8F;
  border-color: #A0ADBB;
  color: #060809;
}

.pagination .page-link:hover {
  background: linear-gradient(to bottom, #F09389 0, #E3301C 80%, #C82A19 100%);
  border-color: #A0ADBB;
  color: #000;
}


/* ---------------------------------------------------------------------
   11. Footer
   --------------------------------------------------------------------- */
.container-footer {
  margin-top: 0;
  background: none;
  color: #9AA8B7;
  font-size: 11px;
  text-align: center;
}

.container-footer .grid-child {
  justify-content: center;
}

.container-footer a {
  color: #C11A00;
  text-decoration: none;
}

.container-footer a:hover {
  color: #FF5338;
  text-decoration: underline;
}


/* ---------------------------------------------------------------------
   12. Back-to-top button (Template Style → Advanced → Back-to-top: Yes)
   --------------------------------------------------------------------- */
.back-to-top-link {
  width: 48px;
  height: 48px;
  border-radius: 0;
  background: #FFFFFF url("/templates/dd_classiccarsgrunge_50/images/up-arrow.png") center no-repeat;
}

.back-to-top-link [class*="icon-"] {
  display: none;
}


/* ---------------------------------------------------------------------
   13. Phones and small screens (the original hid its decorations too)
   --------------------------------------------------------------------- */
@media (max-width: 1099px) {
  .container-header::before {
    display: none;
  }

  .container-header {
    min-height: 240px;
    background-size: cover;
    background-position: center;
  }

  .container-header .brand-logo {
    font-size: 48px;
  }

  .container-component main blockquote {
    margin-left: 10px;
  }
}
/* === Header clean-up: no header.jpg, no decorations; the logo does the work === */
.container-header {
  min-height: 0;
  background: transparent;
  padding-bottom: 10px;
}

.container-header::before {
  display: none;
}

.container-header .brand-logo img {
  max-height: none;
  max-width: 100%;
  height: auto;
}