/* Shared styles for US Address Generator family sub-pages.
   Loaded after /us-address/css/style.min.css. */
.usa-hero { background: linear-gradient(135deg,#1d4ed8 0%,#2563eb 50%,#3b82f6 100%); padding:42px 0 30px; text-align:center; color:#fff; position:relative; overflow:hidden; }
.usa-hero::after { content:''; position:absolute; inset:0; opacity:0.07; pointer-events:none; background-image:repeating-linear-gradient(45deg,#fff 0 12px,transparent 12px 24px); }
.usa-hero h1 { font-size:clamp(1.6rem,3.6vw,2.2rem); font-weight:800; margin:0 0 6px; position:relative; }
.usa-hero p { margin:0 auto; max-width:640px; opacity:0.92; font-size:0.96rem; position:relative; }
.usa-hero .usa-flag { font-size:1.4rem; margin-bottom:4px; display:inline-block; }
.usa-subnav { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:16px auto 0; max-width:1000px; position:relative; }
.usa-subnav a { font-size:0.78rem; padding:5px 11px; border-radius:999px; background:rgba(255,255,255,0.12); color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,0.25); transition:background .15s; }
.usa-subnav a:hover, .usa-subnav a.active { background:#fff; color:#1d4ed8; }

.usa-note { padding:12px 14px; font-size:0.85rem; background:var(--primary-bg); border:1px solid var(--primary); color:var(--primary); border-radius:var(--radius-sm); margin-bottom:16px; }
.usa-actions { display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 18px; }
.usa-actions .btn { flex:1 1 auto; min-width:130px; justify-content:center; }
.usa-actions .btn-secondary { background:var(--primary-bg); color:var(--primary); }
.usa-controls label { display:block; font-weight:600; font-size:0.85rem; margin-bottom:4px; color:var(--text); }
.usa-controls select, .usa-controls input { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:0.92rem; background:var(--bg-card); color:var(--text); font-family:inherit; }
.usa-controls select:focus, .usa-controls input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-bg); }
.usa-grid2 { display:grid; grid-template-columns:1fr; gap:14px; }
@media(min-width:640px){ .usa-grid2{ grid-template-columns:1fr 1fr; } }

.out-box { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:1rem; color:var(--text); word-break:break-all; min-height:48px; position:relative; }
.out-list { display:flex; flex-direction:column; gap:6px; }
.out-list .row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 12px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:0.9rem; }
.out-list .row .cp { font-family:inherit; font-size:0.78rem; padding:3px 8px; cursor:pointer; background:var(--primary); color:#fff; border:none; border-radius:4px; }

.table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-sm); }
table.tpl { width:100%; border-collapse:collapse; font-size:0.86rem; }
table.tpl th, table.tpl td { padding:9px 12px; text-align:left; border-bottom:1px solid var(--border); }
table.tpl th { background:var(--bg); color:var(--text-secondary); font-weight:600; }
table.tpl tr:last-child td { border-bottom:none; }
table.tpl code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:var(--primary-bg); color:var(--primary); padding:1px 5px; border-radius:4px; font-size:0.82rem; }
[data-theme="dark"] table.tpl code { color:#93c5fd; }

.taxfree-card { padding:18px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-card); box-shadow:var(--shadow); }
.taxfree-card h3 { margin:0 0 4px; font-size:1.05rem; }
.taxfree-card .statelist { font-size:0.9rem; color:var(--text-secondary); }

.ad-container { margin:24px 0; }
.family-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }
.family-grid a { display:flex; gap:10px; align-items:center; text-decoration:none; color:var(--text); padding:14px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); transition:all .18s; }
.family-grid a:hover { border-color:var(--primary); transform:translateY(-2px); box-shadow:var(--shadow); }
.family-grid .fi { font-size:1.5rem; }
.family-grid h4 { font-size:0.88rem; margin:0 0 2px; }
.family-grid p { font-size:0.74rem; color:var(--text-secondary); margin:0; }

.api-block { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px; margin:14px 0; }
.api-block h4 { margin:0 0 8px; font-size:0.95rem; }
.api-pre { background:#0f172a; color:#e2e8f0; padding:14px; border-radius:6px; overflow-x:auto; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:0.82rem; line-height:1.5; white-space:pre; }
[data-theme="dark"] .api-pre { background:#000; }