/* Main stylesheet*/

/* 
  Copyright © 2025 Paul Motten
  All rights reserved.
  This stylesheet is part of the Paul Motten Integrative Whole Self Care website project.
  Copying or redistribution is permitted provided the original author is credited.
*/

/* Color tokens */
:root{
  /* Social work palette */
  --mist:#E7ECEF; /* bg light */
  --spruce:#4B6B5E; /* blue spruce */
  --mtblue:#557C94; /* mountain blue */
  --deep:#1E3A2F; /* deep forest */
  --green:#008000; /* saturated green */

  /* Yoga palette */
  --linen:#FCF5EF;
  --sun:#FEA735;
  --orange:#f16714;
  --turq:#57becc;
  --azure:#0077FF;

  --container: 1200px;
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";background:var(--mist);color:var(--deep)}
.container{max-width:var(--container);margin-inline:auto;padding-inline:24px}
a{color:inherit;text-decoration:none}
.comment {display: none;}

/* Header */
.site-header{display:flex;align-items:center;justify-content:space-between;padding-block:20px}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:40px;height:40px;border-radius:14px}
  .home-page .brand-mark{background:linear-gradient(135deg,var(--mtblue) 0%,var(--mtblue) 20%,var(--green) 30%,var(--sun) 60%,var(--orange) 90%)}
  .social-page .brand-mark{background:linear-gradient(135deg,var(--mtblue)0%, var(--mtblue)25%,var(--spruce) 45%, var(--spruce) 55%,var(--green) 90%)}
  .yoga-page .brand-mark{background:linear-gradient(135deg,var(--sun),var(--orange),var(--turq),var(--azure))}
.site-header h1{font-size:1.375rem;margin:0;color:var(--deep)}
.top-nav{display:flex;gap:20px}
.top-nav a:first-child{color:var(--deep)}
.top-nav a:last-child{color:var(--azure)}


/* HERO SPLIT */
.hero{display:grid;grid-template-columns:1fr;gap:24px;margin-block:16px 48px}
.hero-left,.hero-right{border-radius:24px;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.08);position:relative}
.hero-left{background:linear-gradient(180deg,var(--mist) 0%, #AFC5D6 40%, var(--spruce) 85%)}
.hero-right{background:linear-gradient(180deg,var(--linen) 0%, var(--sun) 42%, var(--orange) 90%)}
.hero-inner{padding:44px}
.hero-inner h2{margin:0 0 8px 0;font-size:2rem}
.hero-inner p{margin:0 0 18px 0;line-height:1.5}
.hero-left-accent{position:absolute;inset-inline:0;bottom:0;height:8px;background:linear-gradient(90deg,var(--spruce),var(--mtblue),var(--green))}
.hero-right-accent{position:absolute;inset-inline:0;bottom:0;height:8px;background:linear-gradient(90deg,var(--sun),var(--orange),var(--turq),var(--azure))}

/* Buttons */
.btn{display:inline-block;font-weight:700;border-radius:16px;padding:14px 22px}
.btn-social{background:var(--green);color:#F0FFF4;box-shadow:0 8px 18px rgba(0,128,0,.25);border-radius:16px;padding:14px 22px;font-weight:700;transition:all .15s ease}
.btn-social:hover{background:#0a8f0a;box-shadow:0 10px 20px rgba(0,128,0,.32);transform:translateY(-2px)}
.btn-outline-social{border:2px solid var(--mtblue);background:var(--mist);color:var(--deep);border-radius:16px;padding:14px 22px;font-weight:700;transition:all .15s ease}
.btn-outline-social:hover{background:var(--mtblue);color:#F7FAFC;border-color:var(--spruce);box-shadow:0 10px 20px rgba(85,124,148,.28);transform:translateY(-2px)}
.btn-yoga{background:var(--turq);color:#031B2B;box-shadow:0 8px 18px rgba(0,195,255,.25)}
.btn-yoga-warm{background:var(--sun);color:#3A2000;box-shadow:0 8px 18px rgba(254,167,53,.25)}
.btn-outline-social{border:2px solid var(--mtblue);background:var(--mist);color:var(--deep)}
.btn-outline-yoga{border:2px solid var(--turq);background:var(--linen);color:var(--azure)}

/* Sections */
.section-social,.section-yoga{border-radius:24px;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.08);margin-block:8px 56px}
.section-social{background:var(--mist)}
.section-yoga{background:var(--linen)}
.section-accent{height:8px}
.section-accent.social{background:linear-gradient(90deg,var(--spruce),var(--mtblue),var(--green))}
.section-accent.yoga{background:linear-gradient(90deg,var(--sun),var(--orange),var(--turq),var(--azure))}
.section-body{padding:32px 28px 36px}
.section-body header h3{margin:0 0 6px 0;font-size:1.75rem}
.section-body header p{margin:0 0 18px 0}

.cards{display:grid;grid-template-columns:1fr;gap:16px;margin-block:8px 22px}
.card{background:#fff;border-radius:18px;padding:18px;border:1px solid #d6dee4}
.border-blue{border-color:var(--mtblue)}
.border-spruce{border-color:var(--spruce)}
.border-green{border-color:var(--green)}
.card h4{margin:0 0 10px 0}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{background:var(--mist);border:1px solid currentColor;border-color:inherit;color:var(--deep);border-radius:999px;padding:6px 10px;font-weight:600;font-size:.9rem}
.chips li a{color:inherit;text-decoration:none;display:block;padding:6px 10px}
.disclaimer {margin: 0; color: var(--deep); line-height: 1.4; font-weight: 600;}

.focus{background:#fff;border-radius:18px;border:1px solid var(--mtblue);padding:20px}
.focus h4{margin:0 0 10px 0}
.tags{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tags li{background:#AFC5D6;color:var(--deep);padding:8px 10px;border-radius:10px;font-weight:600}
.actions{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px}


/*     **** YOGA PAGE ****     */

/* Yoga page header & background image */
.yoga-page {background: url("/yoga.png") center/cover no-repeat fixed;}
.yoga-page .site-header-yoga, 
.yoga-page .section-yoga,
.yoga-page .card-yoga {background-color: rgba(252, 245, 239, 0.85);backdrop-filter: blur(3px);}



/* Yoga schedule */
.card-yoga{background:#fff;border:1px solid var(--turq);border-radius:18px;padding:18px;margin-bottom:24px}
.schedule-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(0,0,0,0.1);margin-bottom:8px}
.schedule-head h4{margin:0;color:var(--azure)}
.schedule-head .tz{color:var(--azure);font-weight:700}


/* Schedule column formatting */
.schedule-list{list-style:none;margin:0;padding:0}
.schedule-list li{display:grid;grid-template-columns:8em 3.5em minmax(0,1fr);column-gap:1.5em;row-gap:4px;align-items:flex-start;border-bottom:1px solid rgba(0,0,0,0.1);padding-bottom:10px;margin-bottom:12px}
.schedule-list .date{grid-column:1;white-space:nowrap}
.schedule-list .dow{grid-column:2;color:var(--sun);font-weight:700;justify-self:center;white-space:nowrap;margin-left:0.5em}
.schedule-list .time{grid-column:3;justify-self:flex-start;min-width:0;overflow-wrap:anywhere}
.schedule-list .class-meta{grid-column:1/4}
.schedule-list .name{display:block;min-width:0;overflow-wrap:anywhere}
.schedule-list .studio{display:block;margin-top:2px;min-width:0;overflow-wrap:anywhere;color:var(--azure);font-weight:600;text-decoration:none}
.schedule-list li:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0}

/* MEDIUM ≥30em: date|day|time, then name|studio */
@media (min-width:30em){
.schedule-list li{grid-template-columns:8em 3.5em minmax(0,1fr)}
.schedule-list .class-meta{grid-column:1/4;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:1em}
.schedule-list .name{grid-column:1;margin-top:0}
.schedule-list .studio{grid-column:2;margin-top:0;justify-self:start;text-align:left}
}

/* WIDE ≥45em: use table layout so all rows share one column set */
@media (min-width:45em){
.schedule-list{display:table;width:100%;border-collapse:collapse}
.schedule-list li{display:table-row}
.schedule-list .class-meta{display:contents}
.schedule-list .date,.schedule-list .dow,.schedule-list .time,.schedule-list .name,.schedule-list .studio{display:table-cell;padding-right:1.25em;vertical-align:top}
.schedule-list .date{white-space:nowrap;width:8.5em}
.schedule-list .dow{white-space:nowrap;width:3.75em}
.schedule-list .time{width:12em}
.schedule-list .name{min-width:10em}
.schedule-list .studio{width:12em;padding-right:0}
.schedule-list .studio{margin-top:0}
}

/* Cancelled / skipped classes */
.schedule-list li.cancelled{
  color: rgba(0,0,0,0.45);
}

.schedule-list li.cancelled .date,
.schedule-list li.cancelled .dow,
.schedule-list li.cancelled .time,
.schedule-list li.cancelled .name,
.schedule-list li.cancelled .studio{
  text-decoration: line-through;
  color: rgba(0,0,0,0.45);
}

.schedule-list .cancel-reason{
  display:block;
  font-weight:700;
  margin-top:2px;
}

.schedule-list li.past{opacity:.55}
.schedule-list li.past .date,
.schedule-list li.past .time,
.schedule-list li.past .name{text-decoration:line-through}


/* Yoga studios */
.studio-links-card{margin-top:24px}
.studio-links-card h4{margin:0;color:var(--azure);margin-bottom:12px}
.teach-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.teach-list li{display:grid;grid-template-columns:90px 1fr 1fr;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.15)}
.teach-list li:last-child{border-bottom:none}
.teach-list .dow{color:var(--sun);font-weight:700}
.studio-name a{color:var(--azure);font-weight:600;text-decoration:none}
.studio-name a:hover{color:var(--turq)}
@media(max-width:32em){.teach-list li{grid-template-columns:90px 1fr}.prices{grid-column:2;margin-top:2px}}


/* Social Work page background image */
.social-page {
  background: url("/socialwork.png") center/cover no-repeat fixed;
}

/* Optional: soften content boxes */
.social-page .section-social,
.social-page .site-header,
.social-page .card {
  background-color: rgba(231, 236, 239, 0.7); /* mist palette */
  backdrop-filter: blur(3px);
}


/* Footer */
.site-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px;margin-block:8px 40px;background:var(--mist);border:1px solid #AFC5D6;border-radius:18px}
.footer-nav{display:flex;gap:16px}
.footer-nav a:first-child{color:var(--mtblue)}
.footer-nav a:nth-child(2){color:var(--spruce)}
.footer-nav a:last-child{color:var(--azure)}

/* Responsive */
@media (min-width: 768px){
  .hero{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 767px){
  .schedule-list li{grid-template-columns:50px 1fr 1fr;grid-auto-rows:auto}
  .schedule-list .studio{grid-column:2/-1}
}