/* Karadaş Office — site overrides on top of the Regalis template. Loaded last. */

/* ---- palette: the logo's black and gold, replacing the template's navy and amber ---- */
* {
  --primary-color: #1b1b1b;
  --primary-color-rgb: 27, 27, 27;
  --secondary-color: #c9a55e;
  --secondary-color-rgb: 201, 165, 94;
  --bg-light: #f4f2ee;
  --bg-dark-2: #1f1f1f;
  --bg-dark-3: #2a2a2a;
  /* Buttons are near-black at rest and turn gold on hover. */
  --btn-hover-bg: var(--secondary-color);
  --btn-hover-color: #191919;

  /* The logo is a mark + two-line wordmark, wider than the template's; give it more room. */
  --logo-width: 250px;
  --logo-footer-width: 250px;
}
/* Gold is the single accent, so accent icons and text take it rather than the near-black primary. */
.id-color,
a.id-color {
  color: var(--secondary-color);
}

/* The hero fills the first screen on every device instead of the template's fixed 900px. */
.hero {
  min-height: 100vh;
  min-height: 100svh;
}

/* ---- header ---- */
/* The phone widget is a link now. */
.h-phone {
  color: #ffffff;
  text-decoration: none;
}
.h-phone:hover {
  color: var(--secondary-color);
}
/* Phone icon button next to the menu button, phones and tablets only. */
.h-phone-mobile {
  display: none;
}
@media only screen and (max-width: 992px) {
  .h-phone-mobile,
  #menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0 0 0 4px;
    color: #ffffff;
    font-size: 20px;
  }
  /* The closed menu is only clipped by the header's overflow; take it out of the
     tab order and away from assistive tech as well. */
  header.header-mobile:not(.menu-open) #mainmenu {
    visibility: hidden;
  }
  /* Keep the phone and menu buttons side by side. */
  .menu_side_area {
    display: flex;
    align-items: center;
  }
}
/* Open state shows a close icon, not the template's dash. */
#menu-btn.menu-open:before {
  content: "\f00d";
}

/* ---- keyboard focus ---- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
#mainmenu a:focus-visible {
  outline: 2px solid var(--secondary-color);
  outline-offset: 3px;
  /* The template transitions every property on links; the ring must appear at once. */
  transition: none;
}

/* ---- hero typography ---- */
/* Body copy over the photo: brighter than the template's 60% white, and a readable measure. */
.hero p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 66ch;
}
/* A taller scrim so the copy never sits on the bright folder, phones included. */
.hero .gradient-edge-bottom {
  height: 55%;
}

/* ---- hero actions ---- */
/* Gold primary button carries dark text; the secondary is an outlined ghost on the photo. */
a.btn-main.bg-color-2 {
  color: #191919;
}
.hero a.btn-main.btn-light-trans {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.hero a.btn-main.btn-light-trans:hover {
  color: #191919;
  background: #ffffff;
  border-color: #ffffff;
}
/* The four highlight labels wrap instead of colliding on tablets. */
.hero .d-flex.justify-content-between {
  flex-wrap: wrap;
  gap: 8px 32px;
}

/* ---- contact page ---- */
/* The office map stands where the template's form was: same corner radius, a 4:3 frame
   that keeps the two columns level on desktop, and a tinted box until the embed paints. */
.map-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 320px;
  background: var(--bg-light);
}
.map-frame iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}