/* ============================================================
   Casa Myla — brand overrides on top of the Restoria template.
   Colours live in css/global.css :root. This file only fixes
   sizing / assets that changed with the rebrand (SVG logo, etc.)
   ============================================================ */

/* Logo — the real Casa Myla oval mark (cropped from a brand photo,
   transparent PNG, portrait). */
.site-logo {
  display: block;
  width: auto;
  height: 74px;
}
.main-header .logo .site-logo {
  height: 78px;
}
.main-header.header-up .logo .site-logo {
  height: 56px;
  transition: height var(--transition, .3s ease);
}
.hidden-bar .logo-box .site-logo,
.info-bar .logo-box .site-logo {
  height: 92px;
  margin: 0 auto 10px;
}
.main-footer .logo .site-logo {
  height: 120px;
}

/* keep the preloader mark on-brand */
.preloader .txt-loading .letters-loading,
.preloader .txt-loading .letters-loading::before {
  letter-spacing: 0.06em;
}

/* real photos now fill the "popular dishes" slider (were transparent
   PNG cut-outs) — make them behave as framed images */
.offer-block-two .image {
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 4 / 3;
}
.offer-block-two.rounded .image {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
}
.offer-block-two .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.offer-block-two:hover .image img {
  transform: scale(1.05);
}

/* the inline reservation demo note */
.reservation-form form .demo-note {
  margin-top: 12px;
  font-size: 13px;
  color: var(--color-three);
}

/* --- typography: match the printed menu -------------------------------
   Cormorant Garamond is airy — give display headings real weight, and
   Montserrat labels the wide tracking the menu uses. */
h1, h2, h3,
.banner-text-top h1,
.inner-banner h1,
.title-box h2,
.menu-card-main .title-box h2,
.menu-col .title-box h3 {
  font-weight: 600;
  letter-spacing: 0.01em;
}
h1, .banner-text-top h1, .inner-banner h1 {
  font-weight: 500;
}

.title-box .subtitle span,
.top-info,
.hero-info .label,
.menu-col .dish-block .price,
.offer-block-two .cat-name,
.main-menu .navigation > li > a,
.social_media,
.bottom_footer {
  font-family: var(--font-family-Urbanist);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.menu-col .dish-block .price { letter-spacing: 0.06em; }

/* hero: the oval mark stands in for the "Casa Myla" headline */
.banner-section .hero-logo {
  margin: 0 0 18px;
  line-height: 0;
  text-align: center;
}
.banner-section .hero-logo img {
  display: inline-block;
  width: auto;
  height: clamp(150px, 22vw, 280px);
}

/* "From the kitchen" tiles — uniform framed crop */
.ig-post-section .ig-post-image {
  display: block;
  overflow: hidden;
  border-radius: 6px;
}
.ig-post-section .ig-post-image a {
  display: block;
}
.ig-post-section .ig-post-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .6s ease;
}
.ig-post-section .ig-post-image:hover img {
  transform: scale(1.05);
}
.ig-post-section .lower-link-box {
  margin-top: 46px;
  position: relative;
  z-index: 2;
  clear: both;
}

/* footer: centre the oval mark over the info column */
.main-footer .info-col .logo {
  text-align: center;
}
.main-footer .info-col .logo a {
  display: inline-block;
}
.main-footer .logo .site-logo {
  margin-left: auto;
  margin-right: auto;
}

/* contact map: the bootstrap .row sits outside a container, so its
   -15px side margins push 30px past the viewport. Neutralise it. */
.contact-map .row {
  margin-left: 0;
  margin-right: 0;
}
.contact-map iframe {
  display: block;
  width: 100%;
}

/* bracketed placeholders read as clearly unfinished */
.top-info li,
.info-bar .info li,
.hero-info .info-item,
.main-footer .info ul li,
.reserve-section .desc .text {
  quotes: none;
}