/*
Theme Name: TWYK Classic
Theme URI: https://travel-with-your-kids.com/
Description: The original Travel-With-Your-Kids.com look (Serif WebPlus, 2014) rebuilt as a responsive Kadence child theme. Same header art, colours, banners, splatters and fonts; real HTML headings; one column on phones.
Author: Travel With Your Kids
Template: kadence
Version: 1.0
Text Domain: twyk-classic
*/

*, *::before, *::after { box-sizing: border-box; }

:root {
  --twyk-cream: #feefc8;
  --twyk-ink: #000;
  --twyk-brown: #6b3416;
  --twyk-tan-text: #9e7741;
  --twyk-orange: #ff8000;
  --twyk-rust: #d05b2a;
  --twyk-yellow: #efcb3f;
  --twyk-tan: #edc97f;
  --twyk-olive: #767600;
  --twyk-nav: #333;
  --twyk-body: 15px;
}

/* ---------- page ---------- */
html { background: var(--twyk-cream); }
body.twyk {
  margin: 0;
  color: var(--twyk-ink);
  font: var(--twyk-body)/1.55 Arial, Helvetica, sans-serif;
  background: var(--twyk-cream) url(assets/sky.jpg) repeat-x center top;
}
.twyk a { color: var(--twyk-rust); }
.twyk a:hover, .twyk a:focus { color: var(--twyk-brown); }
.twyk img { max-width: 100%; height: auto; }
.twyk-wrap { position: relative; max-width: 1000px; margin: 0 auto; }
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }

/* ---------- header (171px sky band, art overhangs into the page like the original) ---------- */
.twyk-header { position: relative; height: 171px; z-index: 5; }
.twyk-kids { position: absolute; left: 20px; top: 0; width: 456px; height: 240px; z-index: 6; }
.twyk-starfish { position: absolute; left: 11px; top: 177px; width: 97px; height: 97px; z-index: 7; }
.twyk-brand { position: absolute; right: 9px; top: 24px; width: 344px; text-align: right; }
.twyk-brand a { display: block; }
.twyk-brand img { display: block; width: 344px; height: 46px; }
.twyk-hyphens { margin: 0; font: 11px/14px Arial, sans-serif; color: var(--twyk-brown); }
.twyk-tagline {
  display: inline-block; margin-top: 2px; padding: 2px 10px;
  background: var(--twyk-yellow); border: 1px solid #c9a52a; border-radius: 2px;
  font: 13px/18px Tahoma, Verdana, sans-serif; color: #000; white-space: nowrap;
}
.twyk-nav { position: absolute; right: 9px; top: 141px; height: 30px; display: flex; align-items: center; }
.twyk-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.twyk-nav a {
  display: block; padding: 4px 14px; color: #fff; text-decoration: none;
  font: bold 13px/18px Tahoma, Verdana, sans-serif; text-shadow: 0 1px 1px rgba(0,0,0,.35);
  border: 1px solid transparent;
}
.twyk-nav a:hover, .twyk-nav a:focus { color: var(--twyk-orange); }
.twyk-nav .current-menu-item > a, .twyk-nav .current_page_item > a, .twyk-nav a[aria-current] {
  background: var(--twyk-nav); border-color: #111; color: var(--twyk-orange); text-shadow: none;
}

/* the blue splatter + share icons + search, top right of the page like the original */
.twyk-splat-blue { position: absolute; right: 0; top: 171px; width: 296px; height: 261px; z-index: 1; pointer-events: none; }
.twyk-share { position: absolute; right: 50px; top: 195px; z-index: 4; display: flex; gap: 4px; }
.twyk-share img { width: 32px; height: 32px; display: block; }
.twyk-search { position: absolute; left: 571px; top: 188px; z-index: 4; display: flex; align-items: center; gap: 10px; box-sizing: border-box;
  width: 248px; height: 56px; padding: 0 14px; background: #fff; border: 1px solid #ccc; border-radius: 4px; margin: 0; }
.twyk-search-icon { display: flex; }
.twyk-search input[type=search] { border: 0; outline: 0; font: 13px Arial, sans-serif; flex: 1; min-width: 0; background: transparent; color: #333; }
.twyk-search input::placeholder { color: #888; }

/* ---------- body: main column + sidebar with the thin brown divider ---------- */
.twyk-body { position: relative; display: grid; grid-template-columns: 700px 1px 1fr; gap: 0 11px; padding: 89px 20px 30px 20px; z-index: 2; }
.twyk-body::before { content: ""; } /* keeps grid order explicit */
.twyk-body::before { display: none; }
.twyk-main { grid-column: 1; min-width: 0; position: relative; }
.twyk-divider { grid-column: 2; background: var(--twyk-tan-text); opacity: .6; margin-top: 20px; }
.twyk-sidebar { grid-column: 3; min-width: 0; padding-top: 112px; font-size: 13px; line-height: 1.45; position: relative; z-index: 3; }

/* title banner + subtitle strip (slanted, like the original images, but they grow with the text) */
.twyk-title {
  display: inline-block; margin: 0; padding: 8px 38px 8px 36px; min-width: 300px;
  background: var(--twyk-yellow); font: bold 40px/47px Arial, Helvetica, sans-serif; color: #000;
  clip-path: polygon(0 3%, 98% 0, 100% 100%, 0.5% 97%);
}
.twyk-subtitle {
  display: block; width: fit-content; max-width: 100%; margin: 4px 0 26px; padding: 12px 26px;
  background: var(--twyk-tan); color: #4a2a10; font: 15px/1.4 Arial, Helvetica, sans-serif;
  clip-path: polygon(2% 0, 100% 3%, 99% 100%, 0 96%);
}
.twyk-title-row { margin-left: 1px; }

/* content typography */
.twyk-content > :first-child { margin-top: 0; }
.twyk-content p { margin: 0 0 1em; }
.twyk-content .twyk-lead, .twyk-content p.twyk-lead { font: bold 18px/1.35 Tahoma, Verdana, sans-serif; color: #000; }
.twyk-content h2 { font: bold 26px/1.25 Arial, Helvetica, sans-serif; color: var(--twyk-orange); margin: 1.4em 0 .5em; }
.twyk-content h2.is-brown, .twyk-content h2.twyk-brown { color: var(--twyk-brown); }
.twyk-content h3 { font: bold 18px/1.3 Arial, Helvetica, sans-serif; color: var(--twyk-brown); margin: 1.2em 0 .4em; }
.twyk-content ul, .twyk-content ol { margin: 0 0 1em 1.6em; padding: 0; }
.twyk-content li { margin: 0 0 .35em; }
.twyk-content blockquote { margin: 1em 0 1em 1.6em; padding-left: 1em; border-left: 3px solid var(--twyk-tan); font-style: italic; }
.twyk-content figure { margin: 0 0 1em; }
.twyk-content .alignright, .twyk-content figure.alignright { float: right; margin: 0 0 12px 18px; }
.twyk-content .alignleft, .twyk-content figure.alignleft { float: left; margin: 0 18px 12px 0; }
.twyk-content img { display: block; }
.twyk-content figcaption { font-size: 12px; color: var(--twyk-tan-text); margin-top: 4px; }
.twyk-content::after { content: ""; display: table; clear: both; }

/* home: the lime splatter behind the story */
.twyk-home .twyk-main::before {
  content: ""; position: absolute; left: -20px; top: 460px; width: 374px; height: 366px;
  background: url(assets/splat-lime.png) no-repeat; z-index: -1; pointer-events: none;
}

/* article hero: big photo left, three photos right (as on the original article pages) */
.twyk-hero { display: grid; grid-template-columns: 508px 1fr; gap: 0 14px; align-items: end; margin: 0 0 22px -16px; }
.twyk-hero-main img { display: block; width: 508px; height: auto; }
.twyk-hero-thumbs { display: flex; gap: 2px; margin-right: -270px; position: relative; z-index: 4; }
.twyk-hero-thumbs img { width: 160px; height: auto; display: block; }

/* article pages: olive title banner + brown subtitle, photo strip across the full width, sidebar starts at the title */
.single .twyk-title { background: var(--twyk-olive); color: #000; }
.single .twyk-subtitle { background: #986d4d; color: #fff; }
.twyk-hero-wrap { position: relative; z-index: 2; padding: 56px 20px 0 4px; }
.twyk-hero-wrap .twyk-hero { margin: 0; grid-template-columns: 508px auto; justify-content: start; }
.twyk-hero-wrap .twyk-hero-thumbs { margin-right: 0; }
.single .twyk-body { padding-top: 28px; }
.single .twyk-sidebar { padding-top: 44px; }
.single .twyk-content h2:not(.twyk-brown) {
  width: fit-content; max-width: 100%; background: var(--twyk-yellow); padding: 4px 46px 6px 12px; margin-left: -8px;
  clip-path: polygon(0 4%, 95% 0, 100% 100%, 0 100%);
}
.twyk-whats-on strong { display: block; margin-bottom: 4px; }
.twyk-whats-on p { margin: 0 0 8px; }
.twyk-go { display: inline-block; background: var(--twyk-olive); color: #fff !important; text-decoration: none; font: bold 12px/20px Arial, sans-serif; padding: 1px 14px; }
.twyk-go:hover { background: #5e5e00; }

/* "More in <category>" list under posts */
.twyk-more { clear: both; margin-top: 36px; padding: 18px 22px; background: rgba(239,203,63,.25); border-left: 6px solid var(--twyk-yellow); }
.twyk-more h2 { margin: 0 0 8px; font: bold 20px/1.2 Arial, sans-serif; color: var(--twyk-brown); }
.twyk-more ul { margin: 0; padding-left: 1.2em; }
.twyk-more li { margin: 0 0 4px; }

/* sidebar tips + framed photos */
.twyk-tip { margin: 0 0 22px; }
.twyk-tip strong { display: block; }
.twyk-thumbs { display: flex; gap: 7px; margin: 0 0 14px; flex-wrap: wrap; }
.twyk-thumbs img { display: block; }
.twyk-thumbs.small img { width: 74px; height: 74px; object-fit: cover; }
.twyk-thumbs.tall img { width: 104px; height: 174px; object-fit: cover; }
.twyk-sidebar .widget { margin: 0 0 22px; }
.twyk-sidebar .widget-title { font: bold 13px Arial, sans-serif; margin: 0 0 4px; }

/* bottom feature row: cards + olive Recommendations box (home) / related cards (articles) */
.twyk-features { clear: both; border-top: 3px solid var(--twyk-tan); padding-top: 40px; margin-top: 40px; display: grid; grid-template-columns: 1fr 375px; gap: 30px; align-items: start; }
.twyk-cards { display: grid; grid-template-columns: repeat(3, 160px); gap: 2px; }
.twyk-card a.twyk-card-img img { width: 160px; height: 161px; object-fit: cover; display: block; }
.twyk-card-title { display: block; margin: 6px 0 2px; font: bold 13px/1.3 Arial, sans-serif; }
.twyk-card p { margin: 0; font-size: 13px; line-height: 1.35; }
.twyk-stars { display: flex; gap: 3px; margin: 4px 0; }
.twyk-stars img { width: 13px; height: 13px; }
.twyk-callout { clear: both; margin-top: 30px; }
.twyk-grid { flex-wrap: wrap; justify-content: flex-start; }
.twyk-recommend {
  background: var(--twyk-olive); color: #fff; padding: 30px 28px 34px;
  clip-path: polygon(0 0, 98% 1.5%, 100% 100%, 1% 98%);
}
.twyk-recommend h2 { color: #fff !important; font: bold 32px/1.15 Arial, sans-serif; margin: 0 0 14px; }
.twyk-recommend p { font-size: 17px; line-height: 1.45; margin: 0; }
.twyk-related { clear: both; display: flex; justify-content: center; gap: 4px; margin-top: 40px; }
.twyk-related .twyk-card { width: 245px; }
.twyk-related .twyk-card a.twyk-card-img img { width: 245px; height: 232px; }

/* ---------- footer (blue bar) ---------- */
.twyk-footer { position: relative; max-width: 960px; margin: 30px auto 40px; min-height: 70px; background: url(assets/footer-bar.png) no-repeat center / 100% 100%; display: flex; align-items: center; justify-content: space-between; padding: 8px 18px; box-sizing: border-box; }
.twyk-footer p { margin: 0; font: 11px/16px Arial, sans-serif; color: var(--twyk-brown); }
.twyk-footer a { color: var(--twyk-brown); }
.twyk-footer .twyk-rss img { width: 28px; height: 28px; display: block; }

/* ---------- tablets and phones: same look, one column ---------- */
@media (max-width: 1000px) {
  .twyk-body { grid-template-columns: minmax(0, 1fr) 1px 230px; }
  .twyk-hero { grid-template-columns: 1fr; margin-left: 0; }
  .twyk-hero-main img { width: 100%; }
  .twyk-hero-thumbs { margin: 6px 0 0; }
  .twyk-hero-thumbs img { width: calc((100% - 4px) / 3); }
  .twyk-search { left: auto; right: 320px; }
  .twyk-body { grid-template-columns: minmax(0, 1fr) 1px 236px; }
}
@media (max-width: 820px) {
  .twyk-hero-wrap { padding: 16px 16px 0; }
  .twyk-hero-wrap .twyk-hero { grid-template-columns: 1fr; }
  .single .twyk-body { padding-top: 20px; }
  body.twyk { background-size: auto 171px; }
  .twyk-header { height: auto; min-height: 171px; display: flex; flex-direction: column; align-items: flex-end; padding: 10px 12px 0; box-sizing: border-box; }
  .twyk-kids { position: absolute; left: 6px; top: 0; width: 46%; height: auto; max-width: 300px; }
  .twyk-starfish { display: none; }
  .twyk-brand { position: static; width: 52%; max-width: 344px; margin-left: auto; }
  .twyk-brand img { width: 100%; height: auto; }
  .twyk-tagline { font-size: 12px; line-height: 16px; }
  .twyk-nav { position: static; height: auto; margin-top: 28px; width: 100%; justify-content: flex-end; }
  .twyk-nav ul { flex-wrap: wrap; justify-content: flex-end; }
  .twyk-nav a { padding: 4px 9px; font-size: 13px; }
  .twyk-splat-blue { width: 150px; height: auto; top: auto; }
  .twyk-share { position: static; justify-content: flex-end; margin: 8px 16px 0; }
  .twyk-search { position: static; margin: 10px 16px 0; width: auto; height: 44px; }
  .twyk-tagline { white-space: normal; }
  .twyk-body { display: block; padding: 24px 16px 20px; }
  .twyk-divider { display: none; }
  .twyk-sidebar { padding-top: 10px; border-top: 1px solid var(--twyk-tan); margin-top: 24px; }
  .twyk-title { font-size: 30px; line-height: 36px; padding: 6px 24px; min-width: 0; }
  .twyk-content .alignright, .twyk-content .alignleft { float: none; margin: 0 0 12px; }
  .twyk-features { grid-template-columns: minmax(0, 1fr); }
  .twyk-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .twyk-card a.twyk-card-img img { width: 100%; height: auto; aspect-ratio: 1; }
  .twyk-related { flex-direction: column; align-items: center; }
  .twyk-home .twyk-main::before { left: -16px; width: 260px; height: 255px; background-size: contain; }
  .twyk-footer { margin: 24px 16px 30px; }
}
@media (max-width: 480px) {
  .twyk-cards { grid-template-columns: 1fr 1fr; }
  .twyk-title { font-size: 26px; line-height: 32px; }
  .twyk-content .twyk-lead { font-size: 17px; }
}