/*
Theme Name: Teddy & Oak
Theme URI: https://example.com/
Author: Teddy & Oak
Description: Lightweight custom WordPress theme based on the Teddy & Oak Adobe XD 2026 design.
Version: 0.2.2
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: teddy-oak
*/

:root {
  --to-primary: #8E7D64;
  --to-text: #2E2424;
  --to-bg: #FDFDF8;
  --to-sand: #F0EEE7;
  --to-sand-dark: #D3CAB8;
  --to-white: #FDFDF8;
  --to-black: #000000;
  --to-content: 1640px;
  --to-gutter: 40px;
  --to-radius: 0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--to-bg); color: var(--to-text); font-family: "Raleway", Arial, sans-serif; font-size: 18px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
h1,h2,h3,h4 { margin: 0; font-family: "Raleway", Arial, sans-serif; font-weight: 400; line-height: 1.1; }
p { margin: 0 0 1em; }
.to-container { width: min(calc(100% - (var(--to-gutter) * 2)), var(--to-content)); margin-inline: auto; }

/* Header – XD: approx. 180px desktop / 132px mobile */
.site-header { position: relative; z-index: 50; background: var(--to-bg); }
.site-header__inner { min-height: 180px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.site-brand { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.site-brand__logo { width: 245px; height: auto; }
.site-brand .custom-logo-link { display: inline-flex; }
.site-brand .custom-logo { width: 245px; height: auto; }
.primary-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.primary-nav > ul, .primary-nav .menu { display: flex; align-items: center; gap: 34px; list-style: none; margin: 0; padding: 0; }
.primary-nav a { text-decoration: none; font: 400 18px/1.2 "Montserrat", Arial, sans-serif; }
.primary-nav a:hover, .primary-nav .current-menu-item > a { color: var(--to-primary); }
.header-actions { display: flex; gap: 10px; margin-left: 12px; }
.to-header-button { min-width: 195px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 33px; text-decoration: none; font: 400 18px/1 "Montserrat", Arial, sans-serif; }
.to-header-button--outline { color: var(--to-primary); background: var(--to-bg); border: 1px solid var(--to-primary); }
.to-header-button--primary { color: var(--to-bg); background: var(--to-primary); border: 1px solid var(--to-primary); }
.menu-toggle { display: none; border: 0; background: transparent; padding: 8px; color: var(--to-text); }
.menu-toggle svg { width: 30px; height: 30px; }
.mobile-panel { display: none; }

/* Homepage hero */
.to-hero-xd { position: relative; height: 899px; overflow: hidden; background: var(--to-text); }
.to-hero-xd__image { position: absolute; inset: -149px 0 0; }
.to-hero-xd__image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.to-hero-xd__shade { position: absolute; inset: 0; background: rgba(46,36,36,.46); }
.to-hero-xd__panel { position: absolute; left: max(calc((100% - 1640px) / 2 - 40px), 0px); top: 229px; width: min(968px, 50.42vw); height: 700px; padding: 106px 100px 70px; background: var(--to-bg); }
.to-hero-xd__panel h1 { max-width: 780px; font-size: 60px; color: var(--to-text); }
.to-hero-xd__panel p { max-width: 760px; margin-top: 40px; font: 400 18px/1.5 "Montserrat", Arial, sans-serif; color: var(--to-black); }
.to-hero-xd__actions { display: flex; gap: 0; margin-top: 54px; }
.to-xd-button { height: 48px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border-radius: 33px; font: 400 18px/1 "Montserrat", Arial, sans-serif; }
.to-xd-button--primary { width: 229px; background: var(--to-primary); color: var(--to-bg); }
.to-xd-button--sand { width: 167px; margin-left: 0; background: var(--to-sand-dark); color: var(--to-black); }
.to-open-badge { position: absolute; left: calc(50% - 108px); top: 595px; width: 137px; height: 137px; border-radius: 50%; background: var(--to-text); color: var(--to-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: 400 20px/1.1 "Raleway", Arial, sans-serif; text-align: center; }

/* Two large discover cards – XD: 805x441 desktop, 430x788 mobile */
.to-discover-pair { display: grid; grid-template-columns: 805px 805px; gap: 15px; padding-top: 217px; padding-bottom: 120px; }
.to-discover-card { display: grid; grid-template-columns: 466px 339px; width: 805px; height: 441px; overflow: hidden; text-decoration: none; }
.to-discover-card--primary { background: var(--to-primary); }
.to-discover-card--dark { grid-template-columns: 339px 466px; background: var(--to-text); }
.to-discover-card__media { width: 100%; height: 441px; overflow: hidden; }
.to-discover-card__media img { width: 100%; height: 100%; object-fit: cover; }
.to-discover-card__content { position: static; width: 100%; height: 441px; padding: 85px 32px 40px; color: var(--to-bg); }
.to-discover-card--dark .to-discover-card__content { padding-left: 41px; padding-right: 32px; }
.to-discover-card h2 { width: 266px; max-width: 100%; font-size: 40px; font-weight: 400; text-align: left; }
.to-discover-card h2 strong { font-weight: 700; }
.to-discover-card p { width: 248px; max-width: 100%; margin-top: 25px; font: 400 18px/1.45 "Raleway", Arial, sans-serif; }
.to-small-button { display: inline-flex; align-items: center; justify-content: center; width: 164px; min-width: 164px; height: 35px; margin-top: 44px; padding-inline: 22px; border-radius: 33px; background: var(--to-sand-dark); color: var(--to-text); font: 400 18px/1 "Montserrat", Arial, sans-serif; text-decoration: none; }
.to-discover-card--dark .to-small-button { color: var(--to-text); }

/* Welcome */
.to-welcome-xd { min-height: 560px; padding-bottom: 110px; }
.to-welcome-xd__inner { position: relative; min-height: 560px; }
.to-welcome-xd__copy { width: 54%; padding-top: 0; }
.to-welcome-xd__copy h2 { font-size: 50px; }
.to-welcome-xd__copy p { max-width: 640px; margin-top: 48px; font: 400 18px/1.5 "Montserrat", Arial, sans-serif; }
.to-welcome-xd__collage { position: absolute; inset: 0; pointer-events: none; }
.to-welcome-xd__collage img { position: absolute; object-fit: cover; }
.to-collage-a { width: 557px; height: 447px; left: 54%; top: 0; }
.to-collage-b { width: 357px; height: 511px; right: 0; top: 159px; }
.to-collage-c { width: 401px; height: 412px; left: 57.7%; top: 462px; }

/* Feature list */
.to-features-xd { padding: 0 0 100px; }
.to-features-xd h2, .to-go-xd h2 { font-size: 50px; }
.to-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 62px; border-top: 1px solid rgba(46,36,36,.16); border-bottom: 1px solid rgba(46,36,36,.16); }
.to-feature-grid article { min-height: 260px; padding: 42px 32px 38px; border-right: 1px solid rgba(46,36,36,.16); }
.to-feature-grid article:first-child { padding-left: 0; }
.to-feature-grid article:last-child { border-right: 0; }
.to-feature-grid h3 { font-size: 23px; }
.to-feature-grid p { margin-top: 22px; font: 400 18px/1.5 "Montserrat", Arial, sans-serif; }

/* Four destination cards */
.to-go-xd { padding: 30px 0 105px; }
.to-go-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 62px; }
.to-go-card { display: block; overflow: hidden; background: var(--to-bg); text-decoration: none; }
.to-go-card > img { width: 100%; height: 337px; object-fit: cover; }
.to-go-card__body { min-height: 242px; padding: 34px 23px 30px; }
.to-go-card__body h3 { font-size: 40px; }
.to-go-card__body p { margin-top: 18px; min-height: 52px; font: 400 18px/1.45 "Raleway", Arial, sans-serif; }
.to-go-card__body span { display: inline-flex; min-width: 164px; height: 35px; align-items: center; justify-content: center; margin-top: 18px; background: var(--to-primary); color: var(--to-bg); font: 400 18px/1 "Montserrat", Arial, sans-serif; }

/* CTA: exact XD split 960/960 and 664px tall */
.to-cta-xd { min-height: 664px; display: grid; grid-template-columns: 1fr 1fr; background: var(--to-primary); }
.to-cta-xd__copy { padding: 156px max(40px, calc((100vw - 1640px) / 2 + 87px)) 80px; color: var(--to-bg); }
.to-cta-xd__copy h2 { max-width: 650px; font-size: 50px; }
.to-cta-xd__copy p { max-width: 650px; margin-top: 45px; color: var(--to-sand); font: 400 18px/1.5 "Raleway", Arial, sans-serif; }
.to-small-button--light { color: var(--to-text); margin-top: 10px; }
.to-cta-xd__image { min-height: 664px; }
.to-cta-xd__image img { width: 100%; height: 100%; object-fit: cover; }

/* Footer – XD uses sand background + primary bottom strip */
.site-footer { background: var(--to-sand); color: var(--to-text); }
.footer-main { min-height: 693px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 70px; padding-top: 147px; }
.site-footer h3 { margin-bottom: 28px; font-size: 24px; }
.site-footer p, .site-footer li, .site-footer a { color: var(--to-text); font: 400 18px/1.5 "Raleway", Arial, sans-serif; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--to-primary); }
.footer-nav ul, .footer-hours { list-style: none; margin: 0; padding: 0; }
.footer-nav li + li { margin-top: 7px; }
.footer-hours li { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 8px; }
.footer-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: -120px; padding-bottom: 77px; }
.to-footer-button { width: 195px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 33px; text-decoration: none; font: 400 18px/1 "Montserrat", Arial, sans-serif; }
.to-footer-button--outline { color: var(--to-primary); background: var(--to-bg); border: 1px solid var(--to-primary); }
.to-footer-button--primary { color: var(--to-bg); background: var(--to-primary); }
.footer-bottom { height: 43px; background: var(--to-primary); }

/* WP helpers */
.alignwide { max-width: var(--to-content); margin-inline: auto; }
.alignfull { width: 100%; max-width: none; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 1300px) {
  :root { --to-gutter: 32px; }
  .site-header__inner { min-height: 150px; }
  .site-brand__logo, .site-brand .custom-logo { width: 210px; }
  .primary-nav > ul, .primary-nav .menu { gap: 20px; }
  .primary-nav a { font-size: 15px; }
  .to-header-button { min-width: 145px; }
  .to-hero-xd__panel { left: 0; width: 55%; padding-left: 70px; padding-right: 60px; }
  .to-feature-grid article { padding-inline: 22px; }
  .to-go-card__body h3 { font-size: 31px; }
}

@media (max-width: 900px) {
  .primary-nav { display: none; }
  .menu-toggle { display: block; }
  .mobile-panel { position: absolute; inset: 100% 0 auto; display: none; background: var(--to-bg); border-top: 1px solid rgba(46,36,36,.12); box-shadow: 0 20px 40px rgba(46,36,36,.08); }
  .mobile-panel.is-open { display: block; }
  .mobile-panel__inner { padding-block: 24px 30px; }
  .mobile-panel ul { list-style: none; padding: 0; margin: 0; }
  .mobile-panel li + li { border-top: 1px solid rgba(46,36,36,.12); }
  .mobile-panel a { display: block; padding: 14px 0; text-decoration: none; font: 400 17px/1.2 "Montserrat", Arial, sans-serif; }
  .mobile-panel__actions { display: grid; gap: 10px; margin-top: 18px; }
  .mobile-panel__actions .to-header-button { width: 100%; }
  .to-hero-xd { height: 723px; }
  .to-hero-xd__image { inset: 0 0 auto; height: 723px; }
  .to-hero-xd__shade { background: transparent; }
  .to-hero-xd__panel { left: 0; top: 196px; width: 100%; height: 527px; padding: 94px 40px 30px; }
  .to-hero-xd__panel h1 { font-size: 40px; }
  .to-hero-xd__panel p { margin-top: 30px; font-size: 18px; }
  .to-hero-xd__actions { display: grid; gap: 10px; margin-top: 26px; }
  .to-xd-button--primary, .to-xd-button--sand { width: 229px; }
  .to-open-badge { top: 168px; left: 157px; width: 116px; height: 116px; font-size: 20px; }
  .to-discover-pair { grid-template-columns: 1fr; gap: 23px; padding-top: 287px; padding-bottom: 92px; }
  .to-discover-card, .to-discover-card--dark { display: flex; flex-direction: column; width: 100%; height: 788px; }
  .to-discover-card--dark .to-discover-card__content { order: 2; }
  .to-discover-card__media { width: 100%; height: 347px; flex: 0 0 347px; }
  .to-discover-card__content, .to-discover-card--dark .to-discover-card__content { width: 100%; height: 441px; flex: 0 0 441px; padding: 85px 40px 40px; text-align: left; }
  .to-discover-card h2 { width: 266px; margin-inline: auto; font-size: 40px; }
  .to-discover-card p { width: 248px; max-width: 248px; margin: 25px auto 0; }
  .to-discover-card .to-small-button { display: flex; margin: 44px auto 0; }
  .to-welcome-xd { padding-bottom: 80px; }
  .to-welcome-xd__inner { min-height: 850px; }
  .to-welcome-xd__copy { width: 100%; padding-top: 580px; }
  .to-welcome-xd__copy h2 { font-size: 40px; }
  .to-welcome-xd__copy p { margin-top: 40px; font-family: "Montserrat", Arial, sans-serif; }
  .to-welcome-xd__collage { height: 520px; }
  .to-collage-a { width: 314px; height: 252px; left: -5px; top: 0; }
  .to-collage-b { width: 201px; height: 288px; right: -2px; top: 89px; }
  .to-collage-c { width: 226px; height: 232px; left: 1px; top: 260px; }
  .to-features-xd { padding-bottom: 82px; }
  .to-features-xd h2, .to-go-xd h2 { font-size: 40px; }
  .to-feature-grid { grid-template-columns: 1fr; margin-top: 40px; }
  .to-feature-grid article, .to-feature-grid article:first-child { min-height: 0; padding: 30px 0; border-right: 0; border-bottom: 1px solid rgba(46,36,36,.16); }
  .to-feature-grid article:last-child { border-bottom: 0; }
  .to-go-xd { padding: 0 0 80px; }
  .to-go-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
  .to-go-card > img { height: 302px; }
  .to-go-card__body { min-height: 217px; padding: 32px 21px 26px; }
  .to-go-card__body h3 { font-size: 40px; }
  .to-cta-xd { grid-template-columns: 1fr; min-height: 0; }
  .to-cta-xd__copy { padding: 156px 38px 75px; }
  .to-cta-xd__copy h2 { font-size: 40px; }
  .to-cta-xd__image { min-height: 323px; }
  .footer-main { min-height: auto; grid-template-columns: 1fr; gap: 45px; padding-top: 72px; padding-bottom: 90px; }
  .footer-actions { margin-top: 0; justify-content: flex-start; flex-wrap: wrap; padding-bottom: 60px; }
}

@media (max-width: 480px) {
  :root { --to-gutter: 40px; }
  body { font-size: 17px; }
  .site-header__inner { min-height: 132px; }
  .site-brand__logo, .site-brand .custom-logo { width: 180px; }
  .to-container { width: min(calc(100% - 80px), var(--to-content)); }
  .to-hero-xd__panel { top: 196px; padding: 94px 40px 24px; }
  .to-hero-xd__panel h1 { font-size: 40px; }
  .to-hero-xd__panel p { line-height: 1.5; }
  .to-hero-xd__actions { margin-top: 25px; }
  .to-xd-button--primary, .to-xd-button--sand { width: 229px; }
  .to-discover-pair { width: 100%; padding-top: 287px; }
  .to-discover-card, .to-discover-card--dark { height: 788px; }
  .to-discover-card__content, .to-discover-card--dark .to-discover-card__content { padding: 85px 40px 40px; }
  .to-discover-card p { width: 248px; max-width: 248px; }
  .to-welcome-xd__inner { width: calc(100% - 80px); }
  .to-welcome-xd__copy { padding-top: 580px; }
  .to-go-card > img { height: 302px; }
  .to-cta-xd__copy { padding: 156px 38px 75px; }
  .to-cta-xd__image { min-height: 323px; }
  .footer-main { padding-top: 72px; }
  .footer-actions { padding-inline: 40px; }
  .to-footer-button { width: 195px; }
}


/* v0.2.1 — Header + Hero corrections from XD. Footer intentionally untouched. */
@media (min-width: 901px) {
  .to-hero-xd__panel {
    border-radius: 0 200px 0 0;
  }
  .to-hero-xd__actions {
    margin-left: 2px;
    gap: 30px;
  }
  .to-open-badge {
    width: 248px;
    height: 248px;
    left: 790px;
    top: 463px;
    transform: rotate(-17deg);
    gap: 3px;
    font-size: 40px;
  }
  .to-open-badge span {
    transform: rotate(17deg);
  }
}

@media (max-width: 900px) {
  .to-hero-xd__panel {
    border-radius: 0 200px 0 0;
  }
  .to-open-badge {
    width: 137px;
    height: 137px;
  }
  .to-hero-xd__actions {
    align-items: flex-start;
  }
  .to-xd-button--sand {
    order: 1;
    margin-left: -11px;
  }
  .to-xd-button--primary {
    order: 2;
    margin-left: 0;
  }
}