/* ==========================================================
   Addicted to Disney — Cassiopeia custom styles (Joomla 6)
   File location: /media/templates/site/cassiopeia/css/user.css
   ========================================================== */

/* Load Google Fonts: Pacifico (logo) + Lato (body) */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Lato:wght@400;700&display=swap');

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

/* Banner container — full width, centred contents */
.atd-banner {
  width: 100%;
  text-align: center;
  padding: 1.5rem 1rem 0.5rem;
  box-sizing: border-box;
}

/* Make sure the parent module wrapper also spans full width */
.atd-banner-wrapper,
.mod-custom:has(.atd-banner) {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block;
}

/* Main logo / site title */
.atd-logo {
  font-family: 'Pacifico', cursive;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  margin: 0 auto;
  line-height: 1.2;
  color: #ffffff;
  text-align: center;
}

/* Tagline beneath the logo */
.atd-tagline {
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  margin: 0.25rem auto 0;
  color: #f3d9ff;
  text-align: center;
}

/* Strapline */
.atd-strap {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0.5rem auto 0;
  color: #ffd86b;
  text-align: center;
}

/* Apply Lato to body text across the whole site */
body {
  font-family: 'Lato', sans-serif;
}

/* Restore intended float-left layout on blog-item rows.
   The template's display:flex on .blog-item nullifies float:left
   on .item-image, which makes the figure stretch full-width and
   only the left rounded corners hug the actual image. */

.blog-item {
  display: block;
}

.blog-item .item-image.float-start {
  float: left;
  margin: 0 1rem 1rem 0;
  max-width: 100%;
}

.blog-item .item-image.float-end {
  float: right;
  margin: 0 0 1rem 1rem;
  max-width: 100%;
}

.blog-item .item-content {
  overflow: auto;   /* contain the float so the parent grows */
}

.navbar-brand,
.navbar-brand .brand-logo,
.navbar-brand img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* ---- Centered article images ----
   For images set via Joomla 6 Articles > Images and Links tab.
   To center an image, either:
   (a) set the float class to "float-none" in the article, OR
   (b) type "item-image-center" into the Image Class field.

   This also overrides the .blog-item display:block fix above so the
   figure can use auto margins to center itself. */

.blog-item .item-image.float-none,
.blog-item .item-image.item-image-center,
.item-page .item-image.float-none,
.item-page .item-image.item-image-center {
  float: none;
  display: block;
  margin: 0 auto 1rem auto;
  max-width: 100%;
  width: fit-content;     /* shrink wrapper to image so rounded corners hug it */
  text-align: center;
}

/* Ensure the image inside is centered if it's smaller than its figure */
.blog-item .item-image.float-none img,
.blog-item .item-image.item-image-center img,
.item-page .item-image.float-none img,
.item-page .item-image.item-image-center img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

/* Optional: center any figcaption underneath */
.blog-item .item-image.float-none figcaption,
.blog-item .item-image.item-image-center figcaption,
.item-page .item-image.float-none figcaption,
.item-page .item-image.item-image-center figcaption {
  text-align: center;
}

/* ---- Article image layout fixes (category blog + featured views) ----
   Joomla 6's .blog-item is display:flex column, which kills float on the
   figure and makes it stretch full-width. Restore intended behaviour.
   Joomla emits short-form classes (left/right/center) from the image
   dialog AS WELL AS Bootstrap (.float-start/.float-end). Cover both. */

.blog-item {
  display: block;
}

/* Float left */
.blog-item .item-image.left,
.blog-item .item-image.float-start {
  float: left;
  margin: 0 1rem 1rem 0;
  max-width: 100%;
  width: auto;
}

/* Float right */
.blog-item .item-image.right,
.blog-item .item-image.float-end {
  float: right;
  margin: 0 0 1rem 1rem;
  max-width: 100%;
  width: auto;
}

/* Centered — figure shrink-wraps the image, margin auto centers it */
.blog-item .item-image.center,
.blog-item .item-image.float-none,
.blog-item .item-image.item-image-center {
  float: none;
  display: block;
  margin: 0 auto 1rem auto;
  max-width: 100%;
  width: fit-content;
}

.blog-item .item-image.center img,
.blog-item .item-image.float-none img,
.blog-item .item-image.item-image-center img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

/* Self-clearing parent contains the float */
.blog-item .item-content {
  overflow: auto;
}

/* ---- Featured article cards on the homepage ----
   Subtle Disney-purple border + light shadow to make each card stand out
   against the cream background. Scoped to the featured view only so it
   won't touch category-blog cards or other pages. */

.blog-featured .blog-item {
  border: 1px solid #2a1a4e;
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(42, 26, 78, 0.08);
}

/* Tighten the inner figure so its margin doesn't fight the card padding */
.blog-featured .blog-item .item-image {
  margin-top: 0;
}

/* ---- Category blog cards ----
   Same Disney-purple card treatment for category blog views
   (Disneyland Paris, Walt Disney World, Disney Cruising, Beyond the Mouse). */

.com-content-category-blog .blog-item {
  border: 1px solid #2a1a4e;
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(42, 26, 78, 0.08);
}

.com-content-category-blog .blog-item .item-image {
  margin-top: 0;
}

/* ---- Cap floated article images so they don't dominate narrow cards ----
   When cards are in a 2-column grid the available width is ~560px;
   limit floated images to ~40% so titles and intro text have room. */

.blog-item .item-image.left,
.blog-item .item-image.right,
.blog-item .item-image.float-start,
.blog-item .item-image.float-end {
  max-width: 40%;
}

.blog-item .item-image.left img,
.blog-item .item-image.right img,
.blog-item .item-image.float-start img,
.blog-item .item-image.float-end img {
  width: 100%;
  height: auto;
}

/* ---- Article titles: purple + no underline ----
   Applies to article titles on category blog and featured views.
   Includes hover/focus states so the link stays clean throughout. */

.blog-item h2,
.blog-item h2 a,
.blog-item .item-title,
.blog-item .item-title a {
  color: #2a1a4e;
  text-decoration: none;
}

.blog-item h2 a:hover,
.blog-item h2 a:focus,
.blog-item .item-title a:hover,
.blog-item .item-title a:focus {
  color: #2a1a4e;
  text-decoration: none;
}

/* ---- Category image rounded corners ----
   The image at the top of category pages (Disneyland Paris, etc.) renders
   with no corner rounding by default. Match the rest of the site. */

.category-desc img,
.com-content-category-blog .category-desc img {
  border-radius: 12px;
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---- Article image rounded corners on single article view ----
   On single article pages (.item-page) the figure has rounded corners
   but overflow:visible, so the image overflows the rounding. Force
   the clip, and apply matching radius to the image itself as a fallback. */

.item-page .item-image,
.com-content-article .item-image {
  border-radius: 12px;
  overflow: hidden;
}

.item-page .item-image img,
.com-content-article .item-image img {
  border-radius: 12px;
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---- Centered images on single article view ----
   Match the behaviour we set on .blog-item: figure shrinks to image,
   margin auto centers it. */

.item-page .item-image.center,
.item-page .item-image.float-none,
.com-content-article .item-image.center,
.com-content-article .item-image.float-none {
  float: none;
  display: block;
  margin: 0 auto 1rem auto;
  max-width: 100%;
  width: fit-content;
}

/* Float left/right on single article view */
.item-page .item-image.left,
.item-page .item-image.float-start,
.com-content-article .item-image.left,
.com-content-article .item-image.float-start {
  float: left;
  margin: 0 1rem 1rem 0;
  max-width: 40%;
}

.item-page .item-image.right,
.item-page .item-image.float-end,
.com-content-article .item-image.right,
.com-content-article .item-image.float-end {
  float: right;
  margin: 0 0 1rem 1rem;
  max-width: 40%;
}

/* ---- Inline article body images (JCE-embedded) ----
   Round corners on any image inside the article body content.
   Scoped to .com-content-article__body so it doesn't touch the
   site banner, sidebar modules, or social share icons. */

.com-content-article__body img {
  border-radius: 12px;
}