/*
Theme Name:   Travel Like Butter
Theme URI:    https://www.travellikebutter.com
Description:  GeneratePress child theme for Travel Like Butter. Holds the brand foundation (fonts, base colors, page canvas, header/footer placement and form fields). Page sections are built with GenerateBlocks, using the site's Design Tokens and Global Styles.
Author:       Travel Like Butter
Template:     generatepress
Version:      1.0.2
Text Domain:  travellikebutter
*/

/* ---------------------------------------------------------------
   1. Foundation
   Colors come from the GenerateBlocks Design Tokens (--tlb-*);
   the fallbacks keep the theme readable if a token is missing.
---------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: 110px; }

body {
	background-color: var(--tlb-navy, #061722);
	color: var(--tlb-cream, #fffaf0);
	font-family: var(--tlb-font-body, 'DM Sans', sans-serif);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--tlb-font-display, 'Barlow Condensed', sans-serif);
	color: inherit;
	margin: 0;
}

p { margin: 0; }

a { color: var(--tlb-gold, #ffc12b); transition: color .2s, background-color .2s, transform .2s; }
a:hover, a:focus { color: var(--tlb-gold-light, #ffd25c); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 3px solid var(--tlb-gold, #ffc12b);
	outline-offset: 4px;
}

::selection { background: var(--tlb-gold, #ffc12b); color: var(--tlb-navy, #061722); }

/* ---------------------------------------------------------------
   2. Page canvas
   Pages are full width, without sidebars or GeneratePress titles,
   so GenerateBlocks sections can run edge to edge.
---------------------------------------------------------------- */
.tlb-canvas .site.grid-container,
.tlb-canvas .grid-container.container { max-width: none; }

.tlb-canvas .site-content { display: block; padding: 0; }
.tlb-canvas .content-area { width: 100%; float: none; }
.tlb-canvas .site-main,
.tlb-canvas.separate-containers .site-main { margin: 0 !important; }
.tlb-canvas.separate-containers .site-main > * { margin-bottom: 0; }
.tlb-canvas .inside-article,
.tlb-canvas.separate-containers .inside-article,
.tlb-canvas.one-container .site-content { padding: 0 !important; background: transparent; }
.tlb-canvas .entry-content { margin: 0; }
.tlb-canvas .entry-content:not(:first-child) { margin-top: 0; }
.tlb-canvas .site,
.tlb-canvas .site-content,
.tlb-canvas .inside-article { background-color: transparent; }

/* Posts and archives (not built yet) stay readable on the dark canvas. */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .site-content,
.inside-page-header,
.widget-area .widget { background-color: var(--tlb-panel, #102a3b); color: var(--tlb-cream, #fffaf0); }
body:not(.tlb-canvas) .site-content { padding-top: 180px; }
.entry-title a, .entry-meta a { color: var(--tlb-cream, #fffaf0); }

/* ---------------------------------------------------------------
   3. Site header and footer (GeneratePress Block Elements)
   The header floats over each page's opening section.
---------------------------------------------------------------- */
.tlb-site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 60; }
.admin-bar .tlb-site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .tlb-site-header { top: 46px; } }

/* GenerateBlocks Pro dropdown: cream panel, as in the mockup. */
.tlb-site-header .gb-sub-menu { min-width: 245px; }

/* GeneratePress' default copyright bar is replaced by the footer Element. */
.site-footer .site-info { display: none; }

/* ---------------------------------------------------------------
   4. GenerateBlocks Pro forms
   GeneratePress gives text inputs a light background with a
   higher-specificity selector; this keeps every GenerateBlocks form
   field on the dark brand styling.
---------------------------------------------------------------- */
.gb-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.gb-form select,
.gb-form textarea {
	background-color: var(--tlb-navy, #061722);
	color: var(--tlb-cream, #fffaf0);
	border: 1px solid rgba(131, 205, 227, 0.3);
	border-radius: 4px;
	font-family: var(--tlb-font-body, 'DM Sans', sans-serif);
	font-size: 15px;
}
.gb-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
.gb-form select:focus,
.gb-form textarea:focus {
	background-color: var(--tlb-navy, #061722);
	color: var(--tlb-cream, #fffaf0);
	border-color: var(--tlb-gold, #ffc12b);
	box-shadow: 0 0 0 3px rgba(255, 193, 43, 0.25);
	outline: none;
}
.gb-form ::placeholder { color: #77949f; opacity: 1; }
.gb-form select option { background-color: var(--tlb-navy, #061722); color: var(--tlb-cream, #fffaf0); }
.gb-form input[type="checkbox"],
.gb-form input[type="radio"] { accent-color: var(--tlb-gold, #ffc12b); }

/* Cloudflare Turnstile: GenerateBlocks prints the check after the
   submit button; show it above the button so visitors finish it
   first, and reserve its height so the button doesn't jump. */
.gb-form > .cf-turnstile { order: 1; min-height: 65px; max-width: 100%; }
.gb-form > button[type="submit"] { order: 2; }

/* ---------------------------------------------------------------
   5. Motion preferences
---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}