/* ==========================================================================
   Khenpo Choga Rinpoche — static site styles
   Reconstructed from the GoDaddy Website Builder export (original template:
   header + hero, content sections, social links, footer). Breakpoints match
   the original: 768 / 1024 / 1280 / 1536.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts (localized from the export; variable fonts covering the used weights)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/playfair-display-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/open-sans-latin.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Open Sans", arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #5e5e5e;
  background: #fff;
}

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

a {
  color: inherit;
}

ul {
  list-style: none;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}

@media (min-width: 1024px) {
  .container {
    width: 984px;
  }
}

@media (min-width: 1280px) {
  .container {
    width: 1160px;
  }
}

@media (min-width: 1536px) {
  .container {
    width: 1280px;
  }
}

/* --------------------------------------------------------------------------
   Accessibility helpers
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -48px;
  left: 8px;
  z-index: 10010;
  padding: 8px 16px;
  background: #151515;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
}

.skip-link:focus {
  top: 8px;
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* --------------------------------------------------------------------------
   Header — logo row + desktop navigation
   -------------------------------------------------------------------------- */
.site-header {
  background: #fff;
}

.header-nav {
  width: 100%;
  padding: 32px 0;
}

/* Mobile row: hamburger + centered logo + mirrored spacer (hidden on desktop) */
.mobile-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
}

.hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  color: #151515;
  cursor: pointer;
}

.hamburger svg {
  width: 40px;
  height: 40px;
  display: block;
}

.mobile-spacer {
  width: 40px;
  visibility: hidden;
}

/* Desktop row: 30 / 40 / 30 grid with the logo centered */
.desktop-nav-row {
  display: none;
  align-items: center;
  padding-top: 24px;
}

.nav-col-30 {
  flex: 0 0 30%;
}

.nav-col-40 {
  flex: 0 0 40%;
  display: flex;
  justify-content: center;
}

.logo {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.031em;
  color: #151515;
  border: 1px solid #151515;
  padding: 8px 16px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  background: #fff;
}

/* Mobile row: fluid logo box — the original sizes it to 70% of the row
   below 480px (wrapping the text to two lines) and to its fixed
   single-line width (291.4px) above that. max-content is avoided inside
   min() because on a flex item it degrades to auto. */
.mobile-nav-row > a {
  width: min(70%, 292px);
}

/* Desktop navigation (hidden below 1024px; drawer is used instead) */
.desktop-nav {
  display: none;
  justify-content: center;
  padding: 24px 0;
}

.desktop-nav ul {
  display: flex;
  justify-content: center;
}

.desktop-nav li {
  padding-left: 32px;
}

.desktop-nav li:first-child {
  padding-left: 0;
}

.nav-link {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  text-transform: uppercase;
  letter-spacing: 0.214em;
  color: #151515;
  text-decoration: none;
  padding: 6px;
  margin: -6px;
}

.nav-link[aria-current="page"] {
  border-bottom: 1px solid #000;
  padding: 0 0 4px;
  margin: 0 0 -5px;
}

@media (max-width: 1023px) {
  .header-nav {
    padding: 0;
  }
}

@media (min-width: 1024px) {
  .mobile-nav-row {
    display: none;
  }

  .desktop-nav-row {
    display: flex;
  }

  .desktop-nav {
    display: flex;
  }
}

/* --------------------------------------------------------------------------
   Mobile navigation drawer (below 1024px)
   -------------------------------------------------------------------------- */
.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f3f3f3;
  z-index: 10002;
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
  visibility: hidden;
  overflow-y: auto;
}

.mobile-nav.open {
  transform: translateX(0);
  visibility: visible;
}

.drawer-close-wrap {
  display: flex;
  justify-content: flex-end;
  padding: 15px;
}

.drawer-close {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  color: #151515;
  cursor: pointer;
}

.drawer-close svg {
  width: 40px;
  height: 40px;
  display: block;
}

.mobile-nav-inner {
  flex: 1;
  padding: 0 32px;
}

.drawer-list li {
  display: block;
}

.drawer-link {
  display: block;
  font-size: 22px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.136em;
  color: #1b1b1b;
  text-decoration: none;
  padding: 16px 24px;
}

.drawer-link[aria-current="page"] {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Hero (home page)
   -------------------------------------------------------------------------- */
.hero {
  width: 100%;
  margin-bottom: 24px;
}

.hero-row {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
}

.hero-figure {
  flex: 1 1 auto;
}

.hero-image {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1.50556;
  object-fit: cover;
}

.hero-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #f3f3f3;
  padding: 56px 24px;
  text-align: center;
}

.hero-tagline-wrap {
  font-size: 16px;
  line-height: normal;
}

.hero-tagline {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  color: #575757;
  max-width: 750px;
  margin: 0 0 16px;
}

/* Mobile only: pull the welcome section up under the hero tagline
   (the original leaves 128px; this tightens it to ~72px). */
@media (max-width: 767px) {
  .hero {
    margin-bottom: 0;
  }

  .hero-panel {
    padding: 56px 24px 24px;
  }
}

@media (min-width: 768px) {
  .hero {
    margin-bottom: 40px;
  }

  .hero-row {
    flex-direction: row;
    padding: 0;
  }

  .hero-image {
    min-height: 400px;
  }

  .hero-panel {
    flex: 0 0 360px;
    min-width: 360px;
    padding: 40px;
  }
}

@media (min-width: 1024px) {
  .hero-panel {
    flex-basis: 388px;
    min-width: 388px;
  }
}

@media (min-width: 1536px) {
  .hero-tagline {
    font-size: 23px;
  }
}

/* --------------------------------------------------------------------------
   Content sections
   -------------------------------------------------------------------------- */
.section {
  padding: 32px 0;
}

@media (min-width: 768px) {
  .section {
    padding: 40px 0;
  }
}

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 -12px;
}

@media (min-width: 768px) {
  .grid {
    margin: 0 -24px;
  }
}

.grid-cell {
  flex: 1 1 100%;
  max-width: 100%;
  padding: 0 12px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .grid-cell {
    flex: 1 1 66.6667%;
    max-width: 66.6667%;
    padding: 0 24px;
  }
}

.content-text p {
  margin: 0;
}

/* About page: image cell is one third on tablet and up */
.about-grid .grid-cell--image {
  flex-basis: 100%;
  max-width: 100%;
}

@media (min-width: 768px) {
  .about-grid .grid-cell--image {
    flex: 1 1 33.3333%;
    max-width: 33.3333%;
  }
}

.about-image {
  width: 100%;
  height: auto;
}

/* Mobile only: keep the image separated from the text when stacked
   (matches the original's 32px gap). */
@media (max-width: 767px) {
  .about-image {
    margin-bottom: 32px;
  }
}

/* News page */
.featured-heading {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.045em;
  color: #1b1b1b;
  text-align: center;
  margin: 0 0 24px;
}

@media (min-width: 768px) {
  .featured-heading {
    font-size: 30px;
  }
}

@media (min-width: 1280px) {
  .featured-heading {
    font-size: 32px;
  }
}

@media (min-width: 1536px) {
  .featured-heading {
    font-size: 36px;
  }
}

.news-list {
  text-align: left;
  list-style: disc;
  padding-left: 20.8px;
  margin: 0 16px;
}

.news-list a {
  font-size: 16px;
  line-height: 1.5;
  color: #000;
}

/* --------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */
.contact-heading {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.045em;
  color: #1b1b1b;
  text-align: center;
  margin: 0 0 24px;
}

@media (min-width: 768px) {
  .contact-heading {
    text-align: left;
  }
}

.field {
  position: relative;
  margin-bottom: 24px;
}

.form-input,
.form-textarea {
  width: 100%;
  border: 1px solid #e2e2e2;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  color: #5e5e5e;
  border-radius: 0;
}

.form-input {
  height: 54px;
  padding: 23px 8px 8px;
}

.form-textarea {
  min-height: 146px;
  padding: 16px 8px;
  border-radius: 3px;
  resize: vertical;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px currentColor;
}

.form-label {
  position: absolute;
  top: 16.2px;
  left: 8px;
  font-size: 16px;
  color: #5e5e5e;
  pointer-events: none;
}

.form-actions {
  padding: 0 0 24px;
}

.form-submit {
  width: 100%;
  min-height: 56px;
  background: #000;
  color: #c6c6c6;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.214em;
  border: 0;
  border-radius: 0;
  padding: 8px 32px;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}

@media (min-width: 1024px) {
  .form-submit:hover {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  }
}

.form-submit:disabled {
  cursor: default;
}

.form-note {
  padding: 8px 0 16px;
}

.form-note p {
  margin: 0;
  font-size: 12px;
  color: #595959;
  text-align: center;
}

.form-note a {
  color: #000;
  text-decoration: none;
}

.form-status {
  display: none;
  margin-top: 12px;
  padding: 10px;
  border-radius: 6px;
  font-size: 14px;
  text-align: center;
}

.form-status:not([hidden]) {
  display: block;
}

.form-status.success {
  background: rgba(22, 163, 74, 0.15);
  color: #16a34a;
}

.form-status.error {
  background: rgba(220, 38, 38, 0.15);
  color: #dc2626;
}

/* --------------------------------------------------------------------------
   Social links (extracted from the original iframe widget)
   -------------------------------------------------------------------------- */
.social-section .grid-cell {
  flex: 1 1 100%;
  max-width: 100%;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  padding: 40px 20px;
}

.social-btn {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #fff;
  display: grid;
  place-items: center;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.social-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Brand background colors (same values the original widget inlined) */
.social-btn--linkedin { background: #0a66c2; }
.social-btn--facebook { background: #1877f2; }
.social-btn--medium { background: #000; }
.social-btn--x { background: #000; }
.social-btn--youtube { background: #f00; }
.social-btn--linktree { background: #43e660; }
.social-btn--crunchbase { background: #0288d1; }
.social-btn--issuu { background: #f36e21; }
.social-btn--f6s { background: #f16c4f; }

.social-btn svg {
  width: 18px;
  height: 18px;
}

.social-btn::after,
.social-btn::before {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s, transform 0.18s;
}

.social-btn::after {
  content: attr(data-tooltip);
  bottom: 100%;
  margin-bottom: 6px;
  padding: 4px 10px;
  background: #1a1a2e;
  color: #fff;
  font-size: 12.5px;
  white-space: nowrap;
  border-radius: 5px;
  pointer-events: none;
}

.social-btn::before {
  content: "";
  bottom: 100%;
  margin-bottom: 0;
  border: 5px solid transparent;
  border-top-color: #1a1a2e;
}

.social-btn:hover::after,
.social-btn:hover::before {
  opacity: 1;
  visibility: visible;
}

.social-btn:hover::after {
  transform: translateX(-50%) translateY(-4px);
}

.social-btn:hover::before {
  transform: translateX(-50%) translateY(-2px);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding: 32px 0;
}

@media (min-width: 768px) {
  .site-footer {
    padding: 56px 0;
  }
}

.footer-text {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.083em;
  color: #595959;
  text-align: center;
  margin: 0;
}

@media (min-width: 1536px) {
  .footer-text {
    font-size: 14px;
  }
}

/* --------------------------------------------------------------------------
   404 page
   -------------------------------------------------------------------------- */
.not-found {
  text-align: center;
}

.not-found h1 {
  font-size: 40px;
  font-weight: 400;
  color: #1b1b1b;
  margin-bottom: 16px;
}

.not-found p {
  font-size: 16px;
  color: #5e5e5e;
  margin-bottom: 24px;
}

.not-found a {
  color: #000;
}