/*
Theme Name: Aydin Mimarlik
Theme URI: https://aydinmimarlik.com.tr
Author: AYTECH - Savaş Aydın
Author URI: https://aydinmimarlik.com.tr
Description: Kurumsal mimarlik ve muteahhitlik firmasi icin ozel WordPress temasi. Ust menu (acilir alt menulu), hizmetler ve projeler bolumleri, iletisim bilgileri ve sosyal medya alanlari icerir. WPBakery Page Builder ve Elementor ile uyumludur. AYTECH is affiliation ile Savas Aydin tarafindan gelistirilmistir.
Version: 1.0.0
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: aydin-mimarlik
Tags: custom-menu, custom-logo, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   0. CSS Variables (edit these to change the whole site's palette/fonts)
   ========================================================================== */
:root{
  --color-dark:      #14120f;   /* headings, nav text, footer background - deep charcoal-black */
  --color-accent:    #c9a227;   /* primary luxury gold, used everywhere for consistency */
  --color-accent-light: #e9cf7a; /* highlight/hover gold */
  --color-text:      #4a4a4a;   /* body copy */
  --color-light-bg:  #f7f6f4;   /* light section backgrounds */
  --color-white:     #ffffff;
  --color-border:    #e5e2dd;
  --font-heading:    "Poppins", Arial, sans-serif;
  --font-body:       "Jost", Arial, sans-serif;
  --font-serif:      "Playfair Display", "Georgia", serif;
  --container-width: 1200px;

  /* Dark "Hizmetlerimiz" style section, taken from the live site */
  --services-bg:        #14120f;
  --services-card-bg:   #1c1a17;
  --services-accent:    #c9a227;   /* same gold, kept as its own var for section-local overrides */
  --services-text:      #ffffff;

  /* Ottoman-inspired gold frame, used on every photo/info box */
  --frame-gold:        #c9a227;
  --frame-gold-soft:   rgba(201,162,39,.18);
  --frame-corner-svg:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23c9a227' stroke-width='1.4'%3E%3Crect x='10' y='10' width='20' height='20'/%3E%3Crect x='10' y='10' width='20' height='20' transform='rotate(45 20 20)'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='2.6' fill='%23c9a227'/%3E%3C/svg%3E");
}

/* ==========================================================================
   1. Reset / base
   ========================================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--color-text);
  font-size:16px;
  line-height:1.7;
  background:var(--color-white);
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; transition:color .2s ease; }
a:hover{ color:var(--color-accent); }
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  color:var(--color-dark);
  font-weight:600;
  line-height:1.3;
  margin:0 0 .6em;
  text-transform:uppercase;
  letter-spacing:.03em;
}
ul{ margin:0; padding:0; list-style:none; }
.container{
  max-width:var(--container-width);
  margin:0 auto;
  padding:0 24px;
}
.section{ padding:80px 0; }
.section-title{
  text-align:center;
  margin-bottom:50px;
  position:relative;
}
.section-title span{
  display:block;
  color:var(--color-accent);
  font-size:.8rem;
  letter-spacing:.3em;
  margin-bottom:10px;
  font-family:var(--font-body);
}
.section-title h2{
  font-family:var(--font-serif);
  font-size:2.2rem;
  letter-spacing:.04em;
}
.section-title h2::after{
  content:"";
  display:block;
  width:70px;
  height:2px;
  margin:18px auto 0;
  background:linear-gradient(90deg, transparent, var(--color-accent), transparent);
}
.btn{
  display:inline-block;
  padding:14px 34px;
  background:var(--color-dark);
  color:var(--color-white);
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:.8rem;
  border:1px solid var(--color-accent);
  transition:background .3s ease, color .3s ease;
}
.btn:hover{
  background:var(--color-accent);
  color:var(--color-dark);
}

/* ==========================================================================
   2. Header / Navigation
   ========================================================================== */
.site-header{
  border-bottom:1px solid var(--color-border);
  background:var(--color-white);
  position:relative;
  z-index:100;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
}
.site-nav-wrap{
  display:flex;
  align-items:center;
  gap:28px;
}
.site-branding img{ max-height:96px; width:auto; display:block; }
.site-logo-link{ display:block; }
.site-branding .site-title{
  font-size:1.4rem;
  margin:0;
  text-transform:none;
}

.menu-toggle{
  display:none;
  background:none;
  border:0;
  font-size:1.6rem;
  cursor:pointer;
  color:var(--color-dark);
}

.primary-menu{
  display:flex;
  gap:28px;
}
.primary-menu li{ position:relative; }
.primary-menu > li > a{
  display:block;
  padding:10px 2px;
  font-size:.85rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--color-dark);
  position:relative;
}
.primary-menu > li > a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:2px;
  height:1px;
  background:var(--color-accent);
  transform:scaleX(0);
  transition:transform .25s ease;
}
.primary-menu > li > a:hover::after,
.primary-menu > li.current-menu-item > a::after{ transform:scaleX(1); }
.primary-menu > li > a:hover,
.primary-menu > li.current-menu-item > a{ color:var(--color-accent); }

.primary-menu .sub-menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:240px;
  background:var(--color-white);
  box-shadow:0 12px 24px rgba(0,0,0,.08);
  padding:10px 0;
  border-top:2px solid var(--color-accent);
}
.primary-menu li:hover > .sub-menu{ display:block; }
.primary-menu .sub-menu li a{
  padding:10px 20px;
  font-size:.8rem;
  text-transform:uppercase;
  display:block;
  white-space:nowrap;
}
.primary-menu li.menu-item-has-children > a::after{
  content:"\25BE";
  font-size:.7em;
  margin-left:6px;
}

/* --------------------------------------------------------------------
   Language switcher - same flag-dropdown approach as privatetaxi.cz
   (Google machine translation, native language marked separately)
   -------------------------------------------------------------------- */
.lang-switcher{
  position:relative;
}
.lang-switcher-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  background:none;
  border:1px solid var(--color-border);
  padding:7px 12px;
  border-radius:20px;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--color-dark);
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.lang-switcher-toggle:hover,
.lang-switcher[data-open="true"] .lang-switcher-toggle{
  border-color:var(--color-accent);
  color:var(--color-accent);
}
.lang-current-flag{ font-size:1rem; line-height:1; }
.lang-caret{ font-size:.65em; opacity:.7; }

.lang-switcher-menu{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:200px;
  max-height:340px;
  overflow-y:auto;
  background:var(--color-white);
  border-top:2px solid var(--color-accent);
  box-shadow:0 16px 34px rgba(0,0,0,.14);
  padding:8px 0;
  z-index:50;
}
.lang-switcher-menu.is-open{ display:block; }
.lang-option{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  background:none;
  border:0;
  padding:9px 18px;
  font-size:.85rem;
  text-align:left;
  cursor:pointer;
  color:var(--color-dark);
}
.lang-option:hover{ background:var(--color-light-bg); color:var(--color-accent); }
.lang-option.is-native{ font-weight:700; }
.lang-option.is-native::after{
  content:"\2022 asıl";
  margin-left:auto;
  font-size:.65rem;
  font-weight:500;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--color-accent);
}
.lang-flag{ font-size:1.05rem; }
.lang-switcher-note{
  margin:8px 18px 2px;
  padding-top:10px;
  border-top:1px solid var(--color-border);
  font-size:.72rem;
  line-height:1.5;
  color:#9a9a9a;
}

/* The real Google widget select lives here, positioned off-screen
   rather than display:none so Google can still initialise it. */
.lang-google-hidden{
  position:absolute;
  left:-9999px;
  top:-9999px;
  height:1px;
  width:1px;
  overflow:hidden;
}

/* Hide Google's own banner/toolbar so only our custom dropdown shows */
.goog-te-banner-frame.skiptranslate,
.goog-te-gadget-icon,
body > .skiptranslate{ display:none !important; }
body{ top:0 !important; position:static !important; }
.goog-text-highlight{ background:none !important; box-shadow:none !important; }

@media (max-width: 782px){
  .lang-switcher-menu{ right:auto; left:0; }
}

/* ==========================================================================
   2b. Hero Slider - top-of-homepage slideshow of every gathered photo
   ========================================================================== */
.hero-slider{
  position:relative;
  width:100%;
  height:78vh;
  min-height:420px;
  max-height:680px;
  overflow:hidden;
  background:var(--color-dark);
}
.hero-slider-track{
  position:relative;
  width:100%;
  height:100%;
}
.hero-slide{
  position:absolute;
  inset:0;
  margin:0;
  opacity:0;
  visibility:hidden;
  transition:opacity 1s ease;
}
.hero-slide.is-active{
  opacity:1;
  visibility:visible;
  z-index:1;
}
.hero-slide a{ display:block; width:100%; height:100%; }
.hero-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.hero-slide::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(20,18,15,.15) 0%, rgba(20,18,15,.05) 40%, rgba(20,18,15,.85) 100%);
  pointer-events:none;
}
.hero-slide figcaption{
  position:absolute;
  left:40px;
  bottom:64px;
  z-index:2;
  max-width:55%;
  color:#fff;
  font-family:var(--font-serif);
  font-weight:700;
  font-size:2rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
  padding-left:22px;
  border-left:2px solid var(--color-accent);
}

.hero-slider-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:48px; height:48px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  background:rgba(20,18,15,.35);
  color:#fff;
  font-size:1.6rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .25s ease, border-color .25s ease;
}
.hero-slider-arrow:hover{
  background:var(--color-accent);
  border-color:var(--color-accent);
  color:var(--color-dark);
}
.hero-slider-prev{ left:24px; }
.hero-slider-next{ right:24px; }

.hero-slider-count{
  position:absolute;
  right:40px;
  bottom:18px;
  z-index:2;
  color:#fff;
  font-family:var(--font-body);
  font-size:.85rem;
  letter-spacing:.1em;
}
.hero-slider-count .current{ color:var(--color-accent); font-weight:600; }

.hero-slider-dots{
  position:absolute;
  left:0; right:0;
  bottom:16px;
  z-index:2;
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  padding:0 20px;
}
.hero-slider-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.4);
  border:0;
  padding:0;
  cursor:pointer;
  transition:background .25s ease, transform .25s ease;
}
.hero-slider-dot.is-active{
  background:var(--color-accent);
  transform:scale(1.3);
}

@media (max-width: 782px){
  .hero-slider{ height:56vh; min-height:320px; }
  .hero-slide figcaption{ left:20px; bottom:70px; font-size:1.3rem; max-width:75%; }
  .hero-slider-count{ right:20px; bottom:16px; }
  .hero-slider-arrow{ width:38px; height:38px; font-size:1.3rem; }
  .hero-slider-prev{ left:10px; }
  .hero-slider-next{ right:10px; }
}

/* ==========================================================================
   3. Hero / Intro three-column block
   ========================================================================== */
.intro-columns{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  padding:80px 0;
}
.intro-box{
  position:relative;
  text-align:center;
  background:var(--color-white);
  padding:44px 32px;
  border:1px solid var(--frame-gold);
  box-shadow:0 0 0 4px var(--frame-gold-soft) inset, 0 10px 26px rgba(0,0,0,.08);
  transition:box-shadow .35s ease, border-color .35s ease, transform .35s ease;
}
.intro-box::before,
.intro-box::after{
  content:"";
  position:absolute;
  width:26px; height:26px;
  background-image:var(--frame-corner-svg);
  background-size:contain;
  background-repeat:no-repeat;
  pointer-events:none;
  opacity:.9;
  transition:transform .35s ease;
  z-index:2;
}
.intro-box::before{ top:-13px; left:-13px; }
.intro-box::after{ bottom:-13px; right:-13px; }
.intro-box:hover{
  box-shadow:0 0 0 4px var(--frame-gold-soft) inset, 0 18px 36px rgba(0,0,0,.14);
  border-color:var(--color-accent-light);
  transform:translateY(-4px);
}
.intro-box:hover::before,
.intro-box:hover::after{ transform:rotate(-8deg) scale(1.08); }
.intro-columns h5{
  color:var(--color-accent);
  font-size:1rem;
  letter-spacing:.15em;
  font-family:var(--font-serif);
}
.intro-box p{
  margin-bottom:0;
}

/* ==========================================================================
   4. Services / Projects grids - Ottoman-inspired gilded frame treatment
   ========================================================================== */
.grid-6, .grid-4{
  display:grid;
  gap:28px;
}
.grid-6{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.grid-item{
  position:relative;
  background:var(--color-light-bg);
  padding:10px;
  border:1px solid var(--frame-gold);
  box-shadow:0 0 0 4px var(--frame-gold-soft) inset, 0 10px 26px rgba(0,0,0,.12);
  transition:box-shadow .35s ease, border-color .35s ease;
}
.grid-item::before,
.grid-item::after{
  content:"";
  position:absolute;
  width:26px; height:26px;
  background-image:var(--frame-corner-svg);
  background-size:contain;
  background-repeat:no-repeat;
  pointer-events:none;
  opacity:.9;
  transition:transform .35s ease;
  z-index:2;
}
.grid-item::before{ top:-13px; left:-13px; }
.grid-item::after{ bottom:-13px; right:-13px; }
.grid-item:hover{
  box-shadow:0 0 0 4px var(--frame-gold-soft) inset, 0 16px 36px rgba(0,0,0,.22);
  border-color:var(--color-accent-light);
}
.grid-item:hover::before,
.grid-item:hover::after{ transform:rotate(-8deg) scale(1.08); }

.grid-item > a{ display:block; overflow:hidden; }
.grid-item img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  transition:transform .5s ease;
  display:block;
}
.grid-item:hover img{ transform:scale(1.05); }
.img-placeholder{
  width:100%;
  aspect-ratio:16/10;
  background:var(--color-border);
}
.grid-item figcaption{
  padding:18px 6px 4px;
  text-align:center;
  font-size:.95rem;
  background:transparent;
}
.grid-item figcaption a{ color:var(--color-dark); font-weight:600; letter-spacing:.03em; }
.view-all{ text-align:center; margin-top:40px; }

.bg-light{ background:var(--color-light-bg); }

/* --------------------------------------------------------------------
   Hizmetlerimiz - dark section, gilded-frame boxes on a subtle
   blueprint pattern (matches the live site's services section)
   -------------------------------------------------------------------- */
.services-section{
  background-color:var(--services-bg);
  background-image:
    repeating-linear-gradient(65deg, rgba(255,255,255,.035) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(-25deg, rgba(255,255,255,.03) 0 1px, transparent 1px 120px);
  padding:0 0 80px;
}
.services-section .section-title{ padding:70px 0 40px; }
.services-section .section-title span{ color:var(--services-accent); }
.services-section .section-title h2{ color:var(--services-text); }
.services-section .section-title h2::after{ background:linear-gradient(90deg, transparent, var(--services-accent), transparent); }

.services-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:34px;
  padding:0 24px;
  max-width:var(--container-width);
  margin:0 auto;
}
.services-grid .grid-item{
  background:var(--services-card-bg);
}
.services-grid .grid-item:hover{
  border-color:var(--color-accent-light);
}
/* IMPORTANT: figcaption must NOT inherit the light background used
   elsewhere on the site - this was the bug making the white captions
   invisible (white text on a near-white background). Kept transparent
   here so the dark card colour shows through instead. */
.services-grid figcaption{
  text-align:left;
  padding:20px 10px 6px;
  background:transparent;
}
.services-grid figcaption a{
  font-family:var(--font-serif);
  font-weight:700;
  font-size:1.3rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--services-text);
}

@media (max-width: 900px){
  .services-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 600px){
  .services-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   5. Footer
   ========================================================================== */
.site-footer{
  background:var(--color-dark);
  color:#cfcfcf;
  padding:0;
}

.footer-mini-map{
  position:relative;
  width:240px;
  height:240px;
  margin-top:20px;
  overflow:hidden;
  border:1px solid var(--frame-gold);
  filter:grayscale(.3) contrast(1.05);
}
.footer-mini-map iframe{
  width:100%;
  height:100%;
  border:0;
  pointer-events:none;
}
.footer-mini-map-link{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:rgba(20,18,15,.15);
  transition:background .25s ease;
}
.footer-mini-map-link span{
  width:100%;
  padding:6px 4px;
  background:rgba(20,18,15,.85);
  color:#fff;
  font-size:.62rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  text-align:center;
}
.footer-mini-map-link:hover{ background:rgba(201,162,39,.25); }
.footer-mini-map-link:hover span{ background:var(--color-accent); color:var(--color-dark); }

.site-footer .container{ padding-top:60px; }
.footer-widgets{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.site-footer h4{
  color:var(--color-white);
  font-size:1rem;
  letter-spacing:.1em;
}
.site-footer a:hover{ color:var(--color-accent); }
.footer-search form{ display:flex; }
.footer-search input[type="search"]{
  flex:1;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.2);
  background:transparent;
  color:#fff;
}
.footer-search button{
  padding:10px 18px;
  background:var(--color-accent);
  color:#fff;
  border:0;
  text-transform:uppercase;
  cursor:pointer;
}
.social-icons{
  display:flex;
  gap:14px;
  margin-top:16px;
}
.social-icons a{
  width:36px;height:36px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.footer-bottom{
  text-align:center;
  padding:22px 0;
  font-size:.8rem;
  letter-spacing:.05em;
}
#totop{
  position:fixed;
  right:24px; bottom:24px;
  width:44px;height:44px;
  background:var(--color-accent);
  color:#fff;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  z-index:200;
}

/* ==========================================================================
   5b. Interior pages (Hakkımızda, Blog, vb.) - title + body content
   ========================================================================== */
.page-header{
  padding:60px 0 10px;
  text-align:center;
}
.page-title{
  font-family:var(--font-serif);
  font-size:2.4rem;
  letter-spacing:.03em;
}
.page-title::after{
  content:"";
  display:block;
  width:70px;
  height:2px;
  margin:18px auto 0;
  background:linear-gradient(90deg, transparent, var(--color-accent), transparent);
}

/*
 * Pages like "Hakkımızda" were originally written in the old theme's
 * page builder, and their saved content can still carry inline
 * "color:#fff" (or similarly light) styling meant for a dark section
 * background that no longer exists here. Rather than leaving that
 * text invisible on our plain white page background, every element
 * inside the content area is forced to inherit one readable colour
 * from its container, and headings/links get their own clear colours.
 * If you intentionally colour some text later through the block
 * editor, note that this rule will override it back to the theme
 * colour - remove the ": not" exceptions below if you need per-text
 * custom colours again.
 */
.page-content, .entry-content{
  font-family:var(--font-body);
  color:var(--color-text);
  font-size:1.05rem;
  line-height:1.9;
  max-width:820px;
  margin:0 auto;
}
/* Neutralise white/near-white inline colours left over from the old page
   builder content - other custom colours you set are untouched. */
.page-content [style*="color:#fff" i], .page-content [style*="color: #fff" i],
.page-content [style*="color:#ffffff" i], .page-content [style*="color: #ffffff" i],
.page-content [style*="color:white" i], .page-content [style*="color: white" i],
.entry-content [style*="color:#fff" i], .entry-content [style*="color: #fff" i],
.entry-content [style*="color:#ffffff" i], .entry-content [style*="color: #ffffff" i],
.entry-content [style*="color:white" i], .entry-content [style*="color: white" i]{
  color:var(--color-text) !important;
}
/* Safety net: some page-builder text colour comes from an auto-generated
   CSS class rather than an inline style (which the rule above can't catch).
   Any page not explicitly rebuilt in functions.php can still end up with
   invisible white text, so every element inside the content area falls
   back to one readable colour here. */
.page-content *, .entry-content *{
  color:var(--color-text) !important;
}
.page-content h1, .page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6,
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6{
  color:var(--color-dark) !important;
  font-family:var(--font-serif);
  margin-top:1.2em;
}
.page-content a, .entry-content a{
  color:var(--color-accent) !important;
  text-decoration:underline;
}
.page-content img, .entry-content img{
  margin:24px 0;
}
.page-content .project-gallery img, .entry-content .project-gallery img{
  margin:0;
}
.page-content blockquote, .entry-content blockquote{
  border-left:2px solid var(--color-accent);
  padding-left:20px;
  font-style:italic;
  color:var(--color-dark) !important;
}

/* Project detail pages: Konum/Yıl/Alan/Durum fact row + photo gallery */
.project-meta{
  display:flex;
  flex-wrap:wrap;
  gap:28px;
  margin:0 0 36px;
  padding-bottom:24px;
  border-bottom:1px solid var(--color-border);
}
.project-meta-item{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.project-meta-label{
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--color-accent);
}
.project-meta-value{
  font-family:var(--font-serif);
  font-size:1.1rem;
  color:var(--color-dark) !important;
}
.project-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:24px;
  margin-top:8px;
}
.project-gallery .grid-item img{ aspect-ratio:4/3; }
.project-gallery .grid-item{ padding:6px; cursor:zoom-in; }
.project-gallery .grid-item:focus-visible{ outline:2px solid var(--color-accent); outline-offset:4px; }

/* --------------------------------------------------------------------
   Lightbox - same-page slider opened by clicking a gallery frame
   -------------------------------------------------------------------- */
body.lightbox-open{ overflow:hidden; }
.lightbox-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(10,9,7,.94);
}
.lightbox-overlay.is-open{ display:flex; }
.lightbox-img-wrap{
  max-width:88vw;
  max-height:82vh;
}
.lightbox-img-wrap img{
  display:block;
  max-width:88vw;
  max-height:82vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border:1px solid var(--color-accent);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.lightbox-close{
  position:absolute;
  top:24px;
  right:28px;
  z-index:2;
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
  transition:background .25s ease, border-color .25s ease;
}
.lightbox-close:hover{ background:var(--color-accent); border-color:var(--color-accent); color:var(--color-dark); }
.lightbox-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:52px; height:52px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:1.8rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .25s ease, border-color .25s ease;
}
.lightbox-arrow:hover{ background:var(--color-accent); border-color:var(--color-accent); color:var(--color-dark); }
.lightbox-prev{ left:24px; }
.lightbox-next{ right:24px; }
.lightbox-counter{
  position:absolute;
  left:0; right:0;
  bottom:22px;
  z-index:2;
  text-align:center;
  color:#fff;
  font-family:var(--font-body);
  font-size:.85rem;
  letter-spacing:.1em;
}
.lightbox-counter .current{ color:var(--color-accent); font-weight:600; }

@media (max-width: 600px){
  .lightbox-arrow{ width:40px; height:40px; font-size:1.4rem; }
  .lightbox-prev{ left:10px; }
  .lightbox-next{ right:10px; }
  .lightbox-close{ top:14px; right:14px; width:38px; height:38px; font-size:1.3rem; }
}

/* ==========================================================================
   6. Responsive
   ========================================================================== */
@media (max-width: 900px){
  .grid-6, .footer-widgets{ grid-template-columns:repeat(2,1fr); }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .intro-columns{ grid-template-columns:1fr; }
}
@media (max-width: 782px){
  .site-branding img{ max-height:56px; }
  .site-nav-wrap{ gap:12px; }
  .menu-toggle{ display:block; order:1; }
  .lang-switcher{ order:2; }
  .primary-menu{
    order:3;
    display:none;
    position:absolute;
    top:100%; left:0; right:0;
    flex-direction:column;
    background:var(--color-white);
    padding:10px 24px 20px;
    box-shadow:0 12px 24px rgba(0,0,0,.08);
    gap:0;
  }
  .primary-menu.is-open{ display:flex; }
  .primary-menu .sub-menu{ position:static; box-shadow:none; display:block; padding-left:14px; }
  .grid-6, .grid-4, .footer-widgets{ grid-template-columns:1fr; }
  .footer-mini-map{ width:200px; height:200px; }
}