/* Islamic Help Türkiye brand overrides on top of the Charifund theme.
   Kept separate from main.css/default-theme.css so vendor files stay diffable
   against the original template. */

/* ---- Brand palette (same token names as WebApp.Dashboard/wwwroot/css/brand.css) ---- */
:root {
  --color-sanctuary: #004c51;
  --color-hope: #ffeda9;
  --color-teal-accent-2: #d4f4ee;
}

/* ---- Buttons: one consistent pattern for every button on the site.
   Default: sanctuary background, white text. Hover: hope background, sanctuary text.
   Overrides the template's three differently-colored button variants (which otherwise
   nearly canceled each other out anyway, since --base-color/--secondary-color/
   --quaternary-color all resolve to the same brand teal) while keeping its sliding-fill
   hover animation (the ::before/::after layers). ---- */
.btn--primary,
.btn--secondary,
.btn--tertiary {
  background-color: var(--color-sanctuary);
  color: var(--white);
}

.btn--primary::before, .btn--primary::after,
.btn--secondary::before, .btn--secondary::after,
.btn--tertiary::before, .btn--tertiary::after {
  background-color: var(--color-sanctuary);
}

.btn--primary path, .btn--secondary path, .btn--tertiary path {
  fill: var(--white);
}

.btn--primary:hover,
.btn--secondary:hover,
.btn--tertiary:hover {
  background-color: var(--color-hope);
  color: var(--color-sanctuary);
}

.btn--primary:hover path, .btn--secondary:hover path, .btn--tertiary:hover path {
  fill: var(--color-sanctuary);
}

/* ---- Header logo: bigger, with the same logo+title+subtitle lockup as the Dashboard ---- */
.header .navbar-logo {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.header .navbar-logo img {
  max-width: none;
  height: 64px;
  width: auto;
}

.header .navbar-logo .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.header .navbar-logo .brand-title {
  font-family: var(--nunito);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--secondary-color);
  white-space: nowrap;
}

.header .navbar-logo .brand-subtitle {
  font-family: var(--template-font);
  font-size: 0.85rem;
  color: var(--template-color);
  white-space: nowrap;
}

/* ---- Footer logo: the template renders it at its native (very large) size ---- */
.footer-two__widget-logo img {
  max-width: 130px;
  height: auto;
}

/* ---- Topbar address: template lowercases every topbar link's text. main.css's
   rule is `.topbar .topbar__list a` (2 classes + 1 type = higher specificity than
   a 2-class-only override), so it must be matched here to actually win. ---- */
.topbar .topbar__list .topbar__address {
  text-transform: none;
}

/* ---- Home banner slides: prev/next arrows hidden (too visually heavy) - pagination
   dots are the only way to navigate manually now, autoplay still cycles the rest.
   swiper-bundle.min.css (added to _Layout.cshtml - it was never linked before, so
   every pagination dot sitewide was missing its base size/shape/position styling)
   supplies the dot shape/position; these rules just recolor it to the brand palette,
   since the template's own default dot colors don't relate to it at all. ---- */
.banner-three__navigation {
  display: none;
}

.banner-three-pagination.swiper-pagination {
  position: static;
  margin-top: 16px;
}

.banner-three-pagination .swiper-pagination-bullet {
  background-color: var(--color-teal-accent-2);
  opacity: 0.6;
}

.banner-three-pagination .swiper-pagination-bullet-active {
  background-color: var(--color-hope);
  opacity: 1;
}

/* ---- Home overview box (the two-tone "Total Raised Fund" card): the right half's
   markup was missing the .overview__single class the template's own source has
   alongside .overview__right - that class is what actually carries the box's
   padding, so the right half was rendering with none at all, not just a missing
   top edge. Left/right both resolve to the same brand teal by default now that
   --base-color and --quaternary-color have been unified - split them back out
   explicitly: a pale teal (not pure white, which blends into the page background
   and loses the card's shape) on the left, sanctuary teal on the right. Right also
   gets its own fixed padding rather than relying on .overview__single's, since that
   one changes at a responsive breakpoint and text was reading right up to the edge. ---- */
.overview .overview__left {
  background-color: var(--color-teal-accent-2);
}

.overview .overview__right {
  padding: 40px;
}

/* ---- Geometric pattern fill: a diagonal sanctuary-teal gradient with a faint
   tone-on-tone Islamic geometric line pattern (interlocking circles - the classic
   construction grid behind most star/rosette motifs), for solid-color sections that
   were otherwise just flat empty color. Built as an inline SVG tile rather than a
   raster asset so it stays crisp at any box size and recolors for free if the brand
   palette ever changes.
   Applied to:
   - .overview__right: was flat sanctuary teal with a lot of bare space around the
     stat text.
   - .cm-sidebar-overview (project-details donate CTA): had NO background at all in
     the whole CSS bundle - it only ever looked right in the original template
     because that box expects a JS-driven parallax photo (.parallax-image) that this
     port's markup doesn't include, so its white text was rendering on nothing. ---- */
.overview .overview__right,
.cm-details .cm-sidebar-overview {
  background-color: var(--color-sanctuary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.14'%3E%3Ccircle cx='0' cy='0' r='29'/%3E%3Ccircle cx='84' cy='0' r='29'/%3E%3Ccircle cx='0' cy='84' r='29'/%3E%3Ccircle cx='84' cy='84' r='29'/%3E%3Ccircle cx='42' cy='42' r='29'/%3E%3Ccircle cx='42' cy='0' r='29'/%3E%3Ccircle cx='42' cy='84' r='29'/%3E%3Ccircle cx='0' cy='42' r='29'/%3E%3Ccircle cx='84' cy='42' r='29'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--color-sanctuary) 0%, #012e31 100%);
  background-repeat: repeat, no-repeat;
  background-size: 84px 84px, cover;
}

/* ---- Footer geometric pattern overlay: a light added LAYER on top of .footer-two's
   own background-color and its dark vignette (::after in main.css), riding on a new
   ::before pseudo-element (z-index -1, between the base color and the vignette) so
   neither is disturbed. wwwroot/images/IH-Patteren-18.png is the user's own asset - a
   1320x302 tileable, mostly-transparent PNG (faint white line pattern baked in at low
   alpha), so it's used as-is with no extra CSS opacity needed. ---- */
.footer-two {
  overflow: hidden;
}

.footer-two::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/images/IH-Patteren-18.png");
  background-repeat: repeat;
  background-position: center;
  z-index: -1;
  pointer-events: none;
}

/* ---- Bank account cards (/hesap-bilgileri): the template has no ready-made table or
   pricing-card component that fits a "bank name + currency rows" layout, so this is a
   small custom component built from the same visual vocabulary as the rest of the site
   (.cause__slider-single's white/shadow/15px-radius card, sanctuary-teal accents). ---- */
.bank-accounts__intro {
  margin-bottom: 30px;
  font-size: 18px;
}

.bank-account {
  height: 100%;
  padding: 30px;
  background-color: var(--white);
  box-shadow: var(--shadow);
  border-radius: 15px;
}

.bank-account__header {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eef0ef;
}

.bank-account__header h5 {
  margin-bottom: 12px;
  color: var(--color-sanctuary);
}

.bank-account__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bank-account__meta li {
  font-size: 14px;
}

.bank-account__meta span {
  font-weight: 600;
  color: var(--secondary-color);
}

.bank-account__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 10px 0;
}

.bank-account__row + .bank-account__row {
  border-top: 1px dashed #eef0ef;
}

.bank-account__currency {
  flex: 0 0 44px;
  font-weight: 700;
  color: var(--color-sanctuary);
}

.bank-account__iban {
  flex: 1 1 220px;
  font-size: 14px;
  letter-spacing: 0.3px;
}

.bank-account__copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-sanctuary);
  background-color: var(--color-teal-accent-2);
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.bank-account__copy:hover {
  background-color: var(--color-sanctuary);
  color: var(--white);
}

.bank-account__copy--done {
  background-color: var(--color-sanctuary);
  color: var(--white);
}

/* ---- Banner eyebrow text: .sub-title's default color (--base-color, our dark sanctuary
   teal) is nearly invisible against .banner-three's dark navy background - it's only
   readable on the light-background sections elsewhere on the page, so this is scoped to
   .banner-three specifically rather than changed globally. Hope is already the accent
   used for hover states and the active pagination dot in this same section. ---- */
.banner-three .sub-title {
  color: var(--color-hope);
}

/* ---- Banner headline highlight: the template's .bottom-line span used the whimsical
   Caveat script font (unrelated to the serious Antonio heading font used everywhere
   else) and a thick 4px underline stroke. Switch the font to match the rest of the
   heading and thin the underline. ---- */
.banner-three h1 span {
  font-family: var(--nunito);
}

.bottom-line {
  /* Original curve's control points swooped from y=13 up to y=-3.87 (off the top of the
     15px viewBox), reading as a sharp diagonal tilt rather than an underline. This path
     keeps a faint hand-drawn wave but stays within a couple of pixels of level. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='196' height='15' viewBox='0 0 196 15' fill='none'%3E %3Cpath d='M1 11C50 9 145 9 195 10' stroke='%23FBAD17' stroke-width='2'/%3E %3C/svg%3E");
}

/* ---- Same eyebrow-text problem as .banner-three, on every interior page's banner
   (About, Team, FAQ, Gallery, Vision/Mission/Values, Error): .sub-title's default dark
   teal is unreadable against .common-banner's dark photo/gradient background. ---- */
.common-banner .sub-title {
  color: var(--color-hope);
}

/* ---- Breathing room below every interior page banner: the next section's heading was
   sitting right against the banner image with no visual gap. ---- */
.common-banner {
  margin-bottom: 40px;
}

/* ---- Gallery marquee items: pointer cursor hints they're clickable (opens the
   lightbox, see lightbox.js), and a capped/cover image height keeps every photo the
   same size in the row regardless of its native aspect ratio. ---- */
.gallery__single {
  cursor: pointer;
}

.gallery__single img {
  max-height: 300px;
  object-fit: cover;
}

/* ---- Lightbox: the template ships magnific-popup's JS but never its CSS (no .mfp-
   rules anywhere in this build), so a from-scratch, framework-free overlay is used
   instead for "click a gallery photo to view it full-size" (see lightbox.js). ---- */
.simple-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(9, 31, 27, 0.92);
  align-items: center;
  justify-content: center;
}

.simple-lightbox.is-active {
  display: flex;
}

.simple-lightbox__image {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.simple-lightbox__close,
.simple-lightbox__prev,
.simple-lightbox__next {
  position: absolute;
  background: var(--color-hope);
  color: var(--color-sanctuary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.simple-lightbox__close:hover,
.simple-lightbox__prev:hover,
.simple-lightbox__next:hover {
  background: var(--white);
}

.simple-lightbox__close {
  top: 24px;
  inset-inline-end: 24px;
  width: 44px;
  height: 44px;
  font-size: 22px;
}

.simple-lightbox__prev,
.simple-lightbox__next {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 20px;
}

.simple-lightbox__prev {
  inset-inline-start: 24px;
}

.simple-lightbox__next {
  inset-inline-end: 24px;
}

body.simple-lightbox-open {
  overflow: hidden;
}

/* ---- Gallery listing page: the template's .gallery section has no vertical spacing
   of its own (it was designed as a single one-off strip, not a stack of several), so
   consecutive galleries sat flush against each other with no gap. ---- */
.gallery {
  margin-bottom: 60px;
}

/* ---- Reports page: reuses the Causes card (.cause .thumb), but reports rarely have a
   cover thumbnail. This fills the same 200px image slot with a plain icon instead of
   leaving a broken/empty image. ---- */
.report-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  width: 100%;
  border-radius: 15px;
  background-color: var(--color-sanctuary);
  color: var(--color-hope);
  font-size: 56px;
}

/* ---- Reports page: a language badge, styled like the Causes card's category tag
   (.cause .thumb .tag a) but decoupled from it since this isn't a filterable link. ---- */
.report-language-badge {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  padding: 8px 24px;
  background-color: var(--color-hope);
  border-radius: 30px;
  color: var(--color-sanctuary);
  font-size: 13px;
  font-weight: 600;
}

/* ---- Equal-height cause cards: .cause__slider-single sizes itself to its own content,
   so cards with a longer title/description sat a different height than their row
   siblings (Reports, Causes, Donate, and the Home cause carousel all share this
   component). Bootstrap's row already stretches each column to the tallest one, but
   nothing below the column was filling that height - this makes the whole chain stretch
   and lets .content grow so the CTA/button row lands on a consistent bottom edge. A
   min-height keeps a lone short card from looking sparse regardless of its row. ---- */
.cause .cause__slider-inner {
  height: 100%;
}

.cause .cause__slider-single {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 430px;
}

.cause .cause__slider-single .content {
  flex-grow: 1;
}

/* ---- Preloader: swaps the template's generic hand-heart icon font glyph (.preloader i)
   for our actual logo mark. Same badge size/flip animation as the original; the logo
   asset is already a self-contained circular badge, so it fills the slot fully instead
   of shrinking into a second background circle. ---- */
.preloader__logo {
  width: 100px;
  min-width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
  animation: flipY 3s linear infinite;
}

.preloader__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---- Same dark-bg/black-text contrast bug as the buttons above (--base-color,
   --secondary-color and --quaternary-color are all the same brand teal now), on every
   other component that pairs one of them with --black: the cause/project category tag
   pill, the carousel prev/next arrows, and the "how it works" step icons on hover.
   Same fix pattern: sanctuary bg + white text by default, hope bg + sanctuary text on
   the inverted/hover state. ---- */
.cause .thumb .tag a {
  background-color: var(--color-sanctuary);
  color: var(--white);
}

.cause .thumb .tag a:hover {
  background-color: var(--color-hope);
  color: var(--color-sanctuary);
}

.slider-navigation .slider-btn,
.slider-navigation .slider-btn-next {
  background-color: var(--color-sanctuary);
  color: var(--white);
}

.slider-navigation .slider-btn:hover,
.slider-navigation .slider-btn-next:hover {
  background-color: var(--color-hope);
  color: var(--color-sanctuary);
}

.help-three .help-three__single:hover .thumb i,
.help-three .help-three__single:hover .help-three__tag h6 {
  color: var(--white);
}

/* ---- Cause/project thumb images: the fallback stock photos mix landscape and
   portrait aspect ratios, and the template's fixed 200px-tall image box had no
   object-fit, so it stretched/squashed each one differently instead of cropping
   them to a consistent look. ---- */
.cause .thumb a img {
  object-fit: cover;
}