/* =========================================================
   JERUSALEM PAGE CSS
   FILE: israelregion.css
========================================================= */


/* =========================================================
   HERO LAYOUT
========================================================= */

.hero{

  max-width:1200px;

  margin:0 auto;

  padding:24px 16px 40px;

  display:flex;

  flex-direction:column;

  gap:24px;

  box-sizing:border-box;

}


/* =========================================================
   CARD
========================================================= */

.card{

  background:#ffffffee;

  border-radius:18px;

  border:1px solid rgba(148,163,184,0.28);

  box-shadow:
    0 18px 40px rgba(15,23,42,0.10);

  padding:18px 20px;

  backdrop-filter:blur(14px);

  -webkit-backdrop-filter:blur(14px);

  box-sizing:border-box;

}

body.dark-mode .card{

  background:rgba(15,23,42,0.96);

  border-color:rgba(148,163,184,0.30);

  box-shadow:
    0 18px 40px rgba(0,0,0,0.70);

}


/* =========================================================
   MAIN INFO BLOCK
========================================================= */

.info-block{

  display:flex;

  flex-direction:column;

  gap:22px;

}


/* =========================================================
   TITLE
========================================================= */

.country-title{

  text-align:center;

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:6px;

}

.title-main{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:10px;

  font-size:clamp(1.8rem,4vw,2.5rem);

  font-weight:700;

  color:#0f172a;

}

body.dark-mode .title-main{

  color:#f8fafc;

}

.tz-small{

  font-size:.88rem;

  color:#6b7280;

  font-weight:500;

}

body.dark-mode .tz-small{

  color:#9ca3af;

}


/* =========================================================
   FLAG
========================================================= */

.flag-inline-title{

  height:1em;

  width:auto;

  object-fit:contain;

  border-radius:4px;

  vertical-align:middle;

}


/* =========================================================
   LIVE CLOCK TEXT
========================================================= */

.live-clock-text{

  display:flex;

  align-items:center;

  justify-content:center;

  flex-wrap:wrap;

  gap:10px;

  text-align:center;

  font-size:.92rem;

  color:#6b7280;

}

body.dark-mode .live-clock-text{

  color:#9ca3af;

}


/* =========================================================
   CLOCK BADGE
========================================================= */

.clock-badge{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:6px;

  padding:6px 12px;

  border-radius:999px;

  background:#2563eb;

  color:#ffffff;

  text-decoration:none;

  font-size:.85rem;

  font-weight:600;

  transition:.18s ease;

}

.clock-badge:hover{

  transform:translateY(-1px);

  background:#1d4ed8;

}


/* =========================================================
   BIG CLOCK
========================================================= */

.country-big-clock{

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  padding:30px 20px;

  border-radius:22px;

  background:
    radial-gradient(
      circle at top,
      rgba(37,99,235,0.16),
      transparent 65%
    );

}

.country-time-value{

  font-size:clamp(3rem,7vw,5rem);

  font-weight:800;

  letter-spacing:.08em;

  font-variant-numeric:tabular-nums;

  color:#0f172a;

}

body.dark-mode .country-time-value{

  color:#f8fafc;

}

.country-time-label{

  margin-top:8px;

  font-size:.95rem;

  color:#6b7280;

}

body.dark-mode .country-time-label{

  color:#9ca3af;

}


/* =========================================================
   UTC ROW
========================================================= */

.utc-row{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:8px;

  margin:10px auto 0;

  padding:6px 14px;

  border-radius:999px;

  background:rgba(37,99,235,0.06);

  border:1px solid rgba(148,163,184,0.40);

}

body.dark-mode .utc-row{

  background:rgba(37,99,235,0.14);

  border-color:rgba(37,99,235,0.25);

}

.clock-time{

  font-size:.95rem;

  font-weight:600;

  font-variant-numeric:tabular-nums;

}

.clock-tz{

  font-size:.82rem;

  text-transform:uppercase;

  letter-spacing:.10em;

  color:#6b7280;

}

body.dark-mode .clock-tz{

  color:#9ca3af;

}


/* =========================================================
   SECTION TITLES
========================================================= */

.section-title{

  display:inline-flex;

  align-items:center;

  gap:8px;

  font-size:1.12rem;

  font-weight:700;

  color:#0f172a;

  margin:10px 0;

}

body.dark-mode .section-title{

  color:#f8fafc;

}


/* =========================================================
   ABOUT TEXT
========================================================= */

.about-text{

  line-height:1.8;

  color:#374151;

}

body.dark-mode .about-text{

  color:#d1d5db;

}


/* =========================================================
   META GRID
========================================================= */

.meta-row{

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(210px,1fr));

  gap:14px;

  align-items:stretch;

}

.meta{

  padding:12px;

  border-left:3px solid rgba(148,163,184,0.55);

  background:rgba(241,245,249,0.90);

  border-radius:0 12px 12px 0;

  line-height:1.7;

  color:#4b5563;

  height:100%;

}

body.dark-mode .meta{

  background:rgba(15,23,42,0.75);

  color:#e5e7eb;

}

.meta a{

  color:#2563eb;

  text-decoration:none;

  font-weight:600;

}

.meta a:hover{

  text-decoration:underline;

}


/* =========================================================
   CITY GRID
========================================================= */

.cities{

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

  gap:14px;

}


/* =========================================================
   CITY CARD
========================================================= */

.city-card{

  padding:14px;

  border-radius:14px;

  border:1px solid rgba(148,163,184,0.24);

  background:
    radial-gradient(
      circle at top left,
      rgba(37,99,235,0.10),
      transparent 60%
    ),
    #ffffff;

  box-shadow:
    0 8px 20px rgba(15,23,42,0.06);

}

body.dark-mode .city-card{

  background:
    radial-gradient(
      circle at top left,
      rgba(37,99,235,0.22),
      transparent 60%
    ),
    rgba(15,23,42,0.95);

}

.city-name{

  font-size:.95rem;

  font-weight:600;

  margin-bottom:6px;

}

.city-time{

  font-size:1.45rem;

  font-weight:700;

  font-variant-numeric:tabular-nums;

}


/* =========================================================
   SEO BLOCK
========================================================= */

.seo-block{

  display:flex;

  flex-direction:column;

  gap:16px;

}

.seo-block p{

  line-height:1.9;

}

.seo-block a{

  color:#2563eb;

  text-decoration:none;

}

.seo-block a:hover{

  text-decoration:underline;

}

body.dark-mode .seo-block p{

  color:#d1d5db;

}


/* =========================================================
   RELATED TAGS
========================================================= */

.related-tags{

  display:flex;

  flex-wrap:wrap;

  gap:10px;

}

.related-tags a{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:7px 14px;

  border-radius:999px;

  background:#f8fafc;

  border:1px solid rgba(148,163,184,0.35);

  color:#2563eb;

  text-decoration:none;

  font-size:.88rem;

  transition:.18s ease;

}

.related-tags a:hover{

  background:rgba(37,99,235,0.08);

  border-color:#2563eb;

  transform:translateY(-1px);

}

body.dark-mode .related-tags a{

  background:rgba(15,23,42,0.90);

  color:#93c5fd;

}


/* =========================================================
   ACCORDION
========================================================= */

.info-section.card{

  padding:22px;

}

.info-toggle{

  width:100%;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

  padding:15px 18px;

  border-radius:14px;

  border:1px solid rgba(37,99,235,0.35);

  background:
    linear-gradient(
      135deg,
      rgba(37,99,235,0.08),
      rgba(37,99,235,0.02)
    );

  cursor:pointer;

  font-size:15px;

  font-weight:700;

  color:#0f172a;

  transition:.20s ease;

}

.info-toggle:hover{

  background:rgba(37,99,235,0.12);

  border-color:#2563eb;

}

body.dark-mode .info-toggle{

  color:#f8fafc;

  background:
    linear-gradient(
      135deg,
      rgba(37,99,235,0.18),
      rgba(37,99,235,0.08)
    );

}

.toggle-icon{

  font-size:20px;

  color:#2563eb;

  transition:transform .20s ease;

}

.info-section.active .toggle-icon{

  transform:rotate(45deg);

}

.info-content{

  display:none;

  padding:20px 6px 6px;

}

.info-section.active .info-content{

  display:block;

}

.info-content p,
.info-content li{

  line-height:1.8;

}

body.dark-mode .info-content p,
body.dark-mode .info-content li{

  color:#d1d5db;

}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar-main-box{

  width:100%;

  max-width:100%;

  margin-top:20px;

}

.sidebar-inner-box{

  display:grid;

  grid-template-columns:
    repeat(auto-fill,minmax(150px,1fr));

  gap:10px;

  margin-top:12px;

}


/* =========================================================
   SIDEBAR LINKS
========================================================= */

.division-link{

  display:flex;

  align-items:center;

  justify-content:center;

  padding:12px 10px;

  border-radius:10px;

  text-decoration:none;

  background:#f8fafc;

  border:1px solid rgba(148,163,184,0.30);

  color:#111827;

  transition:.16s ease;

  text-align:center;

}

.division-link:hover{

  background:rgba(37,99,235,0.08);

  border-color:#2563eb;

  transform:translateY(-1px);

}

.active-division{

  background:rgba(37,99,235,0.12);

  border-color:#2563eb;

  font-weight:700;

}

body.dark-mode .division-link{

  background:rgba(15,23,42,0.92);

  color:#f8fafc;

}

body.dark-mode .active-division{

  background:rgba(37,99,235,0.22);

  border-color:#3b82f6;

}


/* =========================================================
   BACK BUTTON
========================================================= */

.back-home-wrapper{

  max-width:1200px;

  margin:0 auto 30px;

  padding:0 16px;

}

.back-home-button{

  display:inline-flex;

  align-items:center;

  gap:8px;

  padding:8px 14px;

  border-radius:999px;

  border:1px solid rgba(148,163,184,0.50);

  background:#f8fafc;

  color:#6b7280;

  text-decoration:none;

  transition:.18s ease;

}

.back-home-button:hover{

  background:rgba(37,99,235,0.08);

  border-color:#2563eb;

  color:#111827;

}

body.dark-mode .back-home-button{

  background:rgba(15,23,42,0.92);

  color:#d1d5db;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:640px){

  .card{

    padding:16px 14px;

  }

  .country-big-clock{

    background:none;

    padding:20px 10px;

  }

  .country-time-value{

    font-size:2.8rem;

    letter-spacing:.04em;

  }

  .meta-row{

    grid-template-columns:1fr;

  }

  .cities{

    grid-template-columns:1fr;

  }

  .sidebar-inner-box{

    grid-template-columns:
      repeat(auto-fill,minmax(120px,1fr));

  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:400px){

  .sidebar-inner-box{

    grid-template-columns:
      repeat(auto-fill,minmax(95px,1fr));

    gap:6px;

  }

  .division-link{

    padding:8px;

    font-size:.82rem;

  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

  *{

    transition:none !important;

    scroll-behavior:auto !important;

  }

}