/* utah2uist.com portfolio styles (index.php, archive.php and the course pages) */
:root { --ink:#0f172a; --ink-2:#1e293b; --accent:#14b8a6; --accent-2:#0d9488; --sky:#38bdf8; --sand:#f8fafc; }
html { scroll-behavior:smooth; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color:#1f2937; padding-top:64px; }
section[id], header[id] { scroll-margin-top:72px; }
.bg-ink { background:var(--ink)!important; }
.navbar-brand img { object-fit:contain; }
.brand-arrow { color:var(--accent); font-size:1.1rem; }
.brand-text { font-weight:700; line-height:1.05; font-size:1.05rem; }
.brand-text small { font-weight:400; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:#94a3b8; }
.navbar .nav-link { font-weight:500; }
.navbar .nav-link.active { color:var(--accent)!important; }

.btn-accent { background:var(--accent); border-color:var(--accent); color:#04201d; font-weight:600; }
.btn-accent:hover, .btn-accent:focus { background:var(--accent-2); border-color:var(--accent-2); color:#fff; }

.hero { background: radial-gradient(1200px 500px at 85% -10%, rgba(56,189,248,.25), transparent 60%),
                    radial-gradient(900px 500px at -10% 110%, rgba(20,184,166,.25), transparent 60%), var(--ink);
        color:#e2e8f0; padding:5rem 0 4.5rem; }
.hero h1 { color:#fff; letter-spacing:-.02em; }
.eyebrow { color:var(--accent); font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:.85rem; }
.hero-role { font-size:1.6rem; color:var(--sky); font-weight:600; }
.hero-loc { color:#cbd5e1; }
.hero-photo { width:260px; height:260px; border-radius:50%; object-fit:cover; border:6px solid rgba(255,255,255,.08); box-shadow:0 20px 60px rgba(0,0,0,.45); }
.placeholder-photo { display:flex; flex-direction:column; align-items:center; justify-content:center;
                     background:linear-gradient(135deg, var(--accent), var(--sky)); outline:3px dashed rgba(255,255,255,.55); outline-offset:-18px; }
.placeholder-photo .initials { font-size:5rem; font-weight:800; color:#fff; line-height:1; }
.placeholder-photo .ph-label { margin-top:.5rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:#f0fdfa; }
.hero-logos img { filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.hero-logos i { color:var(--accent); font-size:1.4rem; vertical-align:middle; }

.section { padding:4.5rem 0; }
.section-alt { background:var(--sand); }
.section-dark { background:var(--ink); color:#cbd5e1; }
.narrow { max-width:860px; }
.section-title { font-weight:800; margin-bottom:2rem; position:relative; display:inline-block; }
.section-title::after { content:""; display:block; width:56px; height:4px; border-radius:2px; background:var(--accent); margin-top:.5rem; }
.text-center .section-title::after { margin-left:auto; margin-right:auto; }

.skill { background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:1rem .5rem; text-align:center; height:100%;
         transition:transform .15s ease, box-shadow .15s ease; }
.skill:hover { transform:translateY(-4px); box-shadow:0 10px 24px rgba(15,23,42,.08); }
.skill i { font-size:2.6rem; display:block; margin-bottom:.4rem; }
.skill span { font-size:.85rem; font-weight:600; }

.project { border:1px solid #e5e7eb; border-radius:16px; overflow:hidden; transition:transform .15s ease, box-shadow .15s ease; }
.project:hover { transform:translateY(-4px); box-shadow:0 16px 36px rgba(15,23,42,.10); }
.project-img { height:200px; object-fit:contain; border-bottom:1px solid #e5e7eb; }
.placeholder-shot { display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; gap:.4rem; }
.placeholder-shot i.bi-building { font-size:3.5rem; }
.placeholder-shot span { font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; background:rgba(0,0,0,.25); padding:.2rem .6rem; border-radius:999px; }
.placeholder-shot.hotel { background:linear-gradient(135deg,#7c3aed,#2563eb); }
.placeholder-shot.site { background:linear-gradient(135deg,var(--ink),#334155); flex-direction:row; flex-wrap:wrap; }
.placeholder-shot.site span { flex-basis:100%; text-align:center; max-width:max-content; margin:0 auto; }
.placeholder-shot.site i { font-size:1.6rem; color:var(--accent); }
.tags span { display:inline-block; font-size:.75rem; font-weight:600; background:#ecfeff; color:#0e7490; border-radius:999px; padding:.2rem .6rem; margin:0 .25rem .3rem 0; }
.soon { font-size:.8rem; color:#6b7280; border:1px dashed #cbd5e1; border-radius:8px; padding:.35rem .6rem; }

.timeline { position:relative; margin:0; padding-left:1.75rem; }
.timeline::before { content:""; position:absolute; left:.45rem; top:.3rem; bottom:.3rem; width:3px; background:#cbd5e1; border-radius:2px; }
.tl-item { position:relative; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:.9rem 1.1rem; margin-bottom:1rem; }
.tl-item::before { content:""; position:absolute; left:-1.68rem; top:1.1rem; width:16px; height:16px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 2px #cbd5e1; }
.tl-item.work::before, .dot.work { background:var(--accent); }
.tl-item.edu::before, .dot.edu { background:#6366f1; }
.tl-item.cert::before, .dot.cert { background:#f59e0b; }
.tl-item h3 i { color:#64748b; }
.tl-date { display:inline-block; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#475569; margin-bottom:.25rem; }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:.3rem; }

.cert-card { display:flex; gap:1rem; align-items:center; height:100%; border-radius:16px; padding:1.1rem 1.2rem; color:#fff; box-shadow:0 8px 20px rgba(15,23,42,.10); }
.cert-card i { font-size:2.4rem; flex:0 0 auto; width:3rem; text-align:center; }
.cert-card p { opacity:.85; }
.cert-card.aws { background:linear-gradient(135deg,#232f3e,#3b4a5e); }
.cert-card.aws i { color:#ff9900; }
.cert-card.comptia { background:linear-gradient(135deg,#b91c1c,#ef4444); }
.cert-card.wgu { background:linear-gradient(135deg,#003057,#0b5394); }
.cert-card.cyber { background:linear-gradient(135deg,#065f46,#10b981); }

.contact-tile { display:flex; flex-direction:column; align-items:center; gap:.4rem; padding:1.1rem; border-radius:14px; background:var(--ink-2);
                color:#e2e8f0; text-decoration:none; border:1px solid #334155; height:100%; word-break:break-word; }
.contact-tile i { font-size:1.6rem; color:var(--accent); }
.contact-tile:hover { border-color:var(--accent); color:#fff; }

.footer { background:#020617; color:#94a3b8; }
.footer a { color:#cbd5e1; text-decoration:none; }
.footer a:hover { color:var(--accent); }

/* Archive page */
.archive-card img { height:180px; object-fit:cover; object-position:top; }
.archive-card { border-radius:14px; overflow:hidden; border:1px solid #e5e7eb; }
.page-head { background:var(--ink); color:#e2e8f0; padding:3.5rem 0 3rem; }
.page-head h1 { color:#fff; }

@media (max-width:575.98px) {
  .hero { padding:3rem 0; }
  .hero-photo { width:180px; height:180px; }
  .placeholder-photo .initials { font-size:3.5rem; }
  .hero-role { font-size:1.25rem; }
  .section { padding:3rem 0; }
  .skill i { font-size:2.1rem; }
}

/* ---------- v2 (2026-10-04): Utah <-> Uist travelling arrow ---------- */
/* The span has a fixed width, so the animation never shifts the layout. The arrow
   travels right (Utah -> Uist), turns round, travels back, turns round, repeats. */
.u2u-arrow { display:inline-block; position:relative; flex:0 0 auto; width:34px; height:1.25em; line-height:1; vertical-align:middle;
             color:var(--accent); font-size:1.1rem; --u2u-travel:16px; }
.u2u-arrow i { position:absolute; left:0; top:50%; margin-top:-.5em; line-height:1; display:block;
               transform-origin:50% 50%; animation:u2u-travel 5s ease-in-out infinite; will-change:transform; }
.hero-logos .u2u-arrow { width:56px; font-size:1.4rem; --u2u-travel:34px; }
.hero-logos .u2u-arrow i { font-size:1.4rem; }
@keyframes u2u-travel {
  0%   { transform:translateX(0) scaleX(1); }
  42%  { transform:translateX(var(--u2u-travel)) scaleX(1); }
  50%  { transform:translateX(var(--u2u-travel)) scaleX(-1); }
  92%  { transform:translateX(0) scaleX(-1); }
  100% { transform:translateX(0) scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .u2u-arrow i { animation:none; }
}

/* ---------- v2: navbar dropdown ---------- */
.navbar .dropdown-menu { border:1px solid #334155; background:var(--ink-2); }
.navbar .dropdown-item.active, .navbar .dropdown-item:active { background:var(--accent); color:#04201d; }
.navbar .dropdown-item i { color:var(--accent); }
.navbar .dropdown-item.active i { color:#04201d; }

/* ---------- v2: course pages ---------- */
.text-accent { color:var(--accent); }
.page-lead { max-width:760px; color:#cbd5e1; }
.breadcrumb-dark .breadcrumb-item, .breadcrumb-dark .breadcrumb-item.active { color:#94a3b8; font-size:.85rem; }
.breadcrumb-dark .breadcrumb-item a { color:var(--accent); text-decoration:none; }
.breadcrumb-dark .breadcrumb-item + .breadcrumb-item::before { color:#64748b; }
.course-chip { display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; font-weight:600; color:#e2e8f0;
               background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:.3rem .75rem; }
.course-chip i { color:var(--accent); }
.ex-card { border-radius:14px; overflow:hidden; border:1px solid #e5e7eb; transition:transform .15s ease, box-shadow .15s ease; }
.ex-card:hover { transform:translateY(-4px); box-shadow:0 16px 36px rgba(15,23,42,.10); }
.ex-media { display:block; height:180px; border-bottom:1px solid #e5e7eb; background:#f1f5f9; overflow:hidden; }
.ex-thumb { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.ex-ph { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; color:#fff; text-decoration:none; }
.ex-ph i { font-size:3rem; }
.ex-ph span { font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; background:rgba(0,0,0,.25); padding:.2rem .6rem; border-radius:999px; }
.ex-ph:hover { color:#fff; filter:brightness(1.08); }
.ph-teal { background:linear-gradient(135deg,var(--accent-2),var(--sky)); }
.ph-indigo { background:linear-gradient(135deg,#4f46e5,#7c3aed); }
.ph-sky { background:linear-gradient(135deg,#0369a1,#14b8a6); }
.ph-ink { background:linear-gradient(135deg,var(--ink),#334155); }
.ex-card code { font-size:.8em; color:#0e7490; }

/* Course section cards on the archive page */
.course-card { display:flex; flex-direction:column; height:100%; border-radius:16px; overflow:hidden; border:1px solid #e5e7eb; background:#fff;
               text-decoration:none; color:inherit; transition:transform .15s ease, box-shadow .15s ease; }
.course-card:hover { transform:translateY(-4px); box-shadow:0 16px 36px rgba(15,23,42,.12); color:inherit; }
.course-card .cc-top { padding:1.4rem 1.3rem 1.1rem; color:#fff; display:flex; align-items:center; gap:1rem; }
.course-card .cc-top i { font-size:2.6rem; line-height:1; }
.course-card .cc-code { font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.85; }
.course-card .cc-title { font-size:1.2rem; font-weight:800; line-height:1.15; }
.course-card .cc-body { padding:1.1rem 1.3rem 1.3rem; display:flex; flex-direction:column; flex:1; }
.course-card .cc-go { margin-top:auto; font-weight:600; color:var(--accent-2); }
.cc-1430 .cc-top { background:linear-gradient(135deg,#e34f26,#f59e0b); }
.cc-2440 .cc-top { background:linear-gradient(135deg,#4f46e5,#777bb3); }
.cc-2470 .cc-top { background:linear-gradient(135deg,#0d9488,#38bdf8); }

/* CSIS 1430 home: reflection + quote player */
.reflection { border-left:4px solid var(--accent); background:#fff; border-radius:0 12px 12px 0; padding:1.2rem 1.4rem; box-shadow:0 6px 18px rgba(15,23,42,.06); }
.quote-box { background:var(--ink); color:#e2e8f0; border-radius:16px; padding:1.6rem; }
.quote-box blockquote { font-size:1.2rem; font-style:italic; color:#fff; min-height:3.2em; }
.quote-box .bi-quote { color:var(--accent); font-size:2rem; }
.fav-card img { height:200px; object-fit:cover; object-position:top; }

/* v2: the hero's g-5 gutter was wider than the container padding on phones, causing a sideways scroll */
@media (max-width:575.98px) { .hero .row.g-5 { --bs-gutter-x:1.5rem; } }