/* 
Rob Chaney Website - my_styles.css
*/

/* =========================
CSS RESET / BASE
========================= */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html, body {
  margin: 0;           /* Kill any default browser margins */
  padding: 0;
  background-color: #333333;  /* Match your header background so edges blend */
}

html {
font-size: 100%;
scroll-behavior: smooth;
}


body {
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 1rem;
line-height: 1.6;
background-color: #f7f7f7;
color: #333333;
}


main {
width: 90%;
max-width: var(--max-width);
margin: 2rem auto;
}


main section,
main aside {
margin-bottom: 2rem;
}


img {
max-width: 100%;
height: auto;
}


iframe,
video {
max-width: 100%;
width: 100%;
border: none;
border-radius: 0.5rem;
}


/* =========================
BRAND VARIABLES
========================= */
:root {
--primary-color: #008080;
--secondary-color: #24B4FF;
--accent-color: #FF2F92;
--highlight-color: #FFD52A;
--success-color: #30B24A;
--dark-color: #333333;
--light-color: #ffffff;
--soft-bg: #f7f7f7;
--border-color: #d9d9d9;
--max-width: 1100px;
--shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}


/* =========================
TYPOGRAPHY
========================= */
h1, h2, h3, h4, h5, h6 {
font-family: "Playfair Display", Georgia, serif;
line-height: 1.2;
margin-bottom: 0.75rem;
}


h1 {
font-size: 2.5rem;
color: var(--primary-color);
}


h2 {
font-size: 2rem;
margin-top: 1rem;
color: var(--secondary-color);
}


h3 {
font-size: 1.5rem;
color: var(--accent-color);
}


h4, h5, h6 {
font-size: 1.2rem;
color: var(--primary-color);
}


p {
margin-bottom: 1rem;
font-size: 1rem;
}


ul, ol {
margin: 0 0 1rem 1.5rem;
}


li {
margin-bottom: 0.5rem;
font-size: 1rem;
}


li::marker {
color: var(--primary-color);
}


a:link {
color: var(--primary-color);
}


a {
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease, background-color 0.3s ease;
}


a:visited {
color: #6c4bb8;
}


a:hover,
a:focus {
color: var(--accent-color);
text-decoration: underline;
}


a:active {
color: var(--secondary-color);
}


/* =========================
LAYOUT HELPERS
========================= */
.container {
width: 90%;
max-width: var(--max-width);
margin: 0 auto;
}


.section {
background-color: var(--light-color);
margin: 1.5rem auto;
padding: 2rem;
border-radius: 0.5rem;
box-shadow: var(--shadow);
}


.two-column {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
}


.three-column {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}


.split-column {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}


/* =========================
HEADER / NAVIGATION
========================= */
.site-header {
  background-color: var(--dark-color);
  color: var(--light-color);
  padding: 1rem 0;
  border-bottom: 4px solid var(--highlight-color);
  margin-bottom: 0;     
}

.header-inner {
width: 90%;
max-width: var(--max-width);
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.5rem;
flex-wrap: nowrap;
}

.branding {
display: flex;
align-items: center;
gap: 0.85rem;
min-height: 64px;
}

.logo-link {
display: flex;
align-items: center;
justify-content: center;
}

.site-logo {
width: 54px;
height: 54px;
object-fit: contain;
display: block;
}

.site-title-wrap {
display: flex;
align-items: center;
min-height: 54px;
}

.site-title {
display: flex;
align-items: center;
font-family: "Playfair Display", Georgia, serif;
/* Increased from 1.75rem to 2.8rem - applied across all screen sizes */
font-size: 2.8rem;
font-weight: 700;
color: var(--light-color);
text-decoration: none;
line-height: 1.1;
margin: 0;
}

.site-title:hover,
.site-title:focus {
color: var(--highlight-color);
text-decoration: none;
}

.site-nav ul {
list-style: none;
display: flex;
gap: 0.75rem;
margin: 0;
padding: 0;
flex-wrap: nowrap; /* keep items on one row on desktop */
align-items: center;
}

.site-nav a {
display: inline-block;
padding: 0.65rem 1rem;
background-color: transparent;
color: var(--light-color);
border: 2px solid var(--light-color);
border-radius: 0.35rem;
text-decoration: none;
font-size: 1rem;
}

.site-nav a:hover,
.site-nav a:focus {
background-color: var(--highlight-color);
color: var(--dark-color);
border-color: var(--highlight-color);
text-decoration: none;
}

.site-nav a.active {
background-color: var(--primary-color);
border-color: var(--primary-color);
color: var(--light-color);
}

/* Mobile hamburger menu */
.menu-toggle {
  display: none; /* Hidden on desktop & tablets */
  flex-direction: column;
  width: 36px;
  height: 28px;
  background: none;           /* Make sure no teal/pink background */
  border: none;               /* No border outline */
  padding: 0;                 /* Remove default button padding */
  margin: 0;                  /* No extra space */
  cursor: pointer;
  gap: 4px;
  z-index: 1000;
}

.menu-toggle span {
height: 3px;
width: 100%;
background-color: var(--light-color);
border-radius: 2px;
transition: all 0.3s ease;
transform-origin: center;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}

#primary-menu {
list-style: none;
display: flex;
gap: 0.75rem;
margin: 0;
padding: 0;
flex-wrap: wrap;
align-items: center;
}

/* Mobile sticky header + dropdown nav */
@media (max-width: 600px) {
.site-header {
position: sticky;
top: 0;
z-index: 1001;
}

/* NOTE: header-inner flex-direction is set to row here but gets overridden by the
   900px block which comes later in this file. The actual mobile header fix is in
   the second max-width: 600px block in the responsive section below. */
.header-inner {
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 0.75rem 0;
}

.branding,
.site-title-wrap {
min-height: auto;
}

/* Larger than the 992px reduction - mobile is primary branding moment */
.site-title {
/* Maintain 2.8rem base size - consistent across all breakpoints */
font-size: 2.8rem;
}

/* Slightly larger logo on mobile to match the increased title size */
.site-logo {
width: 58px;
height: 58px;
}

.menu-toggle {
display: flex; /* Only visible on phones */
}

.site-nav ul {
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 100%;
max-height: 60vh;
background-color: var(--dark-color);
flex-direction: column;
gap: 0;
justify-content: flex-start;
align-items: stretch;
padding: 1.5rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
transform: translateY(-20px);
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
overflow-y: auto;
z-index: 999;
border-top: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 0 0 0.5rem 0.5rem;
}

.site-nav ul[aria-expanded="true"] {
transform: translateY(0);
opacity: 1;
visibility: visible;
}

.site-nav a {
display: block;
width: 100%;
padding: 0.65rem 1rem;  /* same as desktop */
margin: 0;
border: none;
border-radius: 0.4rem;
text-align: left;
font-size: 1.0rem;
transition: background-color 0.25s ease, padding-left 0.25s ease;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-nav a:hover,
.site-nav a:focus {
background-color: rgba(255, 213, 42, 0.2);
padding-left: 1rem;
}

.site-nav a.active {
background-color: var(--primary-color);
color: var(--light-color);
}

.site-nav a:last-child {
border-bottom: none;
}

body.menu-open {
overflow: hidden;
}

body.menu-open::before {
content: "";
position: fixed;
top: 70px;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 998;
}
}


/* =========================
HERO / INTRO
========================= */
.hero {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 2rem;
align-items: center;
}


.hero-text p {
max-width: 40rem;
}


.hero-image img {
width: 100%;
border-radius: 0.5rem;
box-shadow: var(--shadow);
}


/* =========================
FEATURE / CARD STYLES
========================= */
.card {
background-color: var(--light-color);
border: 1px solid var(--border-color);
border-top: 5px solid var(--secondary-color);
border-radius: 0.5rem;
padding: 1.5rem;
box-shadow: var(--shadow);
}


.card h3 {
margin-bottom: 0.75rem;
}


.card p:last-child {
margin-bottom: 0;
}


.highlight-card {
border-top-color: var(--accent-color);
}


.success-card {
border-top-color: var(--success-color);
}


/* =========================
BUTTONS / CTA
========================= */
.button,
button,
input[type="submit"] {
display: inline-block;
padding: 0.85rem 1.25rem;
border-radius: 0.5rem;
background-color: var(--primary-color);
color: var(--light-color);
text-decoration: none;
font-weight: 700;
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 1rem;
border: 2px solid var(--primary-color);
cursor: pointer;
text-align: center;
transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}


.button:hover,
.button:focus,
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
background-color: var(--accent-color);
border-color: var(--accent-color);
color: var(--light-color);
text-decoration: none;
transform: translateY(-2px);
}


.button:visited {
color: var(--light-color);
}


.button-secondary {
background-color: var(--secondary-color);
border-color: var(--secondary-color);
}


.button-secondary:hover,
.button-secondary:focus {
background-color: var(--primary-color);
border-color: var(--primary-color);
}


.button-accent {
background-color: var(--accent-color);
border-color: var(--accent-color);
}


.button-accent:hover,
.button-accent:focus {
background-color: var(--dark-color);
border-color: var(--dark-color);
}


.button-row,
.art-category-bar,
.thank-you-category-bar {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}


.button-row {
margin-top: 1rem;
}


.art-category-bar,
.thank-you-category-bar {
margin: 1rem 0 1.5rem;
}


.art-category-bar a,
.thank-you-category-bar a {
display: inline-block;
padding: 0.85rem 1.25rem;
border-radius: 0.5rem;
background-color: var(--primary-color);
color: var(--light-color);
text-decoration: none;
font-weight: 700;
border: 2px solid var(--primary-color);
transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}


.art-category-bar a:hover,
.art-category-bar a:focus,
.thank-you-category-bar a:hover,
.thank-you-category-bar a:focus {
background-color: var(--accent-color);
border-color: var(--accent-color);
color: var(--light-color);
text-decoration: none;
transform: translateY(-2px);
}


.art-category-bar a:visited,
.thank-you-category-bar a:visited {
color: var(--light-color);
}

.button:link,
.button:visited,
.button:hover,
.button:focus,
.button:active,
.site-nav a:link,
.site-nav a:visited,
.site-nav a:hover,
.site-nav a:focus,
.site-nav a:active,
.art-category-bar a:link,
.art-category-bar a:visited,
.art-category-bar a:hover,
.art-category-bar a:focus,
.art-category-bar a:active,
.thank-you-category-bar a:link,
.thank-you-category-bar a:visited,
.thank-you-category-bar a:hover,
.thank-you-category-bar a:focus,
.thank-you-category-bar a:active {
color: var(--light-color);
text-decoration: none;
}


/* =========================
GALLERY / ART
========================= */
.category-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
}


.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}


.gallery-item {
background-color: var(--light-color);
border: 1px solid var(--border-color);
border-radius: 0.5rem;
overflow: hidden;
box-shadow: var(--shadow);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
position: relative;
}


.gallery-item:hover,
.gallery-item:focus-within {
transform: translateY(-6px);
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
border-color: var(--secondary-color);
}


.gallery-item img {
width: 100%;
display: block;
height: auto;
border: 4px solid transparent;
transition: border-color 0.3s ease, transform 0.3s ease, filter 0.3s ease;
}


.gallery-item:hover img,
.gallery-item:focus-within img {
border-color: var(--accent-color);
transform: scale(1.03);
filter: brightness(0.94);
}


.gallery-item .caption,
.gallery-item figcaption {
padding: 1rem;
font-size: 0.95rem;
background: linear-gradient(to bottom, #ffffff, #f8fcfc);
transition: background-color 0.25s ease, color 0.25s ease;
}


.gallery-item:hover figcaption,
.gallery-item:focus-within figcaption,
.gallery-item:hover .caption,
.gallery-item:focus-within .caption {
background: #eefbfb;
color: var(--dark-color);
}


.art-tag {
display: inline-block;
margin-bottom: 0.6rem;
padding: 0.35rem 0.7rem;
background-color: var(--primary-color);
color: var(--light-color);
border-radius: 999px;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
}


.art-intro {
background-color: var(--light-color);
margin: 1.5rem auto;
padding: 2rem;
border-radius: 0.5rem;
box-shadow: var(--shadow);
text-align: center;
}


.story-split {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 1.5rem;
align-items: stretch;
}


.story-split figure,
.story-split .story-copy {
background-color: var(--light-color);
border-radius: 0.5rem;
box-shadow: var(--shadow);
overflow: hidden;
}


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


.story-copy {
padding: 1.5rem;
border-left: 6px solid var(--highlight-color);
}


.art-cta {
background-color: var(--light-color);
margin: 1.5rem auto;
padding: 1.5rem 2rem;
border-radius: 0.5rem;
box-shadow: var(--shadow);
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}


.art-cta p {
margin: 0;
}


.art-page-title,
.art-section-title {
text-align: center;
margin-bottom: 1rem;
}


.art-closing {
text-align: center;
}


.art-closing p {
max-width: 760px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
}


/* =========================
STORY SECTION
========================= */
.story-section {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 1.5rem;
align-items: stretch;
}


.story-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0.5rem;
}


.story-text {
background-color: var(--light-color);
padding: 1.5rem;
border-left: 6px solid var(--highlight-color);
border-radius: 0.5rem;
box-shadow: var(--shadow);
}


/* =========================
PROFESSIONAL PAGE
========================= */
.job-entry {
background-color: var(--light-color);
border-left: 6px solid var(--primary-color);
margin-bottom: 1.5rem;
padding: 1.5rem;
border-radius: 0.5rem;
box-shadow: var(--shadow);
}


.skills-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}


.skills-box {
background-color: var(--light-color);
padding: 1.5rem;
border-radius: 0.5rem;
border: 1px solid var(--border-color);
box-shadow: var(--shadow);
}


.section-center {
text-align: center;
}


.section-center > p {
max-width: 750px;
margin-left: auto;
margin-right: auto;
}


.section-center .skills-grid {
margin-top: 1.5rem;
}


.section-center .skills-box {
text-align: left;
}


.skills-box h4 {
margin-top: -0.25rem;
margin-bottom: 0.85rem;
font-family: "Source Sans Pro", Arial, sans-serif;
font-size: 1.1rem;
font-weight: 700;
color: var(--primary-color);
}


/* =========================
PROFESSIONAL TABLE
========================= */
.table-wrapper {
overflow-x: auto;
margin-top: 1.5rem;
border-radius: 0.5rem;
box-shadow: var(--shadow);
}


.experience-table {
width: 100%;
border-collapse: collapse;
background-color: var(--light-color);
border: 2px solid var(--secondary-color);
}


.experience-table caption {
caption-side: top;
background-color: var(--secondary-color);
color: var(--light-color);
padding: 1rem 1.25rem;
font-family: "Playfair Display", Georgia, serif;
font-size: 1.2rem;
font-weight: 700;
text-align: center;
letter-spacing: 0.02em;
}


.experience-table thead tr {
background-color: var(--highlight-color);
}


.experience-table th,
.experience-table td {
padding: 0.9rem 1rem;
border: 1px solid var(--border-color);
}


.experience-table th {
color: var(--dark-color);
font-family: "Source Sans Pro", Arial, sans-serif;
font-weight: 700;
text-align: center;
vertical-align: middle;
}


.experience-table td {
text-align: left;
vertical-align: middle;
}


.experience-table td.main-focus {
vertical-align: top;
}


.experience-table th.main-focus {
vertical-align: middle;
}


.experience-table tbody tr:nth-child(odd) {
background-color: #ffffff;
}


.experience-table tbody tr:nth-child(even) {
background-color: #EAF2F8;
}


.experience-table tbody tr:hover {
background-color: #dff4ff;
}


.experience-table th.status-col,
.experience-table td.status-col {
text-align: center;
vertical-align: middle;
white-space: nowrap;
font-weight: 700;
}


.experience-table th.main-focus,
.experience-table td.main-focus {
min-width: 240px;
}


.table-divider td {
background-color: var(--secondary-color);
color: var(--light-color);
padding: 1rem 1.25rem;
font-family: "Playfair Display", Georgia, serif;
font-size: 1.2rem;
font-weight: 700;
text-align: center;
letter-spacing: 0.02em;
border: none;
}


/* =========================
CONTACT PAGE
========================= */
.contact-layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
align-items: start;
}


.contact-form,
.contact-info {
background-color: var(--light-color);
padding: 1.5rem;
border-radius: 0.5rem;
box-shadow: var(--shadow);
}


.contact-shell {
display: grid;
grid-template-columns: 0.95fr 1.35fr;
gap: 1.75rem;
align-items: start;
}


.contact-stack {
display: grid;
gap: 1.25rem;
}


.contact-card {
background-color: var(--light-color);
padding: 1.5rem;
border-radius: 0.5rem;
box-shadow: var(--shadow);
border: 1px solid var(--border-color);
}


.contact-card h2,
.contact-card h3,
.contact-form-card h2,
.contact-form-card .form-note {
text-align: center;
}


.contact-card h2,
.contact-card h3 {
margin-top: 0;
margin-bottom: 0.75rem;
}


.contact-card p:last-child,
.contact-card ul:last-child {
margin-bottom: 0;
}


.contact-form-card {
background-color: var(--light-color);
padding: 1.75rem;
border-radius: 0.5rem;
box-shadow: var(--shadow);
border: 1px solid var(--border-color);
}


label {
display: block;
font-weight: 700;
margin-bottom: 0.35rem;
}


input,
textarea,
select {
width: 100%;
padding: 0.75rem;
margin-bottom: 1rem;
border: 1px solid #bbbbbb;
border-radius: 0.35rem;
font-size: 1rem;
font-family: "Source Sans Pro", Arial, sans-serif;
}


input:focus,
textarea:focus,
select:focus {
outline: 3px solid rgba(36, 180, 255, 0.25);
border-color: var(--secondary-color);
}


textarea {
min-height: 140px;
resize: vertical;
}


.checkbox-group {
margin-bottom: 1rem;
border: none;
padding: 0;
}


.checkbox-group legend {
font-weight: 700;
margin-bottom: 0.75rem;
}


.checkbox-group label {
display: inline-block;
font-weight: 700;
margin-left: 0;
}


.contact-photo {
float: none;
width: 160px;
margin: 0 auto 1rem;
text-align: center;
}


.contact-photo img {
width: 100%;
display: block;
border-radius: 0.5rem;
box-shadow: var(--shadow);
}


.contact-photo figcaption {
margin-top: 0.5rem;
font-size: 0.95rem;
color: #555555;
}


.contact-method-link {
display: inline-block;
font-weight: 700;
word-break: break-word;
}


.include-list {
margin: 0 0 0 1.2rem;
padding: 0;
}


.include-list li {
margin-bottom: 0.5rem;
line-height: 1.5;
}


.include-list li:last-child {
margin-bottom: 0;
}


.interest-pills {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin: 1rem 0 1.25rem;
}


.interest-pills input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
width: auto;
margin: 0;
}


.interest-pills label {
display: inline-block;
width: auto;
margin: 0;
padding: 0.6rem 0.95rem;
border: 2px solid var(--primary-color);
border-radius: 999px;
background-color: var(--light-color);
color: var(--primary-color);
font-weight: 700;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}


.interest-pills label:hover,
.interest-pills label:focus {
background-color: #eefbfb;
border-color: var(--secondary-color);
color: var(--secondary-color);
transform: translateY(-2px);
text-decoration: none;
}


.interest-pills input[type="checkbox"]:checked + label {
background-color: var(--primary-color);
border-color: var(--primary-color);
color: var(--light-color);
}


.interest-pills input[type="checkbox"]:focus + label {
outline: 3px solid rgba(36, 180, 255, 0.25);
outline-offset: 2px;
}


.form-note {
font-size: 0.95rem;
color: #555555;
margin-top: -0.25rem;
}


/* =========================
HOME PAGE
========================= */
.home-intro-title {
text-align: center;
margin-bottom: 1.5rem;
}


.home-intro-split {
display: grid;
/* About Me is first in HTML (left column) and gets the larger share.
   Photo is second (right column) and stays intentionally smaller.
   Proportions flipped from original 1fr 1.5fr after HTML element reorder. */
grid-template-columns: 1.5fr 1fr;
gap: 1.5rem;
align-items: stretch;
}


.home-photo,
.home-intro-split .about-me {
background-color: var(--light-color);
border-radius: 0.75rem;
box-shadow: var(--shadow);
}

/* home-photo keeps overflow:hidden to clip the rounded corners on the image.
   about-me does NOT get overflow:hidden - it was clipping the Quick Facts box
   when the list grew taller than the text column. */
.home-photo {
overflow: hidden;
}


.home-photo {
padding: 1rem;
text-align: center;
/* Vertically center the photo and caption within the column */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}


/* Updated from basic border-radius: 0.5rem to rounded portrait style with
   teal brand border and colored shadow for visual polish on home page photo */
.home-photo img {
width: 100%;
max-width: 320px;
margin: 0 auto 1rem;
border-radius: 1.5rem;
border: 4px solid var(--primary-color);
box-shadow: 0 8px 24px rgba(0, 128, 128, 0.22);
display: block;
}


.home-photo figcaption {
font-size: 0.95rem;
color: #555555;
}


.about-me {
padding: 2rem;
margin: 0;
border: 3px dashed var(--primary-color);
background-color: #f0fbfb;
box-shadow: var(--shadow);
border-radius: 0.75rem;
display: flex;
flex-direction: column;
justify-content: center;
}

/* Center the section title now that About Me is the left/wider column */
.about-me h2 {
text-align: center;
}


.about-me p {
color: #1f4f4f;
font-size: 1.05rem;
line-height: 1.8;
}


/* about-me-content places paragraphs and Quick Facts side by side within the About Me section.
   Text takes the wider left column, Quick Facts sits in a fixed-width right column.
   Column widened from 220px to 260px after more items were added to the Quick Facts list. */
.about-me-content {
display: grid;
grid-template-columns: 1fr 260px;
gap: 1.25rem;
align-items: start;
margin-top: 0.75rem;
}

.about-me-text {
/* No additional styling needed - inherits from .about-me p */
}

/* Float is ignored inside a flex container so this box stacks naturally.
   Now positioned as a grid column inside .about-me-content rather than floated.
   Left-aligned to match its defined column space. */
.about-float-box {
width: 100%;
margin: 0;
padding: 1rem 1rem 0.9rem;
background-color: #f4fbfb;
border-left: 4px solid var(--primary-color);
border-radius: 0.5rem;
box-shadow: var(--shadow);
text-align: left;
/* Vertically center the box within its grid column */
align-self: center;
}


.about-float-box h3 {
font-size: 1.1rem;
margin-top: 0;
margin-bottom: 0.65rem;
color: var(--primary-color);
}


.quick-facts-list {
margin: 0 0 0 1.1rem;
padding: 0;
}


.quick-facts-list li {
margin-bottom: 0.45rem;
line-height: 1.45;
}


.quick-facts-list li:last-child {
margin-bottom: 0;
}


.home-intro-split::after,
.about-me::after {
content: "";
display: table;
clear: both;
}


.home-page-title {
text-align: center;
}


.home-page-section {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}


.home-feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin: 1.5rem 0;
}


.home-feature-grid .section {
margin: 0;
height: 100%;
}


.home-feature-grid img {
width: 100%;
display: block;
border-radius: 0.5rem;
margin-bottom: 1rem;
}


.home-feature-grid p:last-child {
margin-bottom: 0;
}


/* =========================
FOOTER
========================= */
.site-footer {
background-color: var(--dark-color);
color: var(--light-color);
margin-top: 2.5rem;
padding: 1.5rem 0;
border-top: 4px solid var(--primary-color);
}


.site-footer .container {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}


.footer-text {
margin: 0;
color: var(--light-color);
text-align: center;
white-space: nowrap;
font-size: 1rem;
}


.site-footer a {
color: var(--highlight-color);
text-decoration: none;
}


.site-footer a:hover,
.site-footer a:focus {
color: var(--light-color);
text-decoration: underline;
}


.footer-text strong a {
color: var(--light-color);
font-weight: 700;
}


.footer-text strong a:hover,
.footer-text strong a:focus {
color: var(--highlight-color);
}


/* =========================
RESPONSIVE DESIGN
========================= */

/* Responsive breakpoint guide:
   1400px = large desktop refinement
   1200px = desktop / laptop adjustment
   992px = tablet landscape and small laptop
   900px = stack major layouts for tablets
   768px = tablet portrait refinement
   700px = narrow tablet text/table adjustment
   600px = large mobile adjustments
   480px = small mobile refinement
*/

@media (min-width: 1400px) {
:root {
--max-width: 1240px;
}

body {
font-size: 1.05rem;
}

.home-feature-grid,
.gallery-grid {
gap: 1.75rem;
}
}

@media (max-width: 1200px) {
.header-inner,
.container,
main {
width: 92%;
}
}

@media (max-width: 992px) {
.site-title {
/* Maintain 2.8rem base size at this breakpoint - no reduction needed */
font-size: 2.8rem;
}

.site-nav a {
padding: 0.6rem 0.9rem;
}

.home-feature-grid {
grid-template-columns: repeat(2, 1fr);
}

.gallery-grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 900px) {
.header-inner {
flex-direction: column;
align-items: center;
}

.home-intro-split {
grid-template-columns: 1fr;
}

.branding {
justify-content: center;
}

.site-nav ul {
justify-content: center;
}

.hero,
.two-column,
.split-column,
.story-section,
.story-split,
.contact-layout,
.contact-shell,
.skills-grid,
.gallery-grid,
.three-column,
.art-cta,
.home-intro-split,
.home-feature-grid {
grid-template-columns: 1fr;
}

.art-cta {
flex-direction: column;
align-items: stretch;
}

.contact-form-card,
.contact-card {
padding: 1.5rem;
}

.main-focus,
.experience-table th.main-focus,
.experience-table td.main-focus {
min-width: 200px;
}
}

@media (max-width: 768px) {
main {
margin: 1.5rem auto;
}

.section,
.art-intro,
.art-cta,
.story-copy,
.story-text,
.skills-box,
.contact-form,
.contact-info,
.contact-form-card,
.contact-card {
padding: 1.5rem;
}

h1 {
font-size: 2.2rem;
}

h2 {
font-size: 1.75rem;
}

/* Professional tables become stacked single-line tiles on tablet/mobile */
.table-wrapper {
overflow: visible;
box-shadow: none;
background: transparent;
}

.experience-table,
.experience-table caption,
.experience-table thead,
.experience-table tbody,
.experience-table tr,
.experience-table th,
.experience-table td {
display: block;
width: 100%;
}

.experience-table {
border: none;
background: transparent;
}

.experience-table caption {
border-radius: 0.5rem;
margin-bottom: 1rem;
box-shadow: var(--shadow);
}

.experience-table thead {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

.experience-table tbody {
display: grid;
gap: 1rem;
}

.experience-table tbody tr {
display: block;
background-color: var(--light-color);
border: 1px solid var(--border-color);
border-left: 5px solid var(--secondary-color);
border-radius: 0.5rem;
box-shadow: var(--shadow);
padding: 0.5rem 0;
overflow: hidden;
}

.experience-table tbody tr:nth-child(odd),
.experience-table tbody tr:nth-child(even),
.experience-table tbody tr:hover {
background-color: var(--light-color);
}

.experience-table td {
display: block;
border: none;
border-bottom: 1px solid #eeeeee;
padding: 0.85rem 1rem;
text-align: left;
white-space: normal;
word-break: break-word;
}

.experience-table td:last-child {
border-bottom: none;
}

.experience-table td::before {
content: attr(data-label);
display: block;
margin-bottom: 0.3rem;
font-size: 0.88rem;
font-weight: 700;
line-height: 1.2;
color: var(--primary-color);
text-transform: uppercase;
letter-spacing: 0.02em;
}

.experience-table td.status-col,
.experience-table td.main-focus,
.experience-table th.main-focus,
.experience-table td.main-focus {
text-align: left;
min-width: 0;
}

.table-divider td {
background-color: var(--secondary-color);
color: var(--light-color);
font-family: "Playfair Display", Georgia, serif;
font-size: 1.05rem;
font-weight: 700;
text-align: center;
padding: 0.9rem 1rem;
border-bottom: none;
}

.table-divider td::before {
content: none;
}
}

@media (max-width: 700px) {
.experience-table caption,
.table-divider td {
font-size: 1rem;
padding: 0.85rem 1rem;
}

.experience-table th,
.experience-table td {
padding: 0.75rem;
font-size: 0.95rem;
}

.multi-column-text {
column-count: 1;
column-rule: none;
}
}

@media (max-width: 600px) {
h1 {
font-size: 2rem;
}

h2 {
font-size: 1.6rem;
}

.section,
.card,
.job-entry,
.skills-box,
.contact-form,
.contact-info,
.contact-form-card,
.contact-card,
.art-intro,
.art-cta,
.story-copy,
.story-text {
padding: 1.25rem;
}

/* The 900px block sets header-inner to flex-direction: column which stacks the
   hamburger below the branding. This overrides it back to row since this block
   comes after the 900px block in the file and wins the cascade on phone screens.
   The earlier 600px block at the top of the file cannot fix this - it comes before
   the 900px block and gets overridden. */
.header-inner {
flex-direction: row;
align-items: center;
justify-content: space-between;
}

/* Larger logo and title on mobile - overrides the reduction applied at 992px */
.site-logo {
width: 58px;
height: 58px;
}

.site-title {
/* Sized to roughly match the 58px icon height on mobile */
font-size: 2.8rem;
}

/* Stack about-me-content to single column on mobile - text first, quick facts below */
.about-me-content {
grid-template-columns: 1fr;
}

.footer-text {
white-space: normal;
line-height: 1.8;
}

.about-float-box {
float: none;
width: 100%;
max-width: 260px;
margin: 0 auto 1rem;
}

.contact-photo {
width: 100%;
max-width: 220px;
margin: 0 auto 1rem;
}

.interest-pills {
gap: 0.6rem;
}

.interest-pills label {
width: 100%;
text-align: center;
}
}

@media (max-width: 480px) {
body {
font-size: 0.97rem;
}

main,
.container,
.header-inner {
width: 94%;
}

.site-logo {
/* Kept intentionally larger than the old 48px - branding should stay prominent on small phones */
width: 52px;
height: 52px;
}

.site-title {
/* Matches the 600px block size - do not reduce here or it overrides the mobile header sizing */
font-size: 2.8rem;
}

.site-nav ul {
gap: 0.5rem;
}

.site-nav a,
.button,
button,
input[type="submit"],
.art-category-bar a,
.thank-you-category-bar a {
width: 100%;
}

.button-row,
.art-category-bar,
.thank-you-category-bar {
gap: 0.75rem;
}

.home-photo img,
.contact-photo,
.about-float-box {
max-width: 100%;
}
}


/* =========================
MULTI-COLUMN TEXT
========================= */
.multi-column-text {
column-count: 2;
column-gap: 2rem;
column-rule: 1px solid var(--border-color);
}


.multi-column-text p {
break-inside: avoid;
}


.multi-column-text h3,
.multi-column-text h4 {
break-after: avoid;
}


/* =========================
THANK YOU PAGE
========================= */
.thank-you-section {
text-align: center;
}


.thank-you-card {
max-width: 900px;
margin: 0 auto;
}


.thank-you-copy,
.thank-you-details,
.thank-you-detail,
.thank-you-detail p,
.thank-you-detail h2 {
text-align: center;
}

/* =========================
BACK TO TOP BUTTON
========================= */
/* Fixed button that appears after scrolling 300px down.
   Positioned bottom-right above the PWA update banner.
   Shown/hidden via JavaScript scroll listener on all pages. */
.back-to-top {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 9000;
width: 48px;
height: 48px;
border-radius: 50%;
background-color: var(--primary-color);
color: var(--light-color);
border: 2px solid var(--primary-color);
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease, border-color 0.2s ease;
transform: translateY(20px);
}

.back-to-top.is-visible {
opacity: 1;
transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus {
background-color: var(--accent-color);
border-color: var(--accent-color);
color: var(--light-color);
transform: translateY(-3px);
}

.back-to-top:focus-visible {
outline: 3px solid rgba(36, 180, 255, 0.4);
outline-offset: 2px;
}

@media (max-width: 600px) {
/* Move up slightly on mobile so it clears the PWA banner if shown */
.back-to-top {
bottom: 1.25rem;
right: 1.25rem;
width: 42px;
height: 42px;
font-size: 1.2rem;
}
}

/* =========================
PWA UPDATE BANNER
========================= */
.pwa-update-banner[hidden] { display: none; }

.pwa-update-banner {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  width: min(420px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: 10px 1fr;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  background-color: var(--light-color);
  box-shadow: var(--shadow);
  color: var(--dark-color);
}

.pwa-update-accent {
  background: linear-gradient(180deg, var(--secondary-color) 0%, var(--primary-color) 45%, var(--accent-color) 100%);
}

.pwa-update-copy,
.pwa-update-actions { grid-column: 2; }

.pwa-update-copy { padding: 1rem 1rem 0.6rem; }

.pwa-update-title {
  margin: 0 0 0.25rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--dark-color);
}

.pwa-update-text {
  margin: 0;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  font-size: 0.98rem;
  line-height: 1.45;
  color: rgba(51, 51, 51, 0.82);
}

.pwa-update-actions {
  display: flex;
  gap: 0.75rem;
  padding: 0 1rem 1rem;
  flex-wrap: wrap;
}

.pwa-update-btn {
  min-height: 44px;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 2px solid transparent;
  font-family: 'Source Sans Pro', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pwa-update-btn:hover,
.pwa-update-btn:focus {
  transform: translateY(-2px);
}

.pwa-update-btn--primary {
  background-color: var(--primary-color);
  color: var(--light-color);
  border-color: var(--primary-color);
}

.pwa-update-btn--primary:hover,
.pwa-update-btn--primary:focus {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

.pwa-update-btn--ghost {
  background-color: var(--light-color);
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.pwa-update-btn--ghost:hover,
.pwa-update-btn--ghost:focus {
  background-color: #eefbfb;
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.pwa-update-btn:focus-visible {
  outline: 3px solid rgba(36, 180, 255, 0.25);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .pwa-update-banner {
    left: 16px;
    right: 16px;
    width: auto;
  }

  .pwa-update-actions {
    flex-direction: column;
  }

  .pwa-update-btn {
    width: 100%;
  }
}