/*
 * United World US Core — focus states and the honeypot safety net.
 *
 * Deliberately small. Page-level styling lives in the page content on this
 * site; moving it is a later job, and this plugin must not change how anything
 * currently renders.
 */

/*
 * Page-level styling lives in the page content itself on this site — each page
 * carries its own <style> block. That is not how it should be, but rewriting it
 * is a Phase 3 job (docs/PHASE3-PLAN.md), not a P0 one, and moving it now would
 * mean touching every page for no measurable gain.
 *
 * So this file stays small: only rules that must survive independently of the
 * page content.
 */

/* Keyboard focus. The stock pages remove focus styling in places; a contact
   form that cannot be navigated by keyboard loses conversions and fails
   accessibility review. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

/* Skip link needs to be visible when focused. */
.skip-link:focus {
	position: static !important;
	width: auto !important;
	height: auto !important;
	clip: auto !important;
	clip-path: none !important;
	padding: 12px 20px;
	background: #fff;
	color: #0f172a;
}

/* Honeypot safety net. The rule also ships inside content/contact-form.html so
   the field stays hidden even if this stylesheet fails to load — a visible
   honeypot would collect real answers from real people. */
.uwct-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- contact form ------------------------------------------------------- */
/* Moved out of the page content: behaviour and presentation belong in the
   plugin, and page content must stay free of <script> for the WAF. */

/* Honeypot must be unreachable for people but not display:none — some bots skip those. */
.uwct-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.uwct-err{color:#B33D22;font-size:12.5px;margin:5px 0 0;line-height:1.5}
.uwct-status{margin:14px 0 0;font-size:13.5px;padding:11px 14px;border-radius:8px;line-height:1.6}
.uwct-status.is-error{background:#FAE6E0;color:#8F2F19;border:1px solid #E8BCB0}
.uwct-consent label{display:flex;gap:9px;align-items:flex-start;font-weight:400;font-size:13px;color:#475569;line-height:1.6;cursor:pointer}
.uwct-consent input{width:auto!important;margin-top:3px;flex:none}
.uwct-field input[aria-invalid="true"],.uwct-field select[aria-invalid="true"],.uwct-field textarea[aria-invalid="true"]{border-color:#B33D22!important}
.uwct-success{background:#E0EFE7;border:2px solid #2F6E52;border-radius:14px;padding:34px;margin:40px auto;max-width:700px;text-align:center}
.uwct-success h3{font-size:19px;font-weight:800;margin:0 0 8px;color:#1F5039}
.uwct-success p{color:#2F6E52;font-size:14px;margin:0}
.uwct-submit[disabled]{opacity:.6;cursor:not-allowed}

/* Language, applied before the toggle script exists.
 *
 * inc/language-preference.php resolves the language in <head> and writes it to
 * the document element. Until the footer script runs and sets the real
 * container state, these rules are what stop a Japanese reader seeing the page
 * in English first.
 *
 * Every container carries the language either in a class ("uw lang-en") or, on
 * /about/, in data-lang. Both shapes are matched. `[class*="lang-en"]` cannot
 * catch the toggle's own wrapper, which is `uw-lang-t` — no "lang-en" in it.
 *
 * Specificity is the whole mechanism: `.uw.lang-en .jp{display:none!important}`
 * scores (0,3,0) and these score (0,3,1), so they win without needing a louder
 * !important war. Every .en and .jp on this site is a span — all 1008 of them —
 * so `inline` is the correct restored value rather than a guess.
 */
html[data-uw-lang="jp"] [class*="lang-en"] .en,
html[data-uw-lang="jp"] [data-lang="en"] .en{display:none!important}
html[data-uw-lang="jp"] [class*="lang-en"] .jp,
html[data-uw-lang="jp"] [data-lang="en"] .jp{display:inline!important}

/* ---------------------------------------------------------------------------
 * The byline on a post reads "Written by  in".
 *
 * Someone added this to the site's own CSS, deliberately:
 *
 *   .wp-site-blocks > main .wp-block-post-author-name{display:none!important}
 *   p:has(.wp-block-post-author-name){display:none!important}
 *
 * The first rule works. The second was meant to take the words around the name
 * with it, and matches nothing: in this theme "Written by" and "in" are
 * *siblings* of the author block, not its parents. So the name disappears and
 * its connective tissue stays, and every article carries a line that reads
 * "Written by  in" with a hole where the author should be.
 *
 * Finish the intent rather than argue with it. The two connecting words go; the
 * category stays, because "Career Guide" tells a reader whether the article is
 * addressed to them and is the one part of that row worth showing.
 *
 * `:has(> …)` rather than a class, because the byline group's classes are
 * generated by the theme and would change under us.
 * ------------------------------------------------------------------------- */
.wp-site-blocks > main .wp-block-group:has(> .wp-block-post-author-name)
  > p.wp-block-paragraph { display: none !important; }

/* ---------------------------------------------------------------------------
 * The container's own state, shared.
 *
 * The rules above are the head-time stand-in: they read the language off the
 * document element and only match a container still in its served state
 * ("lang-en"). The moment the toggle runs it rewrites that class to "lang-jp",
 * and from then on these are the rules doing the work.
 *
 * They existed only in the per-page stylesheets, which are loaded by post ID
 * for a fixed list of pages. That was invisible while blog posts had no toggle
 * — the container never left "lang-en", so the head-time rules covered it. Add
 * a toggle to a post and the class changes to something nothing on the page
 * has a rule for, and **both languages render at once.** That is what happened
 * on 2026-09-05, live, for the few minutes between the two deploys.
 * ------------------------------------------------------------------------- */
.uw-pg.lang-en .jp,
[class*="lang-en"] .jp{display:none}
.uw-pg.lang-jp .en,
[class*="lang-jp"] .en{display:none}

/* ---------------------------------------------------------------------------
 * The language toggle has to stay reachable on a phone.
 *
 * Two separate faults met here. Five pages hid the whole nav row at 768px, and
 * the toggle lives inside that row, so it collapsed to 0x0 along with the
 * links. Un-hiding it is not enough on its own: these pages inherit the theme's
 * alignfull arithmetic, which lays their content out in a 510px box starting at
 * -60px, so a right-aligned control lands at 392-425 in a 390px viewport —
 * rendered, and entirely past the right edge. That is the same overflow
 * recorded as the site-wide mobile overflow in docs/IMPROVEMENT-CANDIDATES.md,
 * which is to stay recorded rather than fixed. (Named, not numbered: that list
 * is ordered by priority and renumbers when something is promoted.)
 *
 * position:fixed resolves against the viewport rather than that broken box, so
 * this sidesteps the overflow instead of depending on it being corrected. It is
 * the one control that has to work regardless of what the layout is doing:
 * the page now picks a language from the browser, and on a Japanese-locale
 * phone an English reader has no other way back.
 *
 * Home is not here. Its toggle sits inside the burger overlay and already works.
 * ------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------
 * The EN/JP control, shared.
 *
 * These rules lived only in the per-page stylesheets, which are loaded by post
 * ID for a fixed list of pages. A blog post is not on that list and never will
 * be — there is one per article — so the control on a post had the right markup
 * and no appearance at all until this moved here.
 * ------------------------------------------------------------------------- */
.uw-pg-lt {
  display: flex;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  overflow: hidden;
  width: max-content;
}
.uw-pg-lt button {
  padding: 6px 14px;
  border: none;
  background: #fff;
  cursor: pointer;
  color: #64748B;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  min-height: 32px;
}
.uw-pg-lt button.on { background: #0F172A; color: #fff; }

/* On an article the control is its own row above the body, right-aligned so it
   sits where a reader looks for a setting rather than in front of the first
   sentence. */
.uw-post-lt {
  display: flex;
  justify-content: flex-end;
  /* The same measure as the article body it sits above. Left to the theme's
     content width it right-aligns to 1200px while the article is 900px, and
     the control floats off past the edge of the text it belongs to. */
  width: min(900px, 100%);
  margin: 0 auto 20px;
}

@media (max-width: 768px) {
  .uw-pg-lt,
  .pn-lt {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 60;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .18);
  }
  /* 36x26 was a mouse target. */
  .uw-pg-lt button,
  .pn-lt button {
    padding: 7px 13px;
    font-size: 12px;
  }
}

/* --- the candidate branch ----------------------------------------------- */
/*
 * These live here rather than in assets/pages/contact.css because the form is
 * placed by markup, not by slug — uw_page_has_contact_form() looks for id="uwct"
 * in the content — so a form on any other page has to render correctly too. The
 * page stylesheet keeps what is genuinely page-level: the two-column grid, the
 * hero, the cards.
 *
 * Every rule is prefixed with .uwct-form deliberately. Without it, `.uwct-opts
 * label` and the page sheet's `.uwct-field label` score the same specificity,
 * and the page sheet is printed later — so the option rows would silently take
 * the block-label styling and each option would render on its own line in bold
 * 13px.
 *
 * [hidden] needs the !important for the same class of reason: the branch and
 * the identity row are grid containers, and `display:grid` from the page sheet
 * beats the browser's own [hidden] rule. A hidden section that still renders
 * would show a candidate every field on the form at once.
 *
 * The five numbered sections are separated by a rule and a numbered heading
 * rather than by nested boxes. Section 1 is the name / email / phone every
 * inquiry already has, so it cannot sit inside a box the other four are in;
 * a box around 2–5 alone read as a different form.
 */
.uwct-form [hidden]{display:none!important}
.uwct-form .uwct-branch{margin:0}
.uwct-form .uwct-sec{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;color:#0F172A;line-height:1.4;margin:8px 0 14px}
.uwct-form .uwct-sec-n{display:inline-flex;align-items:center;justify-content:center;flex:none;width:26px;height:26px;border-radius:50%;background:#2563EB;color:#fff;font-size:13px;font-weight:700}
.uwct-form .uwct-sec-block{border-top:1px solid #E2E8F0;padding-top:20px;margin-top:8px}
.uwct-form .uwct-note{font-size:13px;color:#334155;line-height:1.6;margin:0 0 16px;padding:10px 12px;background:#F1F5F9;border-radius:8px}
.uwct-form .uwct-hint{font-size:12.5px;color:#475569;line-height:1.5;margin:5px 0 0}
.uwct-form .uwct-choice{border:0;padding:0;margin:0 0 16px;min-width:0}
.uwct-form .uwct-choice legend{display:block;padding:0;font-size:13px;font-weight:600;color:#334155;margin:0 0 6px;line-height:1.5}
.uwct-form .uwct-choice legend small{font-size:12.5px;font-weight:400;color:#475569}
.uwct-form .uwct-opts{display:flex;flex-direction:column;gap:6px}
.uwct-form .uwct-opts-inline{flex-direction:row;flex-wrap:wrap}
.uwct-form .uwct-opts-inline label{flex:1 1 auto}
.uwct-form .uwct-opts-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
/* 44px is the tap target, and the whole row is the target — not the 20px box. */
.uwct-form .uwct-opts label{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 12px;margin:0;font-size:14px;font-weight:400;color:#0F172A;line-height:1.45;background:#fff;border:1px solid #E2E8F0;border-radius:8px;cursor:pointer}
.uwct-form .uwct-opts label:hover{border-color:#2563EB}
.uwct-form .uwct-opts label:has(input:checked){border-color:#2563EB;background:#EFF6FF}
.uwct-form .uwct-opts input[type="radio"],.uwct-form .uwct-opts input[type="checkbox"]{width:20px;height:20px;flex:none;margin:0;padding:0;border:0;background:none;accent-color:#2563EB}
.uwct-form .uwct-follow{margin:10px 0 0}
.uwct-form input[type="file"]{width:100%;font-size:13px;padding:10px;border:1px dashed #94A3B8;border-radius:8px;background:#fff;line-height:1.5}
.uwct-form input[type="file"][aria-invalid="true"]{border-color:#B33D22}
@media (max-width:560px){
  .uwct-form .uwct-opts-grid{grid-template-columns:1fr}
  .uwct-form .uwct-opts-inline{flex-direction:column}
}
