/* =========================
   THAREN CONCEPTS SITE CSS
   Reorganized by purpose:
   1) Design tokens
   2) Reset / base elements
   3) Layout helpers
   4) Shared components
   5) Page-specific sections
   6) Responsive rules
   7) Code not found in uploaded pages
========================= */


/* =========================
   1) ROOT / DESIGN TOKENS
   Site-wide colors, sizing, and reusable values.
   Change these first if you want to alter the overall look.
========================= */
:root {
  /* Main brand colors */
  --accent: #9c7f68;
  --accent-2: #bfae99;
  --accent-soft: rgba(165, 140, 117, 0.18);
  --accent-soft-2: rgba(191, 174, 153, 0.2);

  /* Background colors */
  --bg: #d9d0c7;
  --bg-soft: #e6ded6;
  --header-bg: rgba(217, 208, 199, 0.9);
  --footer-bg: rgba(191, 174, 153, 0.35); /* currently not used in active styles */

  /* Lines, overlays, and panels */
  --grid-line: rgba(64, 53, 44, 0.15);
  --line: rgba(114, 100, 91, 0.22);
  --panel: rgba(217, 208, 199, 0.88);
  --panel-alt: #efe7df;
  --panel-strong: rgba(217, 208, 199, 0.96);

  /* Text */
  --text: #332a23;
  --muted: #73645c;

  /* Sizing */
  --max: 1160px;
  --radius: 10px;

  /* Effects */
  --shadow: 0 18px 45px rgba(64, 53, 44, 0.25);
}


/* =========================
   2) RESET / GLOBAL DEFAULTS
   Basic browser cleanup and global behavior.
========================= */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--text);
  font-family: "Josefin Sans", sans-serif;
  line-height: 1.2;

  /* Soft layered background for the whole site */
  background:
    radial-gradient(circle at top right, var(--accent-soft), transparent 30%),
    radial-gradient(circle at left 20%, var(--accent-soft-2), transparent 24%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
}

/* Subtle fixed grid texture over the page background */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, #0000001f, transparent 85%);
}

a {
  color: var(--accent);
}

a:hover {
  color: var(--text);
}

h1,
h2,
h3 {
  margin-top: 0;
  line-height: 1.08;
}

h1 {
  font-size: clamp(2.7rem, 3vw, 4.7rem);
  margin-bottom: 1rem;
}

h2 {
  font-size: clamp(1.8rem, 2vw, 2.8rem);
  margin-bottom: 10px;
}

h3 {
  font-size: 1.5rem;
  margin-bottom: 0.65rem;
}

p {
  margin: 0 0 1rem;
}

li {
  line-height: 1.25;
}

ul {
  list-style-position: outside;
  margin-left: 1.5em;
  padding-left: 1.25em;
}

img {
  display: block;
  max-width: 100%;
}

/* Brightens images slightly on hover site-wide */
img:hover {
  filter: brightness(1.15);
}


/* =========================
   3) LAYOUT HELPERS
   Structural classes reused across multiple pages.
========================= */

/* Main centered content wrapper */
.container {
  margin-inline: auto;
  width: min(calc(100% - 2rem), var(--max));
}

/* Shared 2-column layout used for hero/about/contact sections */
.contact-box,
.hero-grid,
.two-column {
  display: grid;
  align-items: start;
  gap: 1rem;
  grid-template-columns: 1.2fr 1.1fr;
}

/* Generic section spacing */
.section {
  padding: 4.5rem 0;
}

/* Alternate banded section background */
.section.alt {
  background: linear-gradient(180deg, #c9a9a01a, #c9a9a01a);
  border-block: 1px solid var(--line);
}

/* Shared grid wrappers for cards and projects */
.card-grid,
.project-grid {
  display: grid;
  gap: 1.25rem;
}

/* Three-column cards */
.card-grid.three-up {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Two-column cards/projects */
.card-grid.two-up,
.media-grid,
.project-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Header/footer flex wrappers */
.footer-wrap,
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
}


/* =========================
   4) SHARED COMPONENTS
   Reusable UI pieces: buttons, cards, nav, media, etc.
========================= */

/* ---- Buttons ----
   Shared pill-style button treatment.
*/
.back-to-top,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 999px;
  box-shadow: 4px 8px 12px #aaa;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
}

/* Filled primary call-to-action button */
.button.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
}

.button.primary:hover {
  filter: brightness(1.15);
}

/* Outlined button / back-to-top button */
.back-to-top,
.button.secondary {
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}

.back-to-top:hover,
.button.secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---- Cards / Panels ----
   Shared boxed treatment for panels throughout the site.
*/
.card,
.contact-card,
.hero-panel,
.project-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card,
.contact-card,
.project-card {
  padding: 1.2rem;
  gap: 2rem;
}

/* Featured portfolio card spans full width in 2-column layout */
.project-card.featured {
  grid-column: span 2;
  background: linear-gradient(135deg, var(--accent-soft), #c9a9a01a), var(--panel-strong);
}

/* ---- Brand / Header Navigation ---- */

/* Company name + logo row in top nav */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--text);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
}

/* Small TC logo to the left of the company name */
.brand-logo {
  display: block;
  width: auto;
  height: 28px;
}

/* Sticky translucent site header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
}

/* Main nav link row */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.site-nav a {
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--text);
}

/* ---- Hero / Intro sections ---- */

/* Default hero section spacing */
.hero {
  padding: 5rem 0 3rem;
}

/* Slightly tighter top spacing for interior pages */
.inner-hero {
  padding-top: 4.5rem;
}

/* Utility for lead / intro paragraph text */
.lead {
  color: var(--muted);
  font-size: 1.14rem;
}

/* Shared portrait / image styling */
.profile-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 400px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

/* Shared framed image panel used by the uploaded pages */
.profile-intro {
  place-items: margin-left;
  max-width: 600px;
  filter: drop-shadow(8px 8px 20px #888);
}

.profile-panel1 {
  display: grid;
  max-width: 500px;
  filter: drop-shadow(8px 8px 20px #888);
}

.profile-panel2 {
  display: grid;
  max-width: 400px;
  place-items: center;
  padding: 10px;
  margin-top: 3rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ---- Embedded media ----
   Makes video iframes responsive with 16:9 ratio.
*/
.media-embed {
  position: relative;
  width: 100%;
  margin-top: 20px;
  padding-top: 56.25%;
}

.media-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
}

/* ---- Accessibility ----
   Hidden skip link appears when keyboard-focused.
*/
.skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
}

.skip-link:focus {
  top: 1rem;
  left: 1rem;
  z-index: 1000;
  padding: 0.75rem 1rem;
  background: white;
  color: #111;
  border-radius: 10px;
}


/* =========================
   5) PAGE-SPECIFIC SECTIONS
   Styles tied to particular page layouts.
========================= */

/* ---- Landing page ---- */

/* Card on homepage intro split */
.landing-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 320px;
  margin-top: 1.25rem;
}

/* Push homepage card buttons downward a bit */
.landing-card .hero-actions {
  margin-top: 1.25rem;
}

/* Two-card homepage split beneath intro */
.landing-grid {
  display: grid;
  align-items: stretch;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:5.5rem;
  margin: 0 10px 10px;
}

/* Makes homepage hero tall enough to feel like a landing page */
.landing-hero {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 120px);
}

/* ---- Consulting page slideshow ---- */

/* Outer slideshow box for rotating deployed photos */
.slideshow {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
}

/* Each slide occupies the same space and fades in/out */
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: fadeCycle 18s infinite;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Delay each image so they cycle one after another */
.slide:nth-child(1) {
  animation-delay: 0s;
}

.slide:nth-child(2) {
  animation-delay: 6s;
}

.slide:nth-child(3) {
  animation-delay: 12s;
}

/* Fade timing for slideshow rotation */
@keyframes fadeCycle {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  30%  { opacity: 1; }
  35%  { opacity: 0; }
  100% { opacity: 0; }
}


/* =========================
   6) RESPONSIVE RULES
   Adjusts layout for tablets and phones.
========================= */
@media (max-width: 960px) {
  /* Collapse multi-column grids to single column */
  .card-grid.three-up,
  .card-grid.two-up,
  .contact-box,
  .hero-grid,
  .media-grid,
  .project-grid,
  .two-column {
    grid-template-columns: 1fr;
  }

  .landing-grid {
    grid-template-columns: 1fr;
  }

  .landing-hero {
    min-height: auto;
  }

  .project-card.featured {
    grid-column: auto;
  }
}

@media (max-width: 720px) {
  /* Stack header/footer content vertically on smaller screens */
  .footer-wrap,
  .nav-wrap {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Slightly reduce hero top padding on small screens */
  .hero {
    padding-top: 3.75rem;
  }

  /* Tighter nav spacing on mobile */
  .site-nav {
    gap: 0.75rem 1rem;
  }
}


/* =========================
   7) NOT FOUND IN THE UPLOADED PAGES
   These selectors do not appear in the uploaded
   index, consulting, media, or biography pages.
   They may belong to contact.html or earlier drafts.
   Kept here so they are easy to review or remove later.
========================= */

/* Present in CSS, but not referenced in uploaded HTML */
.hero-panel {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1rem;
}

/* Present in CSS, but not referenced in uploaded HTML */
.landing-note {
  color: var(--muted);
  font-size: 0.95rem;
  margin-top: 0.5rem;
  max-width: 72ch;
}

/* Likely for contact form page not included in upload set */
.contact-form {
  display: grid;
  gap: 1rem;
}

/* Likely for contact page side panels */
.contact-info-panel,
.form-panel {
  height: fit-content;
  margin-top: 12rem;
}

/* Form row wrapper */
.form-row {
  display: grid;
  gap: 0.45rem;
}

.form-row label {
  color: var(--text);
  font-weight: 700;
}

.form-row input,
.form-row textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-alt);
  color: var(--text);
  font: inherit;
}

.form-row input:focus,
.form-row textarea:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
}

.form-row textarea {
  resize: vertical;
  min-height: 10rem;
}

/* LinkedIn icon/text row */
.linkedin-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.linkedin-link {
  text-decoration: none;
  font-weight: 600;
}

/* Explicit textarea size override for contact form */
.contact-form textarea {
  min-height: 160px;
  min-width: 425px;
}