/* ==========================================================================
   friendsdijital.com — layout repair
   --------------------------------------------------------------------------
   Purpose: restore the layout the Gloreya theme was built to render, after a
   large number of server-side assets went missing (404).

   This file changes presentation only. No text, menu item, price or link is
   altered anywhere.

   Root cause being corrected
   --------------------------
   The theme pairs a transparent header with a dark hero photograph:
       .banner-area  { background-image: url(.../banner/banner_image.png) }
       .banner-title { color: #fff; font-size: 80px }
       .navbar-nav .nav-link { color: #fff }
   That photograph returns 404 on the server, so the hero collapsed to a white
   void and every white element sitting on it became invisible. The fixes below
   reinstate a dark hero surface and repair the widgets whose own stylesheets
   are also gone (ElementsKit icon font, TranslatePress floater).

   Palette is taken from the theme itself:
       brand red  #e7272d      hero dark  #2c2c2c      accent  #fbbe36
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Hero — replace the missing background image
   --------------------------------------------------------------------------
   The 404 image is swapped for a dark surface tinted toward the brand red
   rather than a flat neutral grey, so the hero reads as part of the brand.
   Vertical padding is left at the theme's 180px so total hero height is
   unchanged and nothing below it shifts.
   -------------------------------------------------------------------------- */
.banner-area,
.banner-area.banner-bg {
  /* the inline style="background-image:..." on the element is overridden here */
  background-image: linear-gradient(180deg, #241c1c 0%, #332525 100%) !important;
  background-color: #2c2c2c;
}

@supports (background: linear-gradient(in oklch, red, red)) {
  .banner-area,
  .banner-area.banner-bg {
    background-image:
      linear-gradient(180deg, oklch(0.22 0.019 27) 0%, oklch(0.29 0.028 27) 100%) !important;
  }
}

/* A single hairline of brand colour anchors the hero to the content below. */
.banner-area {
  border-bottom: 3px solid #e7272d;
}

/* The theme's overlay is rgba(44,44,44,0) — fully transparent, so it does
   nothing. Kept inert; the gradient above carries the surface. */
.banner-area:before {
  background: transparent;
}

.banner-area .banner-title {
  color: #fff;
  text-wrap: balance;
}


/* --------------------------------------------------------------------------
   2. Header — restore legibility over the repaired hero
   --------------------------------------------------------------------------
   Nav links are already #fff in the theme and become readable again now that
   the hero is dark. The active link is the theme red, which is low-contrast on
   a dark surface, so it is reinforced with the underline indicator rather than
   by changing the brand colour.
   -------------------------------------------------------------------------- */
.header-transparent .navbar-nav .nav-link {
  color: #fff;
}

.header-transparent .navbar-nav .nav-link:hover,
.header-transparent .navbar-nav .nav-link:focus-visible {
  color: #fbbe36;
}

.header-transparent .navbar-nav .current-menu-item > .nav-link,
.header-transparent .navbar-nav .nav-link.active {
  color: #e7272d;
}

/* Keyboard focus was invisible against the dark hero. */
.header-transparent .navbar-nav .nav-link:focus-visible {
  outline: 2px solid #fbbe36;
  outline-offset: 4px;
  border-radius: 2px;
}


/* --------------------------------------------------------------------------
   2b. Header row — resolve the menu overflow and the logo collision
   --------------------------------------------------------------------------
   The theme lays the header out as three Bootstrap columns:
       .col-lg-5 (menu) | .col-lg-2 (logo) | .col-lg-5 (widget)
   Two things broke that:
     - the third column's widget is gone, so it now only reserves dead space;
     - the menu needs 609px but its column is 475px, so "Alkollü İçecekler"
       wrapped to a second line that escaped the header and printed over the
       hero, while the rest of the menu ran underneath the logo.
   The row is re-laid as flex with content-sized columns, the logo moved ahead
   of the menu, and the empty column dropped.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .header .navbar-container .container > .row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    column-gap: 40px;
  }

  .header .navbar-container .container > .row > .col-lg-2 {
    order: -1;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  .header .navbar-container .container > .row > div.col-lg-5:first-of-type {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  /* lost its widget; without this it steals ~475px and forces the collision */
  .header .navbar-container .container > .row > div.col-lg-5:last-of-type {
    display: none;
  }

  .header .navbar-container .navbar {
    width: 100%;
  }

  .header .navbar-container .navbar-collapse {
    flex-basis: auto;
    width: auto;
  }

  /* menu sits to the right of the logo */
  .header .navbar-nav.main-menu {
    margin-left: auto;
    column-gap: 4px;
  }

  /* the wrap is what pushed a menu label into the hero */
  .header .navbar-nav .nav-link {
    white-space: nowrap;
  }
}


/* --------------------------------------------------------------------------
   3. Logo — the lazy-loader is gone, and the black mark sat on a dark hero
   --------------------------------------------------------------------------
   logo_b1.png is the black-on-light variant. Over the dark hero it was
   invisible. Rendering it as white keeps a single asset in play instead of
   swapping files across 84 pages.
   -------------------------------------------------------------------------- */
/* The theme renders more than one logo node (desktop centred logo, plus a
   navbar-brand used at mobile widths). Both are the black mark, so both need
   inverting while they sit on the dark hero. */
.header-transparent .nav-logo .logo img,
.header-transparent .navbar-brand img,
.header-transparent .logo img,
.header-transparent .col-lg-5 > .logo img,
.header-transparent .navbar > .logo img {
  filter: brightness(0) invert(1);
  max-height: 64px;
  width: auto;
}

/* If the theme swaps to a solid sticky bar, hand the black mark back. */
.header-transparent.is-sticky .nav-logo .logo img,
.header.header-sticky .nav-logo .logo img,
.header-transparent.sticky .nav-logo .logo img {
  filter: none;
}

.nav-logo .logo img {
  max-height: 64px;
  width: auto;
}


/* --------------------------------------------------------------------------
   4. Accordion toggles — ElementsKit icon font is 404
   --------------------------------------------------------------------------
   .icon-down-arrow1 / .icon-up-arrow render private-use glyphs from the
   'elementskit' webfont, which no longer exists on the server, so every row
   showed a tofu box. The glyph is suppressed and the chevron is drawn in CSS.
   -------------------------------------------------------------------------- */
.ekit_accordion_icon_group i:before {
  content: none;
}

/* font-size:0 collapses the tofu box no matter which dead icon font the
   glyph came from; the chevron below is sized in px so it is unaffected. */
.ekit_accordion_icon_group i {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
  font-size: 0;
  line-height: 0;
  color: #222;
}

.ekit_accordion_icon_group i:after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ElementsKit ships a normal icon and an active icon and swaps them with the
   toggle state. That swap lived in the missing stylesheet, so both rendered at
   once, stacking a caret-up over a caret-down into a single cup-shaped glyph.
   Only one is shown per state now. */
.ekit-accordion--toggler.collapsed .ekit_accordion_active_icon {
  display: none;
}

.ekit-accordion--toggler:not(.collapsed) .ekit_accordion_normal_icon {
  display: none;
}

/* Expanded row: point the chevron up. */
.ekit_accordion_icon_group .icon-closed:after {
  transform: rotate(-135deg);
}

/* Give the toggle a real hit target and keep title and chevron apart. */
.ekit-accordion--toggler {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 56px;
}

.ekit-accordion--toggler:focus-visible {
  outline: 2px solid #e7272d;
  outline-offset: -2px;
}


/* --------------------------------------------------------------------------
   4b. Mobile menu button — the theme's icon font glyph never arrives
   --------------------------------------------------------------------------
   .navbar-toggler-icon relies on <i class="icon icon-menu">, whose glyph comes
   from the missing icon font, so the button rendered as an empty tofu square.
   Drawn as three bars instead.
   -------------------------------------------------------------------------- */
.navbar-toggler .navbar-toggler-icon {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 16px;
  background-image: none;
}

.navbar-toggler .navbar-toggler-icon > i {
  display: none;
}

.navbar-toggler .navbar-toggler-icon:before,
.navbar-toggler .navbar-toggler-icon:after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.navbar-toggler .navbar-toggler-icon:before {
  top: 0;
  box-shadow: 0 7px 0 currentColor;
}

.navbar-toggler .navbar-toggler-icon:after {
  bottom: 0;
}

.navbar-toggler {
  color: #fff;
  border: 0;
  line-height: 0;
}

.navbar-toggler:focus-visible {
  outline: 2px solid #fbbe36;
  outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   5. Accordion rhythm — post-3139.css (this page's Elementor CSS) is 404
   --------------------------------------------------------------------------
   Without it the rows lost their spacing. Restores separation and a readable
   measure without touching any row's text.
   -------------------------------------------------------------------------- */
.elementskit-accordion .elementskit-card + .elementskit-card {
  margin-top: 8px;
}

.elementskit-card-header {
  background: #f7f7f7;
  transition: background 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.elementskit-card-header:hover {
  background: #efefef;
}


/* --------------------------------------------------------------------------
   5b. Inside the accordion panels
   --------------------------------------------------------------------------
   IMPORTANT: the page links 14 Elementor per-section stylesheets
   (post-3139, post-3232 … post-3427) and only post-1489.css still exists on
   the server. Everything that styled the menu items — type scale, colours,
   column widths, spacing — was in the 13 that are gone, so the original
   appearance of these panels cannot be restored from the files available.

   What is corrected here is structural and objective:
     - stretched sections measured themselves against the window, not the
       panel, and overflowed to 1425px inside a 970px container;
     - each item's photo column is now a dead placeholder, leaving half of
       every row empty;
     - name, modifier and price were three stacked 36px headings, so a single
       menu item occupied three full lines.
   The type scale below is a readable default, not the original design.
   -------------------------------------------------------------------------- */
.elementskit-card-body .elementor-section-stretched {
  width: 100% !important;
  left: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.elementskit-card-body .elementor-section {
  padding-left: 0;
  padding-right: 0;
}

/* Collapse the column whose only content is a 1x1 placeholder image. */
.elementskit-card-body .elementor-column:has(.elementor-image img[src^="data:image/gif;base64,R0lGODlhAQABA"]) {
  display: none;
}

.elementskit-card-body .elementor-row > .elementor-column {
  flex: 1 1 auto;
  max-width: 100%;
}

/* One line per item: name, optional note, then price. */
.elementskit-card-body .elementor-widget-wrap {
  flex-wrap: nowrap;
  align-items: baseline;
  column-gap: 12px;
}

.elementskit-card-body .elementor-widget-wrap > .elementor-element {
  width: auto;
}

.elementskit-card-body .elementor-widget-wrap > .elementor-element:last-child {
  margin-left: auto;
}

.elementskit-card-body .elementor-heading-title {
  font-size: 17px;
  line-height: 1.45;
  font-weight: 600;
  color: #222;
  margin: 0;
}

/* middle widgets are notes or spice markers, not the dish name */
.elementskit-card-body .elementor-widget-wrap > .elementor-element:not(:first-child):not(:last-child) .elementor-heading-title {
  font-size: 15px;
  font-weight: 400;
  color: #6b6b6b;
}

.elementskit-card-body .elementor-widget-wrap > .elementor-element:last-child .elementor-heading-title {
  color: #e7272d;
  white-space: nowrap;
}

/* Spacer sections that held nothing but a divider or a now-missing image
   still reserved height, producing an empty striped row between every dish. */
.elementskit-card-body .elementor-top-section:not(:has(.elementor-heading-title)) {
  display: none;
}

/* separate one dish from the next */
.elementskit-card-body .elementor-top-section:has(.elementor-heading-title) {
  padding-block: 10px;
  border-bottom: 1px solid #ececec;
}

.elementskit-card-body .elementor-top-section:has(.elementor-heading-title):last-of-type {
  border-bottom: 0;
}

/* The panel carried an asymmetric padding of 30px 85px 30px 65px, which left
   only 205px of usable width on a 375px screen. */
.elementskit-accordion .elementskit-card .elementskit-card-body {
  padding: 10px 28px 22px !important;
}

@media (max-width: 767px) {
  .elementskit-accordion .elementskit-card .elementskit-card-body {
    padding: 8px 16px 16px !important;
  }

  /* Let a long dish name and its note share the line and wrap naturally,
     with the price still pinned to the right edge of the row. */
  .elementskit-card-body .elementor-widget-wrap {
    flex-wrap: wrap;
    column-gap: 8px;
  }

  .elementskit-card-body .elementor-widget-wrap > .elementor-element:last-child {
    margin-left: auto;
    order: 99;
  }

  .elementskit-card-body .elementor-heading-title {
    font-size: 15px;
  }

  .elementskit-card-body .elementor-widget-wrap > .elementor-element:not(:first-child):not(:last-child) .elementor-heading-title {
    font-size: 14px;
  }
}


/* --------------------------------------------------------------------------
   6. TranslatePress floater — its stylesheet is 404
   --------------------------------------------------------------------------
   Without trp-floater-language-switcher.css the switcher computes to
   position: static and falls to the very bottom of the document as a bare
   "TR / EN" stack. Returned to its intended fixed corner.
   -------------------------------------------------------------------------- */
#trp-floater-ls {
  position: fixed;
  z-index: 999;
  bottom: 24px;
  background: #2c2c2c;
  border-radius: 6px;
  padding: 6px 10px;
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.25);
  line-height: 1;
}

#trp-floater-ls.trp-bottom-left  { left: 24px; }
#trp-floater-ls.trp-bottom-right { right: 24px; }
#trp-floater-ls.trp-top-left     { top: 24px; bottom: auto; left: 24px; }
#trp-floater-ls.trp-top-right    { top: 24px; bottom: auto; right: 24px; }

#trp-floater-ls a {
  color: #fff;
  text-decoration: none;
  padding: 4px 6px;
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.04em;
}

#trp-floater-ls a:hover,
#trp-floater-ls a:focus-visible {
  color: #fbbe36;
}

/* Collapsed to the current language; the rest appear on hover or keyboard
   focus, which is how the plugin's own stylesheet behaved. */
#trp-floater-ls #trp-floater-ls-language-list {
  display: none;
  padding-top: 4px;
  margin-top: 4px;
  border-top: 1px solid rgb(255 255 255 / 0.18);
}

#trp-floater-ls:hover #trp-floater-ls-language-list,
#trp-floater-ls:focus-within #trp-floater-ls-language-list {
  display: block;
}

/* Flags are lazy-loaded 1x1 placeholders with the loader gone; the language
   codes carry the meaning, so the empty images are removed from the flow. */
#trp-floater-ls .trp-flag-image {
  display: none;
}

/* Keep it clear of the theme's scroll-to-top button. */
@media (max-width: 767px) {
  #trp-floater-ls { bottom: 16px; }
  #trp-floater-ls.trp-bottom-left { left: 16px; }
}


/* --------------------------------------------------------------------------
   7. Missing uploads — 129 menu photographs are 404 on the server
   --------------------------------------------------------------------------
   They remain as 1x1 transparent placeholders, which collapse to nothing. This
   stops those zero-size images from leaving ragged gaps inside an opened
   accordion panel. No replacement imagery is invented.
   -------------------------------------------------------------------------- */
img[src^="data:image/gif;base64,R0lGODlhAQABA"] {
  display: none;
}


/* --------------------------------------------------------------------------
   8. Responsive — hero must not eat a small screen
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .banner-area { padding: 120px 0; }
  .banner-area .banner-title { font-size: 48px; line-height: 56px; }
}

@media (max-width: 575px) {
  .banner-area { padding: 88px 0; }
  .banner-area .banner-title { font-size: 34px; line-height: 42px; }
  .ekit-accordion--toggler { gap: 1rem; min-height: 52px; }
}

/* The collapsed mobile menu drops onto the page background, not the hero, so
   its links need the dark ink back. */
@media (max-width: 991px) {
  .navbar-collapse.show .navbar-nav .nav-link,
  .navbar-collapse.collapsing .navbar-nav .nav-link {
    color: #222;
  }
  .navbar-collapse.show .navbar-nav .nav-link:hover {
    color: #e7272d;
  }
}


/* --------------------------------------------------------------------------
   9. Motion preference
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ekit_accordion_icon_group i:after,
  .elementskit-card-header {
    transition: none;
  }
}