/* =====================================================================
   ArtSpace Nepal — Brand design layer  ("the website is a canvas")
   Loaded AFTER style.css + skin-1.css. Concept: a warm woven artist's
   canvas as the page base, gallery-framed imagery, an expressive serif
   (Fraunces) for headlines echoing the hand-painted logo, and accent
   colours drawn straight from the logo's palette.
   ===================================================================== */

:root {
  /* Brand core (teal from skin-1) */
  --primary: #054249;
  --primary-hover: #07565f;
  --primary-dark: #032d32;

  --rgba-primary-1: rgba(5, 66, 73, 0.08);
  --rgba-primary-2: rgba(5, 66, 73, 0.16);
  --rgba-primary-3: rgba(5, 66, 73, 0.24);
  --rgba-primary-4: rgba(5, 66, 73, 0.32);
  --rgba-primary-5: rgba(5, 66, 73, 0.40);
  --rgba-primary-6: rgba(5, 66, 73, 0.55);
  --rgba-primary-7: rgba(5, 66, 73, 0.70);
  --rgba-primary-8: rgba(5, 66, 73, 0.82);
  --rgba-primary-9: rgba(5, 66, 73, 0.92);

  /* Artist's-palette accents sampled from the logo */
  --art-terracotta: #C8472F;
  --art-ochre:      #E0A12E;
  --art-sage:       #5E9E63;
  --art-teal:       #2F7E8C;
  --art-plum:       #7E5AA2;

  --gradient1: linear-gradient(307deg, #F2D9A6 1.9%, #F3C7B0 67.57%);
  --gradient2: linear-gradient(307deg, #E9C07A 1.9%, #D79A86 85.96%);

  /* Canvas + surface tokens */
  --canvas-base:  #E8DFCC;   /* warm woven canvas (page base)       */
  --canvas-thread: rgba(94, 72, 38, 0.06);
  --as-surface:   #FFFDF9;   /* clean gallery panel / card          */
  --as-surface-2: #FBF6ED;   /* warm panel                           */
  --as-ink:       #20211D;   /* near-black text, warmer than #000    */
  --as-muted:     #5d5a52;
  --as-line:      rgba(32, 33, 29, 0.10);
  --as-frame:     #ffffff;   /* gallery mat                          */
  --as-shadow-sm: 0 2px 10px rgba(40, 30, 15, 0.06);
  --as-shadow-md: 0 14px 36px rgba(40, 30, 15, 0.10);
  --as-shadow-lg: 0 28px 70px rgba(40, 30, 15, 0.12);
}

/* ---------------------------------------------------------------------
   1. THE CANVAS  — a real, felt woven texture across the whole site.
   Two fine repeating thread grids = the weave; a warm wash + the lokta
   fibre photo add organic grain; a soft top light gives gallery depth.
   `fixed` makes the entire site read as one continuous canvas.
   --------------------------------------------------------------------- */
body#bg {
  color: var(--as-ink);
  background-color: var(--canvas-base);
  background-image:
    repeating-linear-gradient(90deg, var(--canvas-thread) 0, var(--canvas-thread) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(0deg,  var(--canvas-thread) 0, var(--canvas-thread) 1px, transparent 1px, transparent 4px),
    radial-gradient(120% 80% at 50% 0%, rgba(255, 253, 247, 0.55), rgba(232, 223, 204, 0) 55%),
    linear-gradient(rgba(232, 223, 204, 0.55), rgba(232, 223, 204, 0.55)),
    url("../images/brand-bg/cream-texture.jpg");
  background-size: 4px 4px, 4px 4px, 100% 100%, 100% 100%, cover;
  background-position: 0 0, 0 0, center top, center, center;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: fixed, fixed, fixed, fixed, fixed;
}

/* Content layers sit transparently on the canvas instead of repainting it */
.page-content,
.page-content.bg-light {
  background-color: transparent !important;
  background-image: none !important;
}

@media (max-width: 767px) {
  body#bg {
    background-attachment: scroll, scroll, scroll, scroll, scroll;
  }
}

/* ---------------------------------------------------------------------
   2. TYPOGRAPHY  — Fraunces display serif (echoes the brush logo) over
   DM Sans body. Editorial, warm, gallery — never childish.
   --------------------------------------------------------------------- */
body,
.page-wraper,
p, li, a, span, label, input, textarea, select, td, th, blockquote {
  font-family: "DM Sans", sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.title, .dz-title, .widget-title, .display-1, .display-2,
.display-3, .display-4, .display-5, .display-6,
.dz-head, .site-title {
  font-family: "Fraunces", Georgia, serif !important;
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--as-ink);
}

/* Big hero / banner titles: a touch more drama + tighter leading */
.display-1, .display-2, .display-3,
.dz-bnr-inr .dz-bnr-inr-entry .title,
h1.title {
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

/* Expressive italic accent (used for emphasised words in headings) */
h1 em, h2 em, .title em, .display-1 em, .display-2 em, .display-3 em,
.dz-head em, .font-italic-serif {
  font-style: italic;
  font-weight: 500;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.75;
}
p { line-height: 1.85; color: var(--as-muted); }

/* Eyebrow / overline labels — small, tracked, gallery-style */
.sub-title, .sub-title-2, .dz-subtitle {
  font-family: "DM Sans", sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
}
/* small brush-tick before eyebrow labels */
.sub-title::before, .dz-subtitle::before {
  content: "";
  display: inline-block;
  width: 22px; height: 2px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--art-terracotta);
  border-radius: 2px;
}

.btn { letter-spacing: 0.04em; font-weight: 500; font-family: "DM Sans", sans-serif; }

/* ---------------------------------------------------------------------
   3. SURFACES  — clean gallery panels floating on the canvas.
   --------------------------------------------------------------------- */

/* Header: the SAME fixed canvas as the body, so it reads as one seamless
   continuous texture from header → sections → footer. Because the layers
   are background-attachment: fixed, the header shows the exact aligned
   slice of canvas behind it, even when it sticks on scroll. */
.site-header.style-1.header-transparent .main-bar,
.site-header.style-1 .main-bar {
  background-color: var(--canvas-base) !important;
  background-image:
    repeating-linear-gradient(90deg, var(--canvas-thread) 0, var(--canvas-thread) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(0deg,  var(--canvas-thread) 0, var(--canvas-thread) 1px, transparent 1px, transparent 4px),
    radial-gradient(120% 80% at 50% 0%, rgba(255, 253, 247, 0.55), rgba(232, 223, 204, 0) 55%),
    linear-gradient(rgba(232, 223, 204, 0.55), rgba(232, 223, 204, 0.55)),
    url("../images/brand-bg/cream-texture.jpg") !important;
  background-size: 4px 4px, 4px 4px, 100% 100%, 100% 100%, cover !important;
  background-position: 0 0, 0 0, center top, center, center !important;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat !important;
  background-attachment: fixed, fixed, fixed, fixed, fixed !important;
  border-bottom: 1px solid var(--as-line) !important;
  box-shadow: none;
}

/* Sticky state: same canvas, now lifted off the page with a shadow */
.site-header.style-1 .is-fixed .main-bar {
  box-shadow: var(--as-shadow-md) !important;
}

/* Nav links: the Fraunces display serif to match the headlines (cohesive,
   gallery-elegant), dark ink so they're legible on the light canvas bar. */
.header-nav .nav > li > a,
.header-nav .nav > li > a span {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500;
  letter-spacing: 0;
}
/* Comfortable desktop spacing. NOTE: responsive breakpoints (incl. when
   the 9-item menu should collapse to a hamburger) are a deliberate pass
   to do AFTER the visual design is signed off — not tuned here yet. */
@media (min-width: 992px) {
  .header-nav .nav > li > a { padding-left: 14px !important; padding-right: 14px !important; }
}
@media (min-width: 992px) {
  .header-transparent .header-nav .nav > li > a,
  .header-transparent .is-fixed .header-nav .nav > li > a {
    color: var(--as-ink) !important;
  }
  .header-transparent .header-nav .nav > li.active > a,
  .header-transparent .header-nav .nav > li:hover > a {
    color: var(--primary) !important;
  }
}
/* Hamburger / toggler bars dark on the light bar */
.header-transparent .navbar-toggler span,
.header-transparent .side-menu-btn .menu-icon-in span { background-color: #444 !important; }
/* NOTE: do NOT force .logo-dark to display:block here — it would also
   un-hide the off-canvas menu's duplicate logo on desktop. The template
   already shows the colour logo by default (header isn't .header-text-white). */

/* Dropdowns / mega-menu / mobile nav / search → solid panels */
.header-nav .mega-menu,
.dz-search-area.dz-offcanvas {
  background-color: var(--as-surface) !important;
  background-image: none !important;
}
.header-nav .mega-menu {
  border-radius: 14px;
  box-shadow: var(--as-shadow-md);
  border: 1px solid var(--as-line);
  overflow: hidden;
}
@media (max-width: 991px) {
  .header-nav {
    background-color: var(--as-surface) !important;
    background-image: none !important;
    box-shadow: var(--as-shadow-lg);
  }
}

/* Footer: same woven canvas as the body. Transparent so the body's fixed
   canvas shows straight through — one continuous, seamless texture. */
.site-footer.style-1 {
  background-color: transparent !important;
  background-image: none !important;
}

/* Card components → gallery panels with soft elevation */
/* NOTE: .dz-card is excluded — it's only used for blog cards (.style-5 on
   /blogs and blog-detail related posts) which carry their own bespoke design;
   the white card chrome here clashed with them. */
.dz-box.style-1,
.dz-team,
.dz-shop-card,
.cart-detail,
.widget.style-1,
.testimonial-1,
.dz-img-box,
.review-box,
.dz-info-box,
.icon-bx-wraper.style-1 {
  background-color: var(--as-surface);
  border-radius: 14px;
  box-shadow: var(--as-shadow-sm);
  border: 1px solid var(--as-line);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.dz-box.style-1:hover,
.dz-team:hover,
.dz-shop-card:hover,
.dz-img-box:hover {
  box-shadow: var(--as-shadow-md);
  transform: translateY(-5px);
}

/* ---------------------------------------------------------------------
   4. GALLERY FRAMING  — imagery presented like framed art on the wall:
   a white mat + hairline + soft drop shadow.
   --------------------------------------------------------------------- */
.dz-card .dz-media,
.dz-box .dz-media,
.dz-img-box .dz-media,
.portfolio-box .dz-media,
.dz-gallery-box .dz-media {
  border-radius: 10px;
  overflow: hidden;
}
.dz-media img { transition: transform 0.6s cubic-bezier(.2,.7,.2,1); }
.dz-card:hover .dz-media img,
.dz-box:hover .dz-media img,
.dz-img-box:hover .dz-media img { transform: scale(1.04); }

/* Framed-art treatment for standalone gallery / about imagery */
.as-framed,
.about-media .dz-media,
.dz-gallery-box.framed .dz-media {
  background: var(--as-frame);
  padding: 10px;
  border: 1px solid var(--as-line);
  box-shadow: var(--as-shadow-md);
  border-radius: 4px;
}

/* ---------------------------------------------------------------------
   5. BUTTONS  — refined, brand-coloured, gallery-quiet.
   --------------------------------------------------------------------- */
.btn-primary,
.btn.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  border-radius: 999px;
  padding-inline: 1.6em;
}
.btn-primary:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); }

.btn-outline-primary {
  border-color: var(--primary);
  color: var(--primary);
  border-radius: 999px;
}
.btn-outline-primary:hover { background-color: var(--primary); color: #fff; }

button.scroltop { background-color: var(--primary); }

/* ---------------------------------------------------------------------
   6. FORMS  — clean wells on the canvas.
   --------------------------------------------------------------------- */
.form-control, .form-select, .dz-form .form-control {
  background-color: var(--as-surface);
  border: 1px solid var(--as-line);
  border-radius: 10px;
  color: var(--as-ink);
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--rgba-primary-1);
}

/* ---------------------------------------------------------------------
   7. SECTION DIVIDER  — a subtle painted brushstroke between sections.
   Add class="as-brush-divider" on an empty <div> where wanted.
   --------------------------------------------------------------------- */
.as-brush-divider {
  height: 14px;
  margin: 8px auto;
  max-width: 220px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      var(--art-terracotta) 18%,
      var(--art-ochre) 40%,
      var(--art-sage) 60%,
      var(--art-teal) 82%,
      transparent 100%);
  opacity: 0.55;
  border-radius: 50%;
  filter: blur(0.4px);
}

/* Selection colour on-brand */
::selection { background: var(--rgba-primary-2); color: var(--as-ink); }

/* =====================================================================
   8. HOMEPAGE POLISH — uniform section rhythm + one title/text scale.
   Scoped to .home-page so it never touches other pages. Replaces the
   ad-hoc pt-5 / py-4 / pt-4 / mt-5 / fs-1 / fs-5 mix on index.blade.php.
   ===================================================================== */
.home-page {
  --hp-section-y: clamp(3.5rem, 6vw, 6.5rem);   /* 56px → 104px */
  --hp-head-gap:  clamp(2rem, 4vw, 3rem);
}

/* One vertical rhythm for every top-level section (hero stays full-bleed) */
.home-page > section,
.home-page > .main-slider-wrapper {
  padding-top: var(--hp-section-y) !important;
  padding-bottom: var(--hp-section-y) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Centered section header (title + intro) — consistent width & spacing */
.home-page section .text-center:has(h2) {
  max-width: 820px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: var(--hp-head-gap) !important;
}

/* ONE title scale across the page, regardless of tag/utility class */
.home-page section h2,
.home-page section h2.fs-1,
.home-page section h3.title,
.home-page section .section-head .title,
.home-page .main-slider-wrapper .content-info h2 {
  font-family: "Fraunces", Georgia, serif !important;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem) !important;
  line-height: 1.14 !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  margin: 0 0 1rem !important;
}
/* About heading sits in a 2-col block — keep it left aligned, same size */
.home-page section .section-head.style-1 .title { margin-bottom: 1.25rem !important; }

/* ONE intro-paragraph scale under section titles */
.home-page section .text-center p,
.home-page > section:first-of-type p {
  font-size: 1.05rem !important;
  line-height: 1.8 !important;
  color: var(--as-muted) !important;
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* The intro-only "OUR STORY" section (no .text-center wrapper) */
.home-page > section:first-of-type h2 {
  margin-bottom: 1rem !important;
}
.home-page > section:first-of-type p { max-width: 900px; }

/* Consistent spacing for the trailing CTA buttons ("Book Workshop", "View More") */
.home-page section .text-center:has(> .btn) {
  margin-top: var(--hp-head-gap) !important;
}

/* Card captions stay a clear step below section titles (visual hierarchy) */
.home-page .card-caption h4 {
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 1.2rem !important;
  font-weight: 600;
  line-height: 1.3;
}

/* Cart/wish icon buttons (.dz-carticon): center the glyph both axes.
   They have padding:0 and were aligning to the text baseline (off-centre). */
.dz-carticon,
.dz-wishicon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.dz-carticon i,
.dz-wishicon i {
  line-height: 1;
}

/* Sidebar card widgets (.widget.style-1) get inner padding so their
   title/list don't sit flush against the card edges. */
.widget.style-1 {
  padding: 24px 26px;
}
.widget.style-1 .widget-title {
  margin-bottom: 14px;
}

/* Events mega-menu item: drop the star ::after indicator */
.header-nav .nav > li.has-mega-menu.sub-menu-down > a::after,
.header-nav .nav > li.has-mega-menu.menu-center > a::after {
  content: none !important;
  display: none !important;
}

/* Footer newsletter: on-theme input (was #FEEB9D yellow) + teal submit */
.dzSubscribe.style-1 .input-group .form-control {
  background: var(--as-surface) !important;
  border: 1px solid rgba(5, 66, 73, 0.20) !important;
  color: var(--as-ink) !important;
}
.dzSubscribe.style-1 .input-group .form-control::placeholder {
  color: #9a958c !important;
}
.dzSubscribe.style-1 .input-group .form-control:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--rgba-primary-1) !important;
}
.dzSubscribe.style-1 .input-group-addon .btn {
  background: var(--primary) !important;
  color: #fff !important;
  border-radius: 10px !important;
}
.dzSubscribe.style-1 .input-group-addon .btn:hover { background: var(--primary-dark) !important; }
.dzSubscribe.style-1 .input-group-addon .btn i { color: #fff !important; }

/* Admin edit-pen (only rendered for non-customer logged-in users) */
.as-edit-pen {
  position: fixed; left: 22px; bottom: 24px; z-index: 1045;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--primary); color: #fff !important;
  padding: 11px 18px; border-radius: 999px;
  font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: .02em; text-decoration: none;
  box-shadow: var(--as-shadow-md);
  transition: background .2s ease, transform .2s ease;
}
.as-edit-pen:hover { background: var(--primary-dark); color: #fff !important; transform: translateY(-2px); }
.as-edit-pen i { font-size: 12px; }
@media (max-width: 575px) {
  .as-edit-pen { padding: 12px; left: 14px; bottom: 80px; }
  .as-edit-pen span { display: none; }
}