/* 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;
}
/* A veil that deepens toward the copy keeps the gold header and white text legible
   over the photo. Sits above the jarallax image, below the content, which is z-2. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.6));
}

/* ---- header ---- */
/* The logo and phone widget sat tight against the top edge; pad the whole row so
   they sit a little lower in every header state. */
header .de-flex {
  padding-top: 18px;
}
/* The phone widget is a link now, and always gold rather than only on hover. */
.h-phone,
.h-phone:hover {
  color: var(--secondary-color);
  text-decoration: none;
}
/* Tighter gap between the icon and the number; the label above keeps the same offset. */
.h-phone i {
  margin-right: 8px;
}
.h-phone span {
  margin-left: 43px;
}
/* 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;
  }
  .h-phone-mobile {
    color: var(--secondary-color);
  }
  /* 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";
}

/* ---- dark sections ---- */
/* The home page runs dark end to end, alternating near-black and a lighter charcoal.
   The template's tabs and timeline only ship light-section colours, so give them
   dark-section ones here. */
.text-light .de-tab .d-tab-nav.border-bottom {
  border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}
.text-light .de-tab .d-tab-nav .active-tab {
  color: #191919;
  background: var(--secondary-color);
}
.text-light .de-timeline-s2 .d-item {
  border-left-color: rgba(255, 255, 255, 0.2);
}
.text-light .de-timeline-s2 .d-item .d-icon {
  color: #191919;
  background: var(--secondary-color);
}
.text-light .accordion a {
  color: var(--secondary-color);
}
/* The principle links were cream chips with gold text: the one light element left on the
   page, and low contrast. On dark they are ghost buttons that fill gold on hover. */
.text-light a.btn-main.bg-light {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.text-light a.btn-main.bg-light:hover {
  background: var(--secondary-color) !important;
  border-color: var(--secondary-color);
}
.text-light a.btn-main.bg-light:hover .id-color {
  color: #191919;
}

/* ---- 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;
}

/* ---- error pages (/404, /500) ---- */
/* One near-black screen between the header and the footer: the status code drawn in the
   logo's gold outlined lettering, a gold rule like the logo's framing lines, the message,
   then the actions. The header floats over the top of the stage as it does over the hero. */
.error-stage {
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 150px 0 100px;
}
.error-code {
  font-family: var(--heading-font);
  font-size: clamp(6rem, 16vw, 13rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  /* Outlined like the logo's lettering. Jost's glyphs are built from overlapping contours
     (the 4's stem crosses its bar), and a stroke traces every contour, inner edges included.
     So the stroke is painted first and the glyph is then filled in the stage colour, which
     covers the inner lines and the inner half of the stroke: what shows is a clean outer
     outline, half the stroke width, scaling with the size. */
  color: var(--bg-dark-2);
  -webkit-text-stroke: max(4px, 0.028em) var(--secondary-color);
  paint-order: stroke fill;
  /* Pull the numeral's side bearing back so it lines up with the text below. */
  margin: 0 0 0 -0.03em;
}
.error-rule {
  width: 96px;
  height: 3px;
  margin: 28px 0 26px;
  /* The logo's gold gradient, the same one that draws its framing lines. */
  background: linear-gradient(90deg, #b58a4c 0%, #d9be75 50%, #fcf3a4 100%);
  transform-origin: left center;
  animation: error-rule-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
@keyframes error-rule-in {
  from {
    transform: scaleX(0);
  }
}
/* An error page must read with no script at all (the layout already leaves the template's
   preloader out), so the entrance is authored in CSS rather than with the wow classes,
   which hide elements until designesia.js runs. */
.error-stage .rise {
  animation: error-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--rise-delay, 0s) both;
}
@keyframes error-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .error-rule,
  .error-stage .rise {
    animation: none;
  }
}
.error-stage p {
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.88);
}
.error-stage ::selection {
  background: var(--secondary-color);
  color: #191919;
}
/* The gold primary rests and hovers on the same gold in the template; here it steps to the
   logo's lighter gold under the pointer. */
.error-stage a.btn-main.bg-color-2:hover {
  background: #d9be75;
}
/* The same ghost secondary button as the hero. */
.error-stage a.btn-main.btn-light-trans {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.error-stage a.btn-main.btn-light-trans:hover {
  color: #191919;
  background: #ffffff;
  border-color: #ffffff;
}
@media only screen and (max-width: 767px) {
  .error-stage {
    padding: 130px 0 80px;
  }
}