/*
Theme Name: Timeless Tales
Theme URI: https://timelesstalesbysarika.ca
Author: Sarika Rana
Author URI: https://timelesstalesbysarika.ca
Description: Custom, lightweight, page-builder-free WordPress theme for Timeless Tales Photography by Sarika (Kingston, Ontario). A faithful, pixel-accurate recreation of the original design — self-hosted fonts, optimized assets, and content that is fully editable from the WordPress admin via ACF and the Customizer.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: timeless-tales
Tags: photography, portfolio, custom-colors, custom-menu, featured-images, full-width-template, translation-ready
*/

/* Actual design lives in assets/css/app.css (compiled) + assets/css/fonts.css.
   This file only carries the theme header and a few theme-specific tweaks. */

/* Primary nav — replicates the original utility styling so WP menus + fallback match */
.tt-nav .tt-menu{display:flex;align-items:center;gap:1.5rem;list-style:none;margin:0;padding:0}
.tt-nav .tt-menu a{font-size:.75rem;text-transform:uppercase;letter-spacing:.22em;color:color-mix(in oklab,var(--foreground) 80%,transparent);transition:color .2s ease}
.tt-nav .tt-menu a:hover,.tt-nav .tt-menu .current-menu-item>a{color:var(--accent)}

/* Header row spacing.
   The original design had no logo image: wordmark (177px) + nav (767px) + pill (181px)
   left ~37px of breathing room on each side inside the 1280px container. Adding the logo
   badge ate almost exactly that slack, collapsing both gaps to 2px so the wordmark ran into
   "About" and "Packages" touched the pill. Restore it by holding the brand and the pill at
   their natural width (never let flex shrink them onto two lines) and buying the space back
   from the badge size + nav tracking. Yields ~41px gaps at every width the desktop nav shows. */
.tt-header-row{gap:1.75rem}
.tt-header-row>.tt-brand,.tt-header-row>.tt-cta{flex:none;white-space:nowrap}
@media (min-width:1280px){
	.tt-nav .tt-menu{gap:1.25rem}
	.tt-nav .tt-menu a{letter-spacing:.16em}
}

/* Brand logo — circular badge beside the wordmark (square source, clipped to a circle) */
.tt-logo{height:2.375rem;width:2.375rem;flex:none;margin-right:.5rem;border-radius:50%;object-fit:cover}
@media (min-width:768px){.tt-logo{height:2.5rem;width:2.5rem}}

/* Mobile nav (theme-provided, not in the original compiled CSS) */
.tt-mobile-panel{position:fixed;inset:0;z-index:60;background:var(--background);transform:translateX(100%);transition:transform .4s ease;display:flex;flex-direction:column;padding:1.5rem;overflow-y:auto}
.tt-mobile-panel.is-open{transform:translateX(0)}
.tt-mobile-panel a{font-family:var(--font-display);font-size:1.5rem;padding:.5rem 0;color:var(--foreground)}
/* "Book a Session" header CTA — a clean pill on both desktop and mobile.
   The blanket rule above would otherwise strip the mobile button's side padding
   (and force 1.5rem serif), making the text collide with the rounded border. */
.tt-cta{font-family:var(--font-sans);font-weight:500;letter-spacing:.2em;text-transform:uppercase}
/* On hover the pill fills with --foreground; force the label to --background so it stays
   legible (the hover:text-background utility isn't present in the reused compiled app.css). */
.tt-cta:hover,.tt-cta:focus-visible{background-color:var(--foreground);color:var(--background)}
.tt-mobile-panel a.tt-cta{font-family:var(--font-sans);font-size:.75rem;width:100%;text-align:center;padding:.95rem 1.5rem}
body.tt-no-scroll{overflow:hidden}
/* Keep the panel's brand + close button clear of the WP admin bar (logged-in only) */
.admin-bar .tt-mobile-panel{top:32px}
@media screen and (max-width:782px){.admin-bar .tt-mobile-panel{top:46px}}

/* Supplemental utilities — used by theme templates but not present in the reused
   compiled app.css (Tailwind only emits classes the original markup used). Base unit 0.25rem. */
.pt-12{padding-top:3rem}
.pt-44{padding-top:11rem}
.pb-16{padding-bottom:4rem}
.pb-24{padding-bottom:6rem}
.pb-28{padding-bottom:7rem}
.pb-32{padding-bottom:8rem}
.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}
.space-y-12>:not([hidden])~:not([hidden]){margin-top:3rem}
@media (min-width:48rem){.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}}
@media (min-width:64rem){
	.lg\:pt-10{padding-top:2.5rem}
	.lg\:pb-32{padding-bottom:8rem}
	.lg\:pb-36{padding-bottom:9rem}
	.lg\:py-20{padding-top:5rem;padding-bottom:5rem}
	.lg\:gap-20{gap:5rem}
}

/* ============================================================
   Fluent Forms — styled to match the original inquiry form
   (underline inputs, uppercase tracked labels, dark pill submit)
   Scoped to .tt-form so it never affects other forms.
   ============================================================ */
.tt-form .frm-fluent-form{font-family:var(--font-sans)}
.tt-form .ff-el-group{margin-bottom:1.6rem}
.tt-form .ff-t-container{margin-bottom:0}

/* Labels */
.tt-form .ff-el-input--label label{
	font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;font-weight:500;
	color:var(--muted-foreground);margin-bottom:.55rem;display:block;line-height:1.4}
.tt-form .ff-el-is-required.asterisk-right>label:after,
.tt-form .ff-el-input--label .ff-el-is-asterisk{color:var(--accent)}

/* Inputs / selects — underline only, transparent (matches original border-border) */
.tt-form .ff-el-form-control{
	background:transparent !important;border:0 !important;border-bottom:1px solid var(--border) !important;
	border-radius:0 !important;padding:.5rem 0;color:var(--foreground);font-size:.95rem;line-height:1.6;
	box-shadow:none !important;width:100%;transition:border-color .3s ease}
.tt-form .ff-el-form-control::placeholder{color:color-mix(in oklab,var(--foreground) 38%,transparent)}
.tt-form .ff-el-form-control:focus{outline:none !important;border-bottom-color:var(--accent) !important;box-shadow:none !important}

/* Textarea — underline only, matching the inputs */
.tt-form textarea.ff-el-form-control{min-height:110px;resize:vertical;padding-top:.25rem}
.tt-form textarea.ff-el-form-control:focus{border-bottom-color:var(--accent)}

/* Select — custom chevron */
.tt-form select.ff-el-form-control{
	appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:1.6rem;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232b3026' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right .15rem center;background-size:1rem}

/* Date field — calendar icon (matches the original native date look) */
.tt-form input[data-type-datepicker]{
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232b3026' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right .1rem center;background-size:1.05rem;padding-right:1.6rem;cursor:pointer}

/* Submit — full dark pill with lucide send icon (!important beats FF's per-form style block) */
.tt-form .ff-el-group:last-child{margin-bottom:0}
.tt-form .ff-btn-submit{
	display:inline-flex !important;align-items:center;gap:.75rem;
	background:var(--foreground) !important;color:var(--background) !important;border:0 !important;cursor:pointer;
	border-radius:9999px !important;padding:1rem 2rem !important;margin-top:.5rem;width:auto !important;
	font-size:.72rem;text-transform:uppercase;letter-spacing:.24em;font-weight:500;
	transition:background-color .3s ease,color .3s ease}
.tt-form .ff-btn-submit:hover{background:var(--accent) !important;color:var(--accent-foreground) !important}
.tt-form .ff-btn-submit:after{
	content:"";width:.9rem;height:.9rem;display:inline-block;background-color:currentColor;flex:none;
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z'/%3E%3C/svg%3E") center/contain no-repeat}

/* Validation + success messaging */
.tt-form .ff-el-is-error .ff-el-form-control{border-bottom-color:var(--destructive)}
.tt-form .error.text-danger,.tt-form .ff-el-is-error .text-danger{color:var(--destructive);font-size:.75rem;margin-top:.3rem}
.tt-form .ff-message-success{
	background:transparent;border:1px solid var(--accent);color:var(--foreground);
	border-radius:.6rem;padding:1.25rem 1.5rem;font-size:.95rem;line-height:1.7}

/* Dark variant of the form (Portraits "Instant Availability" band on bg-foreground) */
.tt-form-dark .ff-el-input--label label{color:color-mix(in oklab,var(--background) 70%,transparent)}
.tt-form-dark .ff-el-form-control{
	color:var(--background) !important;
	border-bottom-color:color-mix(in oklab,var(--background) 30%,transparent) !important}
.tt-form-dark .ff-el-form-control::placeholder{color:color-mix(in oklab,var(--background) 40%,transparent)}
.tt-form-dark .ff-el-form-control:focus{border-bottom-color:var(--accent) !important}
.tt-form-dark select.ff-el-form-control,
.tt-form-dark input[data-type-datepicker]{
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f1f4ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.tt-form-dark select.ff-el-form-control option{color:var(--foreground)}
.tt-form-dark .ff-btn-submit{background:var(--background) !important;color:var(--foreground) !important}
.tt-form-dark .ff-btn-submit:hover{background:var(--accent) !important;color:var(--accent-foreground) !important}

/* Light prose styling for WYSIWYG/editor content */
.tt-prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.tt-prose strong{color:var(--foreground);font-weight:600}
.tt-prose p{margin:0}

/* Sticky header: transparent over hero, solid after scroll (replaces React scroll state) */
[data-tt-header]{transition:background-color .4s ease,box-shadow .4s ease,color .4s ease}
/* Offset the fixed header below the WP admin bar (logged-in admins only) */
.admin-bar [data-tt-header]{top:32px}
@media screen and (max-width:782px){.admin-bar [data-tt-header]{top:46px}}
.tt-header-solid{background-color:var(--background);box-shadow:0 1px 0 0 color-mix(in oklab,var(--border) 60%,transparent)}

/* Scroll-reveal (replaces the React fade-up). Hidden until revealed; no-JS shows everything. */
.tt-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.tt-reveal.is-visible{opacity:1;transform:none}
.no-js .tt-reveal{opacity:1;transform:none}