/*
 * CMS-article/Services-page "chrome" CSS — every rule here only matches
 * markup that raw Joomla article HTML or the Services sidebar/samples/tools
 * pages render (`.prose ...`, `.homestripbanner`, `.rightbar_samples`,
 * `.thesistopic`, etc.). None of it is reachable from the home page
 * (`app/page.tsx`, which loads its own separate `home-page.css` from
 * `public/css/` as a deferred, non-render-blocking stylesheet), so it
 * used to live in `app/globals.css` only because that was the simplest place
 * to put it — but `globals.css` loads via the root layout on *every* route,
 * including `/`, making this ~11,000 lines of page-type-specific CSS part of
 * the render-blocking stylesheet on pages that render none of it (confirmed
 * via Lighthouse: ~750ms of the home page's render-blocking CSS was this
 * file). Moved here, into `[...slug]`'s own module graph, so Next.js scopes
 * it to the route that actually needs it instead of the whole app.
 *
 * Import order preserved exactly as it was in globals.css — see each file's
 * own header comment for the one cascade order dependency that matters
 * (equal-specificity selectors between these files).
 */
@import "../css/strips.css";
@import "../css/banners.css";
@import "../css/sidebars.css";
@import "../css/tool-pages.css";
@import "../css/tables.css";
@import "../css/writers.css";
@import "../css/sample-landing.css";
@import "../css/new-offer-strip.css";
@import "../draft-tabs.css";
@import "../dissertation-sections.css";
/* Full_Page and PowerPoint service landing pages — see service.php layout type 2. */
@import "../full-page-layout.css";
@import "../essay-writes.css";
/* New-layout service pages (page-layout="New", e.g. /thesis-help) — see service.php layout type 3. */
@import "../new-essay-writing.css";
/* /affiliate's dedicated layout (`affiliate.php` + `become-partner.css`), not the generic article/service template. */
@import "../css/affiliate.css";
/* /our-services' dedicated template CSS — real file, was already copied into the repo but never actually imported anywhere. */
@import "../css/our-services.css";
/* /offers' dedicated template CSS (`offers.php` + `offers.css`) — page is otherwise entirely template-driven, no CMS article body at all. */
@import "../css/offers.css";
/* /pricing's dedicated template CSS from templates/GAH/css/price.css */
@import "../css/price.css";

/*
 * `.homesprite` — the live site's shared icon sprite sheet (star ratings on
 * writer cards, WhatsApp/call/chat floating buttons, etc.), referenced by
 * raw CMS HTML across several unrelated page types (e.g.
 * `.experts-list li i.homesprite` on PowerPoint/Full_Page layout pages like
 * /summary-writing-services). Real asset, copied from
 * templates/GAH/images/homesprite.png.
 */
.homesprite {
  background: url("/images/homesprite.png") no-repeat;
}

/*
 * `.newconversationstrip` — a real desktop/mobile responsive image pair CMS
 * article bodies embed (e.g. /assignment-by-countries' "Good Grades See no
 * Boundaries!" promo), confirmed in the live site's own shared `common.css`:
 * `.stripdesktop{display:block}` / `.stripmobile{display:none}`. Without
 * this, both images rendered stacked on top of each other — this app's
 * `joomlaService.ts` resolves the CMS's lazy-load `data-src` into a real
 * `src` immediately (no lazyload JS library here), so both always "loaded"
 * at once instead of only one being visible.
 */
.newconversationstrip .stripmobile {
  display: none;
}

/*
 * CMS article bodies mark their inline CTA links with `class="button"` (e.g.
 * "Get AI-FREE Assignments"). The live template renders these as a centred
 * orange button — `.allinner_main .inner_services .left .button` in
 * templates/GAH/css/questions.css. Scoped to `.prose` because `button` is
 * too generic to style globally, and it has to beat @tailwindcss/typography's
 * own anchor styling, which was rendering these as plain underlined links.
 * No hover rule: the template doesn't define one.
 */
.prose a.button {
  display: block;
  width: fit-content;
  margin: 10px auto 20px;
  padding: 8px 25px;
  border-radius: 4px;
  background: #f58e0e;
  color: #fff;
  font-size: 18px;
  line-height: 20px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
}

/*
 * In-article link colour. The live template sets every link inside the
 * article body to orange — `.allinner_main .inner_services .left p a`, plus
 * the same colour for `ul a`, `ol a`, `li a` and `.content-table a`
 * (templates/GAH/css/questions.css). There is no hover variant in that scope,
 * so the colour is flat. This overrides @tailwindcss/typography's `prose`
 * anchor colour, which was rendering these green.
 *
 * `a.button` is excluded — those CTAs are white-on-orange buttons. Same for
 * `.ordernow_ourser_btn` (`/our-services`' real white-on-orange "Order Now"
 * CTA, `our-services.css`) — without the exclusion this rule's higher
 * specificity (two classes + a tag vs. that button's one class) overrode its
 * own `color:#fff`, rendering orange text on its own orange background.
 */
.prose a:not(.button):not(.ordernow_ourser_btn) {
  color: #f58e0e;
}

/*
 * CMS article body bullet lists (`.allinner_main .inner_services .left ul li`
 * in templates/GAH/scss/content.scss, also reused across the free-tool result
 * pages — dissertation/thesis/assignment/paraphrasing/AI-homework result
 * scss files all `@import` the same rule). The live site replaces the
 * default disc bullet with a green circular checkmark
 * (templates/GAH/images/result-right.svg, copied to public/icons/), sized
 * 18px and positioned where the marker would sit. `list-style: none` clears
 * @tailwindcss/typography's own `::marker` bullet, which this `::before`
 * icon replaces.
 */
.prose ul > li {
  list-style: none;
  padding-left: 30px;
  position: relative;
}

.prose ul > li::before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  width: 19px;
  height: 19px;
  background: url("/icons/result-right.svg") no-repeat;
  background-size: 18px;
}

/* Custom green scrollbar for blog sidebar tools list */
.custom-blog-scrollbar::-webkit-scrollbar {
  width: 5px;
}
.custom-blog-scrollbar::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 10px;
}
.custom-blog-scrollbar::-webkit-scrollbar-thumb {
  background: #5c8032;
  border-radius: 10px;
}
.custom-blog-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #466324;
}
.custom-blog-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #5c8032 #f1f5f9;
}

/*
 * Foundational container styling from Joomla's `common.scss`.
 * Scoped to CMS dynamic routes so that tools and pages rendering `.container`
 * maintain standard 1170px width and responsive breakpoints instead of full-bleed.
 */
.container {
  width: 1170px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

@media only screen and (max-width: 1200px) {
  .container {
    width: 992px;
  }
}

@media only screen and (max-width: 1199px) and (min-width: 992px) {
  .container {
    width: 992px;
  }
}

@media only screen and (max-width: 1023px) and (min-width: 768px) {
  .container {
    width: 730px;
  }
}

@media only screen and (max-width: 767px) {
  .container {
    width: auto;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
  }
}