/* =========================================================
   V1 Editorial — Orange-toned override
   Loaded AFTER common.css. Only re-tones the token palette
   and re-colors a handful of dark surfaces so that the whole
   A route reads as "落ち着いたオレンジ基調".
   ========================================================= */

:root {
  /* Backgrounds — warm creams that harmonize with the logo orange */
  --near-white: #FCF7EC;
  --cream:      #F5E9CE;
  --cream-2:    #EDD9AC;
  --sand:       #E3C58F;

  /* Text — deep warm browns, tuned toward amber-brown */
  --ink:   #3B2308;
  --ink-2: #5C3F17;
  --ink-3: #8C6E42;

  /* Lines / hairlines — warm & amber-tinted */
  --line:   #EBD5A9;
  --line-2: #D6B77E;

  /* Brand oranges — matched to the logo #ED9105 */
  --orange:   #ED9105;   /* logo background, primary brand orange */
  --orange-2: #C77400;   /* hover / deeper accent */
  --clay:     #8C4E00;   /* deep footer / company section */
  --gold:     #B87814;   /* soft gold accent (distinct from primary) */
}

/* Header ----------------------------------------------------- */
.site-header.solid {
  background: rgba(252,247,236,.94);
  border-bottom-color: var(--line);
}
.site-header.plain {
  background: var(--near-white);
  border-bottom-color: var(--line);
}

/* Brand mark — replace the placeholder 'T' with the actual logo */
.brand-mark {
  width: 56px; height: 56px;
  background: var(--orange);
  background-image: url('../img/logo-mark-white.png');
  background-size: 74% 74%;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  box-shadow: 0 4px 12px -3px rgba(237,145,5,.45);
}
/* Slightly tighten header padding when solid so a bigger logo still fits */
.site-header.solid { padding: 10px 0; }

/* Halve the vertical rhythm between sections for a tighter A-route pace */
.section { padding: 70px 0; }
@media (max-width: 840px) { .section { padding: 44px 0; } }
.brand-mark::after { content: none; }
.brand-text { color: var(--ink); font-weight: 700; letter-spacing: .04em; }
.brand-text small { color: var(--ink-3); }
.gnav a { color: var(--ink-2); }
.gnav a::after { background: var(--orange); }
.gnav a:hover { color: var(--orange-2); }
.dropdown-toggle {
  border-color: var(--line-2);
  color: var(--orange-2);
}
.dropdown-toggle:hover {
  background: var(--cream);
  border-color: var(--orange);
  color: var(--orange-2);
}
.dropdown-menu a:hover {
  background: var(--cream);
  color: var(--orange-2);
}
.dropdown-menu a::after { color: var(--orange); }

/* Keep the "入居者様向け" dropdown visible on all viewport widths.
   common.css hides it under 960px — we override that here for V1. */
@media (max-width: 960px) {
  .site-header .header-actions .dropdown { display: block; }
}
@media (max-width: 720px) {
  .site-header .header-actions .dropdown-toggle {
    padding: 7px 12px;
    font-size: 11.5px;
    gap: 6px;
  }
  .site-header .header-actions .dropdown-menu {
    min-width: 200px;
    right: auto; left: 50%; transform: translate(-50%, -6px);
  }
  .site-header .header-actions .dropdown.open .dropdown-menu {
    transform: translate(-50%, 0);
  }
  .site-header .header-actions .btn-primary { padding: 8px 14px; font-size: 12px; }
}
@media (max-width: 520px) {
  /* Hide the CTA button on very narrow screens so the tenant dropdown fits */
  .site-header .header-actions .btn-primary { display: none; }
}

/* Primary button — deep terracotta, not black */
.btn-primary {
  background: var(--clay);
  color: var(--near-white);
}
.btn-primary:hover {
  background: var(--orange-2);
}

/* Mobile menu tray */
@media (max-width: 960px) {
  .gnav { background: var(--near-white); }
  .gnav a { border-bottom-color: var(--line); }
}

/* Page banner (sub pages) ------------------------------------ */
.page-banner {
  background: var(--cream);
  border-bottom-color: var(--line);
}

/* Forms ------------------------------------------------------ */
.form-row input[type="text"],
.form-row input[type="tel"],
.form-row input[type="email"],
.form-row input[type="date"],
.form-row input[type="file"],
.form-row select,
.form-row textarea {
  border-color: var(--line-2);
  background: var(--near-white);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--orange);
  background: #fff;
}
.form-submit {
  background: var(--clay);
  color: var(--near-white);
}
.form-submit:hover {
  background: var(--orange-2);
}
.checkbox-row {
  background: var(--cream);
}

/* Footer — deep warm brown, not black ------------------------ */
.site-footer {
  background: var(--clay);
  color: rgba(252,247,236,.75);
}
.footer-grid { border-bottom-color: rgba(252,247,236,.14); }
.footer-brand,
.footer-tel,
.footer-col a:hover { color: var(--near-white); }
.footer-brand + p,
.footer-col a { color: rgba(252,247,236,.72); }
.footer-col h4 { color: var(--orange); letter-spacing: .16em; }
.footer-bottom { color: rgba(252,247,236,.5); }

/* Show the logo mark alongside the Japanese company name in the footer */
.site-footer .footer-brand {
  position: relative;
  padding-left: 78px;
  min-height: 62px;
  display: flex; align-items: center;
  font-size: 15px; line-height: 1.55;
  font-weight: 700; letter-spacing: .04em;
  font-family: var(--f-jp); font-style: normal;
}
.site-footer .footer-brand::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 62px; height: 62px; border-radius: 12px;
  background: var(--orange) url('../img/logo-mark-white.png') center/70% no-repeat;
  box-shadow: 0 6px 14px -5px rgba(237,145,5,.5);
}

/* -----------------------------------------------------------
   Index-page specific: Company section matches the Topics
   section — cream background with warm ink text.
   ----------------------------------------------------------- */
.company {
  background: var(--cream);
  color: var(--ink);
}
.company .section-head { border-bottom-color: var(--line); }
.company .section-head h2 { color: var(--ink); }
.company .section-head h2 .en { color: var(--ink-3); }
.company .section-head .index { color: var(--orange-2); }
.company-item {
  border-top-color: var(--line-2);
}
.company-item dt { color: var(--orange-2); }
.company-item dd { color: var(--ink); }
.company-item dd small { color: var(--ink-3); }
.company-item .tag-list span {
  border-color: var(--line-2);
  color: var(--ink);
  background: var(--near-white);
}

/* -----------------------------------------------------------
   Hero overlay — warmer, more toasted tone
   ----------------------------------------------------------- */
.hero-media::after {
  background:
    linear-gradient(180deg,
      rgba(59,35,8,.50) 0%,
      rgba(59,35,8,.15) 35%,
      rgba(59,35,8,.68) 100%);
}
.hero-body .kicker { color: var(--orange); }
.hero-body h1 em { color: var(--orange); }

/* Contact band — warmer cream + terracotta CTA -------------- */
.contact-band {
  background: var(--cream);
  border-top-color: var(--line);
  border-bottom-color: var(--line);
}
.contact-band .en { color: var(--orange-2); }
.contact-band .cta {
  background: var(--clay);
  color: var(--near-white);
}
.contact-band .cta:hover { background: var(--orange-2); }
.contact-band .tel a { color: var(--ink); }

/* Section head — index numbers glow with warmer orange ------ */
.section-head .index { color: var(--orange-2); }
.section-head h2 .en { color: var(--ink-3); }

/* Services — keep cream but tune accents -------------------- */
.services { background: var(--near-white); }
.svc-item .svc-media .num {
  background: rgba(58,30,15,.55);
}
.svc-copy .h3-en { color: var(--orange-2); }
.svc-copy li::before { background: var(--orange); }
.svc-copy .more { color: var(--ink); border-color: var(--ink); }
.svc-copy .more:hover { color: var(--orange-2); border-color: var(--orange-2); }

/* Topics — orange accents ---------------------------------- */
.topic-list li:hover { background: var(--cream); }
.topic-list .cat {
  color: var(--orange-2);
  border-color: var(--orange-2);
}
.topic-list time { color: var(--ink-2); }

/* Access map link + caption tuned -------------------------- */
.access-map .map-caption a { color: var(--near-white); }