/* แบรนด์ TCS-CERT — สเกลเดียวทุกหน้า (display + briefwall + header บน /brief/)
   ตัวแปรหลักนิยามใน display-scale.css — ไฟล์นี้มี fallback เผื่อโหลดไม่ครบ
   โหลดหลัง CSS ของแต่ละหน้า จึงชนะด้วย order ไม่ต้องใช้ !important */

:root {
  --header-brand-mark-fallback: clamp(52px, calc(80px * var(--display-scale, 1)), 148px);
  --header-brand-name-fallback: clamp(20px, calc(36px * var(--display-scale, 1)), 72px);
  --header-brand-sub-fallback: clamp(13px, calc(19px * var(--display-scale, 1)), 38px);
  --brand-gold: linear-gradient(
    115deg,
    #8a6a1a 0%,
    #f0d78c 22%,
    #c9a227 45%,
    #fff3c4 55%,
    #b8860b 78%,
    #f5e6a3 100%
  );
  --brand-gold-muted: linear-gradient(
    115deg,
    #6e5516 0%,
    #d4b86a 25%,
    #a8841e 48%,
    #e8d59a 58%,
    #8f6e12 82%,
    #dcc888 100%
  );
}

.wall-brand__name,
.globe-brand__name,
.live-brand__name,
.ransomware-brand__name,
.bw-brand__name {
  font-size: var(--header-brand-name, var(--header-brand-name-fallback));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.06em;
  background-image: var(--brand-gold);
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: brand-gold-sheen 8s ease-in-out infinite alternate;
}

.wall-brand__system,
.globe-brand__tagline,
.live-brand__tagline,
.ransomware-brand__tagline,
.bw-brand__tagline {
  font-size: var(--header-brand-sub, var(--header-brand-sub-fallback));
  line-height: 1.4;
  max-width: min(42vw, 560px);
  margin-top: 4px;
  overflow-wrap: break-word;
  background-image: var(--brand-gold-muted);
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0.92;
  animation: brand-gold-sheen 10s ease-in-out infinite alternate;
}

.wall-brand__system {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

@keyframes brand-gold-sheen {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .wall-brand__name,
  .globe-brand__name,
  .live-brand__name,
  .ransomware-brand__name,
  .bw-brand__name,
  .wall-brand__system,
  .globe-brand__tagline,
  .live-brand__tagline,
  .ransomware-brand__tagline,
  .bw-brand__tagline {
    animation: none;
    background-position: 40% 50%;
  }
}

.wall-brand__mark,
.globe-brand__mark,
.live-brand__mark,
.ransomware-brand__mark,
.bw-brand__mark {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: var(--header-brand-mark, var(--header-brand-mark-fallback));
  height: var(--header-brand-mark, var(--header-brand-mark-fallback));
  min-width: 0;
  min-height: 0;
  overflow: visible;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wall-brand__mark img,
.globe-brand__mark img,
.live-brand__mark img,
.ransomware-brand__mark img,
.bw-brand__mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- Brief (PaperMod header) — นกฮูกซ้าย + ชื่อ/tagline ขวา (grid กันข้อความหดแนวตั้ง) --- */
body:has(.brief-page) .logo {
  min-width: 12rem !important;
  overflow: visible !important;
}

body:has(.brief-page) .logo a {
  display: grid !important;
  grid-template-columns: auto minmax(9rem, max-content) !important;
  grid-template-rows: auto auto !important;
  column-gap: 12px !important;
  row-gap: 2px !important;
  align-items: center !important;
  max-width: none !important;
  min-width: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0.2rem 0 !important;
  position: relative !important;
}

body:has(.brief-page) .logo a::before {
  content: "" !important;
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  width: clamp(44px, 4.5vw, 58px) !important;
  height: clamp(44px, 4.5vw, 58px) !important;
  background-image: url("/images/logo2.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  border: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  margin: 0 !important;
}

body:has(.brief-page) .logo-title {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: block !important;
  margin: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  background-image: var(--brand-gold) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  animation: brand-gold-sheen 8s ease-in-out infinite alternate;
}

body:has(.brief-page) .logo-tagline {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: block !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
  font-size: clamp(0.72rem, 1.1vw, 0.88rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.04em !important;
  background-image: var(--brand-gold-muted) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  opacity: 0.92;
  animation: brand-gold-sheen 10s ease-in-out infinite alternate;
}

body:has(.brief-page) .header-tagline-center {
  color: #9eb0ad !important;
  opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  body:has(.brief-page) .logo-title,
  body:has(.brief-page) .logo-tagline {
    animation: none !important;
    background-position: 40% 50% !important;
  }
}