/* ==========================================================================
   SEATTLEKR SITE-WIDE CHROME
   Blue header bar + navy skyline footer, applied on every page of the
   seattlekr_news child theme. Sister sites run their own child themes and
   are unaffected. Self-contained tokens (this file loads independently of
   the homepage-only joongang-style.css).
   ========================================================================== */

:root {
  --skr-header-bg: #2563eb;
  --skr-header-bg-dark: #1e4fd0;
  --skr-header-text: #ffffff;
  --skr-header-height: 64px;
  --skr-footer-bg: #14264d;
  --skr-footer-bg-dark: #0f1d3d;
  --skr-footer-text: #c7d2e6;
  --skr-footer-heading: #ffffff;
  --skr-accent: #2563eb;
  --skr-max-width: 1200px;
}

/* ==========================================================================
   UTILITY STRIP — navy bar above the header. Left: Korean date + Seattle
   weather. Right: 광고 문의 + a language switcher that redirects to the
   sister sites (options sourced from msw_get_community_sites()).
   ========================================================================== */
.skr-utilitybar {
  background: var(--skr-footer-bg);
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  line-height: 1.4;
}
.skr-utilitybar__inner {
  max-width: var(--skr-max-width);
  margin: 0 auto;
  padding: 0 20px;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.skr-utilitybar__left,
.skr-utilitybar__right {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.skr-utilitybar__date { color: #ffffff; font-weight: 600; }
.skr-utilitybar__weather { display: inline-flex; align-items: center; gap: 6px; }
.skr-utilitybar__sep { color: rgba(255, 255, 255, 0.28); }
.skr-utilitybar__link {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  transition: color 0.15s;
}
.skr-utilitybar__link:hover { color: #ffffff; }
.skr-utilitybar__lang { display: inline-flex; align-items: center; margin: 0; }
.skr-utilitybar__langselect {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: rgba(255, 255, 255, 0.10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  padding: 4px 26px 4px 10px;
  cursor: pointer;
}
.skr-utilitybar__langselect:hover { background-color: rgba(255, 255, 255, 0.16); }
.skr-utilitybar__langselect option { color: #1f2937; }

/* ==========================================================================
   BRAND ROW — white row carrying the SeattleKR wordmark + social links.
   (The reference comp's search box is intentionally omitted.)
   ========================================================================== */
.skr-brandbar { background: #ffffff; border-bottom: 1px solid #eef1f6; }
.skr-brandbar__inner {
  max-width: var(--skr-max-width);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.skr-brandbar__brand {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.skr-brandbar__logo {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #14264d;
  text-decoration: none;
}
.skr-brandbar__logo .kr { color: var(--skr-accent); }
.skr-brandbar__tagline {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: #64748b;
}
.skr-brandbar__social { display: flex; align-items: center; gap: 10px; }
.skr-brandbar__social-label { font-size: 13px; font-weight: 600; color: #64748b; margin-right: 2px; }
.skr-brandbar__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #475569;
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
/* Brand-colored social chips (white glyph on each platform's brand color) */
.skr-brandbar__social-link--facebook  { background: #1877f2; color: #ffffff; }
.skr-brandbar__social-link--instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); color: #ffffff; }
.skr-brandbar__social-link--youtube   { background: #ff0000; color: #ffffff; }
.skr-brandbar__social-link--threads   { background: #000000; color: #ffffff; }
.skr-brandbar__social-link:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(16, 24, 40, 0.20); filter: saturate(1.08); }

/* ==========================================================================
   NAV BAR — restyle the GeneratePress nav-as-header into a white menu bar.
   The brand row above carries the wordmark, so the in-nav branding is hidden.
   (DOM: nav#site-navigation.has-branding > .inside-navigation >
    .navigation-branding .site-logo + .menu-toggle + #primary-menu ul.menu)
   ========================================================================== */
.main-navigation#site-navigation {
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.06);
  border-top: 1px solid #eef1f6;
  border-bottom: 1px solid #e6eaf1;
}
.main-navigation#site-navigation .inside-navigation {
  max-width: var(--skr-max-width);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  min-height: 52px;
}

/* Brand row carries the logo; hide GP's in-nav branding. */
#site-navigation .navigation-branding { display: none; }

/* Menu pinned left to mirror the comp's nav row. */
#site-navigation .main-nav { margin-right: auto; }
#site-navigation .main-nav > ul > li > a {
  color: #1f2937;
  font-weight: 600;
  font-size: 15px;
  line-height: 52px;
  padding: 0 15px;
}
#site-navigation .main-nav > ul > li > a:hover,
#site-navigation .main-nav > ul > li:hover > a,
#site-navigation .main-nav > ul > li.current-menu-item > a,
#site-navigation .main-nav > ul > li.current-menu-parent > a {
  color: var(--skr-accent);
  background: #eef4ff;
}

/* Sub-menus keep a light surface for readability */
#site-navigation .main-nav ul ul {
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.16);
  border-radius: 10px;
  overflow: hidden;
}
#site-navigation .main-nav ul ul li > a {
  color: #1f2937;
  line-height: 1.4;
  padding: 11px 16px;
}
#site-navigation .main-nav ul ul li > a:hover,
#site-navigation .main-nav ul ul li.current-menu-item > a {
  color: var(--skr-accent);
  background: #eaf1ff;
}

/* Mobile hamburger toggle (dark on the white bar) */
#site-navigation .menu-toggle,
#site-navigation .menu-toggle .gp-icon,
#site-navigation .menu-toggle .mobile-menu {
  color: #1f2937;
}
#site-navigation .menu-toggle:hover { background: #f1f5f9; }

@media (max-width: 768px) {
  .skr-utilitybar__inner { min-height: 34px; padding: 0 14px; font-size: 12px; }
  .skr-utilitybar__weather { display: none; }
  .skr-brandbar__inner { padding: 12px 14px; }
  .skr-brandbar__logo { font-size: 24px; }
  .skr-brandbar__tagline { font-size: 11.5px; }
  .skr-brandbar__social-label { display: none; }
  .main-navigation#site-navigation .inside-navigation {
    min-height: 48px;
    padding: 0 14px;
  }
}

/* ==========================================================================
   FOOTER — replace the GenerateBlocks copyright footer with a navy band
   carrying the wordmark, tagline, copyright, and a Seattle skyline line-art.
   ========================================================================== */

.skr-footer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--skr-footer-bg) 0%, var(--skr-footer-bg-dark) 100%);
  color: var(--skr-footer-text);
}
.skr-footer__inner {
  position: relative;
  z-index: 1;
  max-width: var(--skr-max-width);
  margin: 0 auto;
  padding: 36px 20px 30px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 40px;
}
.skr-footer__brand {
  position: relative;
  z-index: 1;
}
.skr-footer__logo-text {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #ffffff;
  line-height: 1;
}
.skr-footer__logo-text .kr { color: #ef6f6c; }
.skr-footer__tag {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}
.skr-footer__meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 10px;
}
.skr-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.skr-footer__navlink {
  position: relative;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  transition: color 0.15s;
}
.skr-footer__navlink:first-child { padding-left: 0; }
.skr-footer__navlink:hover { color: #ffffff; }
.skr-footer__navlink + .skr-footer__navlink::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.22);
}
.skr-footer__copy {
  margin: 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
}
.skr-footer__skyline {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: 44%;
  height: auto;
  color: rgba(255, 255, 255, 0.10);
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 768px) {
  .skr-footer__inner { padding: 28px 16px 26px; flex-direction: column; }
  .skr-footer__meta { align-items: flex-start; text-align: left; }
  .skr-footer__nav { justify-content: flex-start; }
  .skr-footer__skyline { max-width: 62%; opacity: 0.5; }
}

/* ==========================================================================
   MISEATTLEWEB PROMO — house ad rendered by msw_get_miseattleweb_banner(),
   shown in the homepage agency strip and appended in-content on single posts.
   Single centered row on desktop; on phones it stacks and the CTA goes
   full-width so the pill can't overflow the rounded card (it was clipped on
   the right at mobile widths). padding uses clamp() so the side gutter shrinks
   before the layout has to break.
   ========================================================================== */
.skr-promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
  max-width: 728px;
  margin: 0 auto;
  padding: 14px clamp(16px, 4vw, 28px);
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
}
.skr-promo__main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  min-width: 0;
}
.skr-promo__name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  white-space: nowrap;
}
.skr-promo__divider {
  flex: none;
  width: 1px;
  height: 30px;
  background: rgba(255, 255, 255, 0.2);
}
.skr-promo__tag {
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.85;
}
.skr-promo__cta {
  flex: none;
  background: rgba(255, 255, 255, 0.15);
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .skr-promo {
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 18px 20px;
    text-align: center;
  }
  .skr-promo__main {
    flex-direction: column;
    gap: 8px;
  }
  .skr-promo__divider { display: none; }
  .skr-promo__cta {
    width: 100%;
    max-width: 280px;
    text-align: center;
  }
}