/**
 * Phramea CMS - Diamond Fuar theme
 * CMS integration overrides — kept separate from the vendored style.css/theme.css
 * so the ported DiamondFair assets stay untouched and diffable.
 */

:root {
  --primary: #32393E;
  --secondary: #D2D9E0;
}

/* Bug fix — the hero slider had no fixed height: #heroSlider .carousel-item's height came
   purely from .content-text's padding + the caption text's own wrapped line count. With real
   slide titles of very different lengths ("The scene" vs "Sizi ve Markanızı En İyi Şekilde
   Temsil Eder!"), every slide rendered at a different height, so the cover image visibly
   grew/shrank as the carousel auto-advanced. Giving the slider a fixed height and letting the
   absolutely-positioned image and caption both fill it makes every slide the same size. */
.section-hero.hero-1 {
  height: 85vh;
  min-height: 650px;
}

.section-hero.hero-1 #heroSlider,
.section-hero.hero-1 .carousel-inner,
.section-hero.hero-1 .carousel-item {
  height: 100%;
}

.section-hero.hero-1 .carousel-item > div {
  height: 100%;
  display: flex;
  align-items: center;
}

.section-hero.hero-1 .carousel-captions {
  width: 100%;
}

.section-hero.hero-1 .content-text {
  padding: 0 !important;
}

@media (max-width: 991.98px) {
  .section-hero.hero-1 {
    height: 75vh;
    min-height: 550px;
  }
}

@media (max-width: 575.98px) {
  .section-hero.hero-1 {
    height: 65vh;
    min-height: 480px;
  }
}

/* Carousel indicators: fixed at 220px per item (real .heading-title bug's sibling issue) only
   makes sense for a handful of slides — with real content (9 slides imported from the legacy
   site) that's 1980px at ≥1200px width, overflowing every desktop viewport and pushing the
   leftmost captions off-screen. The vendor CSS already solves this below 1200px by hiding the
   caption text for every indicator except the active one — apply that same rule at all widths
   instead of only below the 1200px breakpoint. */
.carousel-indicators {
  --bs-carousel-indicator-width: fit-content !important;
}

.carousel-indicators .indecators-description {
  display: none;
}

.carousel-indicators .active {
  max-width: 240px;
}

.carousel-indicators .active .indecators-description {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  padding-bottom: 1px;
}

/* Bug fix — the vendored style.css puts its fluid "display heading" scale directly on the
   BARE h1/h2/h3 tag selectors (h1≈150px, h2≈130px, h3≈60px at desktop widths ≥1200px), not
   just on the opt-in .display-1/.display-2/.display-3 classes. That's correct for the
   decorative giant "stroke" background text (.stroke-heading, used deliberately at huge
   sizes throughout this theme) but it also inflates ordinary section titles and bar headings
   that carry no such class — e.g. every "Hizmetlerimiz"/"Projelerimiz" h2.heading-title was
   rendering at 130px, and the newsletter bar's h2 the same. These selectors are more specific
   than the vendor's bare h1/h2/h3 rule, so they win without touching the legitimate huge text. */
.heading-title {
  font-size: 2.25rem;
}

.newsletter-bar-title {
  font-size: 1.5rem;
}

@media (max-width: 767.98px) {
  .heading-title {
    font-size: 1.75rem;
  }

  .newsletter-bar-title {
    font-size: 1.25rem;
  }
}

/* Blog/page article titles opted into .display-3 (80-100px at desktop) for a "big editorial"
   look, but at that size a normal article title reads as broken, not premium. Dial it back to
   a still-bold but proportionate size. */
.blog-single-text .display-3 {
  font-size: 2.5rem;
}

@media (max-width: 767.98px) {
  .blog-single-text .display-3 {
    font-size: 1.75rem;
  }
}

/* Preloader — the source template used a lottie-host animation pulled from an
   un-vendored external CDN; replaced with a small self-contained CSS spinner. */
.diamondfuar-spinner {
  display: block;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 4px solid rgba(50, 57, 62, .15);
  border-top-color: var(--primary);
  animation: diamondfuar-spin 0.8s linear infinite;
}

@keyframes diamondfuar-spin {
  to { transform: rotate(360deg); }
}

/* Shared frontend components (site-search, share-buttons, page-blocks, captcha, contact-channels,
   social-links, phramea-badge) ship their own generic classnames from resources/views/components — these
   few rules just make sure they read naturally on the dark DiamondFair topbar/footer. */
.topbar .site-social-links,
footer .site-social-links {
  display: flex;
  gap: .5rem;
}

.site-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  transition: background .3s ease, color .3s ease;
}

.site-social-link:hover {
  background: var(--social-color, var(--secondary));
  color: var(--bs-primary, #32393E);
}

/* Empty-state placeholder (products/services/blog/references with no rows yet) */
.diamondfuar-empty-state {
  text-align: center;
  padding: 5rem 1rem;
  color: rgba(50, 57, 62, .55);
}

.diamondfuar-empty-state i {
  font-size: 2.75rem;
  margin-bottom: 1rem;
  opacity: .35;
}

.diamondfuar-empty-state p {
  margin: 0;
  font-weight: 600;
}

/* Breadcrumb readability on the dark section-banner */
.section-banner .breadcrumb {
  --bs-breadcrumb-divider-color: rgba(255, 255, 255, .4);
  margin-bottom: 0;
}

.section-banner .breadcrumb-item a {
  color: rgba(255, 255, 255, .65);
  text-decoration: none;
}

.section-banner .breadcrumb-item a:hover {
  color: #fff;
}

.section-banner .breadcrumb-item.active {
  color: rgba(255, 255, 255, .9);
}

/* Simple grid product/reference/blog cards reusing the theme's .blog-wrapper pattern
   outside of a swiper-slide context (listing pages use a plain Bootstrap row/col grid). */
.grid-card-wrapper {
  height: 100%;
}

.grid-card-wrapper .blog-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Bug fix — same class of issue as the hero: .blog-image had no size rule anywhere in the
   vendored CSS, so each card's image rendered at its own native size instead of a uniform
   card thumbnail — cards visibly jumped between small and large depending on the source
   photo's dimensions. General rule (not just inside .grid-card-wrapper) covers every place
   .blog-wrapper is used: homepage blog/products sections and the blog listing page. */
.blog-image {
  overflow: hidden;
}

.blog-image img {
  width: 100%;
  height: 230px;
  object-fit: cover;
}

/* Nested (3rd level+) dropdown positioning — the source template referenced a
   ".dropdown-submenu" class in Statics/header.php but never shipped matching CSS,
   so any menu deeper than 2 levels needs this to open to the side instead of stacking. */
.hover-menu .dropdown-submenu {
  position: relative;
}

.hover-menu .dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

@media (max-width: 1199.98px) {
  .hover-menu .dropdown-submenu > .dropdown-menu {
    position: static;
    left: 0;
  }
}

/* Quote-page file dropzone (quote-page.js DOM hooks — #quoteFileDrop/#quoteFileInput/#quoteFileName —
   were ported verbatim from the sohtorik theme for functional parity; styling below is new since the
   source DiamondFair template had no equivalent widget). */
.quote-file-drop {
  border: 2px dashed rgba(50, 57, 62, .25);
  border-radius: 6px;
  padding: 2rem 1rem;
  text-align: center;
  position: relative;
  transition: border-color .2s ease, background-color .2s ease;
}

.quote-file-drop.is-dragover {
  border-color: var(--primary);
  background-color: rgba(50, 57, 62, .04);
}

.quote-file-drop .quote-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.quote-file-drop-inner small {
  display: block;
  opacity: .6;
}

/* Floating widgets (livewire/floating-widgets.blade.php — WhatsApp/Telegram/phone/scroll-top,
   admin-managed under Ayarlar > Bildirimler & Widget'lar). The vendored style.css only ever
   styled the old static #backToTop button; the live component uses these classes instead. */
.floating-widgets {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  z-index: 999;
}

.floating-btn {
  width: var(--floating-widget-size, 50px);
  height: var(--floating-widget-size, 50px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, .25);
  transition: transform .3s ease, background-color .3s ease;
  border: none;
}

.floating-btn:hover {
  transform: scale(1.12);
  color: #fff;
}

.floating-btn.whatsapp { background: #25D366; }
.floating-btn.telegram { background: #0088cc; }
.floating-btn.phone { background: var(--primary); }
.floating-btn.scroll-top { background: var(--secondary, #D2D9E0); color: var(--primary); display: none; }
.floating-btn.scroll-top.show { display: flex; }
.floating-btn.quote { background: var(--accent, #f0a500); }

[dir="rtl"] .floating-widgets { right: auto; left: 2rem; }

/* Pagination (Laravel paginator markup) rendered with the theme's arrow buttons */
.diamondfuar-pagination {
  margin-top: 3rem;
}

.diamondfuar-pagination .pagination {
  justify-content: center;
  gap: .5rem;
}

/* Bug fix — the header's solid states (scrolled/"sticky" and the mobile breakpoint, where the
   frosted-glass-over-hero look intentionally becomes a plain solid bar) were hardcoded to
   #f9f9f9 and never read the Theme Studio's --header-bg/--header-bg-dark, so "Header Arka Plan"
   had no visible effect. The floating glass state (rgba(255,255,255,.2) + blur, at page-top on
   desktop) is left alone — it's a deliberate design choice, not something a flat color setting
   should overwrite. */
.header-bg-1.sticky { --bs-header-bg: var(--header-bg); }
@media (max-width: 1199.98px) {
  .header-bg-1 { --bs-header-bg: var(--header-bg); }
}
[data-bs-theme="dark"] .header-bg-1.sticky,
body.dark-theme .header-bg-1.sticky {
  --bs-header-bg: var(--header-bg-dark);
}

/* Bug fix — the base .btn rule hardcoded --bs-btn-border-radius: 0, so the Theme Studio's
   "Buton Border Radius" field had no effect at all. 0px matches diamondfuar's own sharp-corner
   design by default (see theme.json defaults.buttons.radius), so nothing changes visually
   until an admin actually picks a different radius. */
.btn { --bs-btn-border-radius: var(--btn-radius, 0); }

/* Bug fix — the header's solid states (scrolled/"sticky" and the mobile breakpoint, where the
   instead of the Theme Studio's --footer-bg/--footer-text/--footer-heading/--footer-link
   variables, so changing "Footer" colors in the admin panel had zero visible effect and the
   footer's text/links used whatever color Bootstrap's default body text happened to be
   (unreadable against a light secondary background, since those vars assume a dark footer). */
.section-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding-top: var(--footer-padding-y, 4rem);
  padding-bottom: var(--footer-padding-y, 4rem);
}
.section-footer .address-details h5,
.section-footer .footer-contents > div > div > span.logo + p,
.section-footer p.fw-semibold.mb-0 {
  color: var(--footer-heading);
}
.section-footer a {
  color: var(--footer-link);
}
.section-footer a:hover {
  color: var(--footer-link-hover);
}
.section-footer .copyright {
  border-top: 1px solid var(--footer-border);
  padding-top: 1.5rem;
  margin-top: 1.5rem;
}
@media (max-width: 767.98px) {
  .section-footer {
    padding-top: var(--footer-padding-y-mobile, 2.5rem);
    padding-bottom: var(--footer-padding-y-mobile, 2.5rem);
  }
}