/*
Theme Name:  Blocksy Child — Experience Italy
Theme URI:   https://creativethemes.com/blocksy/
Description: Child theme carrying the Experience Italy brand polish layer. All brand-wide visual refinement lives in this stylesheet — edit the tokens in :root to retune the palette site-wide.
Author:      Experience Italy
Template:    blocksy
Version:     1.27.0
Text Domain: blocksy-child
*/

/* =====================================================================
   EXPERIENCE ITALY — BRAND POLISH LAYER
   ---------------------------------------------------------------------
   Purpose: harmonize the UiChemy/Figma import into a warm, editorial,
   Italian-luxury look without editing individual Elementor widgets.

   Structure:
     1. Brand tokens
     2. Base / body
     3. Typography & heading hierarchy
     4. Buttons
     5. Forms (WPForms)
     6. Images & cards
     7. Header
     8. Accents & details
     9. Footer
    10. Mobile-safe adjustments

   Notes on !important: the UiChemy import hard-codes styles on nearly
   every widget (e.g. `.elementor-6 .elementor-element-xxxx .elementor-button`),
   which out-specifies any global selector. !important is used deliberately
   on brand-defining properties so this file wins as a single source of
   truth. Per-widget exceptions are re-asserted below the global rules.
   ===================================================================== */


/* 1. BRAND TOKENS
   ------------------------------------------------------------------ */
:root {
	/* palette — warm Italian editorial */
	--ei-ivory: #FAF6EF;          /* page background, light sections */
	--ei-cream: #F3ECE2;          /* input fills, soft cards */
	--ei-rose: #E8DCD9;           /* dusty rose accent (already in design) */
	--ei-taupe: #6B6158;          /* secondary text (already in design) */
	--ei-terracotta: #A15C38;     /* primary accent (already in design) */
	--ei-terracotta-deep: #8A4B2D;/* hover/active accent */
	--ei-espresso: #262220;       /* buttons, dark surfaces (already in design) */
	--ei-ink: #2B2420;            /* heading text — warm near-black, not #000 */

	/* type */
	--ei-serif: "Playfair Display", "Cormorant", Georgia, serif;
	--ei-sans: "Jost", "Helvetica Neue", Arial, sans-serif;
	--ei-script: "Corinthia", cursive;

	/* layout — one content measure for the whole site.
	   Plan Your Trip, Contact and Client Stories already used 1180px;
	   Our Process and About now match it, so the logo, the breadcrumb
	   and the content share a single left edge on every page instead of
	   four different ones. Text columns inside stay narrower for
	   readability — this is the outer container, not the measure. */
	--ei-content-max: 1180px;

	/* Gutter for the full-width header row. Blocksy's fluid default is
	   30px, which strands the logo against the screen edge on a large
	   display; this scales with the viewport and settles at 80px. */
	--ei-page-gutter: clamp(32px, 4vw, 80px);

	/* shape & shadow — keep everything soft and quiet */
	--ei-radius: 4px;
	--ei-border: 1px solid rgba(107, 97, 88, 0.25);   /* taupe @ 25% */
	--ei-shadow-soft: 0 6px 24px rgba(43, 36, 32, 0.08);
}


/* 2. BASE / BODY
   ------------------------------------------------------------------ */
body {
	background-color: var(--ei-ivory);
	font-family: var(--ei-sans);
	color: var(--ei-taupe);
	-webkit-font-smoothing: antialiased;
}

::selection {
	background: var(--ei-rose);
	color: var(--ei-ink);
}

/* Warm the stark-white content areas without touching sections that
   set their own backgrounds. */
.elementor-widget-text-editor {
	color: inherit;
}


/* 3. TYPOGRAPHY & HEADING HIERARCHY
   ------------------------------------------------------------------
   h1–h2  editorial serif display (section titles)
   h3–h4  serif card/subsection titles
   h5–h6  sans eyebrow labels (Discover / Curate / Experience …)
   The import mixes Playfair 900 / Cormorant / Jost per widget; these
   rules consolidate the hierarchy. */

h1, h2,
h1.elementor-heading-title, h2.elementor-heading-title {
	font-family: var(--ei-serif) !important;
	font-weight: 500 !important;
	letter-spacing: 0.01em !important;
	line-height: 1.18 !important;
	text-transform: none;
}

h3, h4,
h3.elementor-heading-title, h4.elementor-heading-title,
.elementor-image-box-title, .elementor-icon-box-title {
	font-family: var(--ei-serif) !important;
	font-weight: 500 !important;
	letter-spacing: 0.01em !important;
	line-height: 1.3 !important;
}

/* Eyebrow labels — quiet, spaced, uppercase */
h5, h6,
h5.elementor-heading-title, h6.elementor-heading-title {
	font-family: var(--ei-sans) !important;
	font-weight: 500 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	line-height: 1.5 !important;
}

/* Body copy rhythm */
.elementor-widget-text-editor p {
	line-height: 1.75;
}


/* 4. BUTTONS
   ------------------------------------------------------------------
   One button language everywhere: espresso ground, ivory text,
   terracotta on hover. Replaces the imported #0A0500/900-weight and
   the off-brand teal hover. */

.elementor-button,
.elementor-button-link {
	font-family: var(--ei-sans) !important;
	font-weight: 500 !important;
	font-size: 15px !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	background-color: var(--ei-espresso) !important;
	color: var(--ei-ivory) !important;
	border: 1px solid var(--ei-espresso) !important;
	border-radius: 2px !important;
	padding: 16px 36px !important;
	box-shadow: none !important;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
}

.elementor-button:hover,
.elementor-button:focus {
	background-color: var(--ei-terracotta) !important;
	border-color: var(--ei-terracotta) !important;
	color: var(--ei-ivory) !important;
}


/* 5. FORMS — WPForms (contact form + future questionnaire)
   ------------------------------------------------------------------ */
/* Editorial underline language: no boxes — a hairline under each
   answer that turns terracotta on focus. Reads like a beautifully
   printed questionnaire, not a web form. */
div.wpforms-container-full .wpforms-form input[type="text"],
div.wpforms-container-full .wpforms-form input[type="email"],
div.wpforms-container-full .wpforms-form input[type="tel"],
div.wpforms-container-full .wpforms-form input[type="number"],
div.wpforms-container-full .wpforms-form select,
div.wpforms-container-full .wpforms-form textarea {
	background-color: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(107, 97, 88, 0.35) !important;
	border-radius: 0 !important;
	padding: 10px 2px !important;
	font-family: var(--ei-sans) !important;
	font-size: 17px !important;
	color: var(--ei-ink) !important;
	box-shadow: none !important;
	transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

div.wpforms-container-full .wpforms-form select {
	appearance: none !important;
	-webkit-appearance: none !important;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A15C38' stroke-width='1.5'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 4px center !important;
	padding-right: 28px !important;
}

div.wpforms-container-full .wpforms-form input:focus,
div.wpforms-container-full .wpforms-form select:focus,
div.wpforms-container-full .wpforms-form textarea:focus {
	border-bottom-color: var(--ei-terracotta) !important;
	box-shadow: 0 1px 0 var(--ei-terracotta) !important;
	outline: none !important;
}

div.wpforms-container-full .wpforms-form ::placeholder {
	color: #B5AA9E !important;
	opacity: 1 !important;
}

div.wpforms-container-full .wpforms-form .wpforms-field-label {
	font-family: var(--ei-sans) !important;
	font-weight: 500 !important;
	font-size: 12.5px !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: var(--ei-taupe) !important;
	margin-bottom: 2px !important;
}

div.wpforms-container-full .wpforms-form .wpforms-required-label {
	color: var(--ei-terracotta) !important;
}

div.wpforms-container-full .wpforms-form .wpforms-field-sublabel,
div.wpforms-container-full .wpforms-form .wpforms-field-description {
	font-family: var(--ei-serif) !important;
	font-style: italic !important;
	font-size: 14.5px !important;
	color: #9A8C80 !important;
}

div.wpforms-container-full .wpforms-form .wpforms-field {
	padding-top: 16px !important;
	padding-bottom: 16px !important;
}

/* Checkboxes & radios: warm accents, comfortable rhythm */
div.wpforms-container-full .wpforms-form .wpforms-field-checkbox input[type="checkbox"],
div.wpforms-container-full .wpforms-form .wpforms-field-radio input[type="radio"] {
	accent-color: var(--ei-terracotta) !important;
	width: 17px !important;
	height: 17px !important;
}

div.wpforms-container-full .wpforms-form .wpforms-field-checkbox ul li,
div.wpforms-container-full .wpforms-form .wpforms-field-radio ul li {
	margin-bottom: 10px !important;
	font-size: 16px !important;
	color: #5C534B !important;
}

/* Submit button matches the site button language */
div.wpforms-container-full .wpforms-form button[type="submit"],
div.wpforms-container-full .wpforms-form .wpforms-submit {
	font-family: var(--ei-sans) !important;
	font-weight: 500 !important;
	font-size: 15px !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	background-color: var(--ei-espresso) !important;
	color: var(--ei-ivory) !important;
	border: 1px solid var(--ei-espresso) !important;
	border-radius: 2px !important;
	padding: 14px 36px !important;
	transition: background-color 0.25s ease !important;
}

div.wpforms-container-full .wpforms-form button[type="submit"]:hover,
div.wpforms-container-full .wpforms-form .wpforms-submit:hover {
	background-color: var(--ei-terracotta) !important;
	border-color: var(--ei-terracotta) !important;
}


/* 6. IMAGES & CARDS
   ------------------------------------------------------------------
   Deliberately narrow: only gallery grid thumbnails get a soft radius.
   No global rules on .elementor-widget-image / img — hero imagery,
   framed images, and icon assets are left exactly as designed. */
.elementor-image-gallery .gallery-item img {
	border-radius: var(--ei-radius);
}

/* Star ratings: orange → terracotta */
.elementor-star-rating i:before {
	color: var(--ei-terracotta) !important;
}


/* 7. HEADER
   ------------------------------------------------------------------
   Typography only. No background/blur/border rules here: Blocksy's
   shrink-sticky header carries data-sticky*="fixed" from page load,
   so ANY background keyed to that state paints over the transparent
   hero. Sticky background/transparency stays 100% Blocksy-controlled
   (Customizer → Header), which preserves the original hero overlay. */
/* Both raster logos carry a baked-in white background. Swap in the
   alpha-transparent versions generated from them (uploads/2026/01/):
   — light header bars get the espresso mark on transparency
   — the near-black off-canvas panel gets an ivory sun mark.
   (Blend-mode tricks proved fragile: Blocksy filters the page when the
   panel opens, which breaks blend compositing.) */
/* Only swap in the dark mark on NON-transparent header rows (light
   bars: Plan Your Trip, Reviews…). Transparent rows over hero photos
   (home, about, contact) keep Blocksy's white logo, as does sticky. */
.ct-header [data-row]:not([data-transparent-row]) .default-logo {
	content: url("/wp-content/uploads/2026/01/ei-logo-dark-t.png");
}

#offcanvas .site-logo-container img {
	display: none !important;
}

#offcanvas .site-logo-container {
	display: block;
	width: 96px;
	height: 84px;
	background: url("/wp-content/uploads/2026/01/ei-logo-sun-ivory.png") center / contain no-repeat;
}

.ct-header .menu > li > a,
.ct-header .ct-menu-link {
	font-family: var(--ei-sans);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ct-header .menu > li > a:hover,
.ct-header .ct-menu-link:hover {
	color: var(--ei-terracotta);
}


/* 8. ACCENTS & DETAILS
   ------------------------------------------------------------------ */
/* Quiet, warm link treatment in body copy */
.elementor-widget-text-editor a,
.entry-content a {
	color: var(--ei-terracotta);
	text-decoration-color: rgba(161, 92, 56, 0.4);
	text-underline-offset: 3px;
}

.elementor-widget-text-editor a:hover,
.entry-content a:hover {
	color: var(--ei-terracotta-deep);
}

/* Icon boxes (contact page details): warm the icons */
.elementor-icon-box-icon .elementor-icon {
	color: var(--ei-terracotta);
	fill: var(--ei-terracotta);
}

/* Keep dividers hairline & warm */
.elementor-divider-separator {
	border-color: rgba(107, 97, 88, 0.3) !important;
}


/* 9. FOOTER — warm espresso band (Blocksy color vars)
   ------------------------------------------------------------------
   (The former homepage editorial pass — ~220 lines of .elementor-6 /
   .elementor-1134 rules for the retired Elementor homepage layout —
   was removed in 1.9.0. It is preserved in git: see tag
   baseline-2026-07-18, or `git log -- style.css`.) */
/* Blocksy paints each footer row's own background (white + a topography
   pattern image from the import) OVER the footer element — so the rows
   themselves must carry the espresso, and the pattern must go. */
footer.ct-footer,
footer.ct-footer [data-row] {
	background-color: var(--ei-espresso) !important;
	background-image: none !important;
}

footer.ct-footer {
	--theme-text-color: rgba(250, 246, 239, 0.6);
	--theme-link-initial-color: rgba(250, 246, 239, 0.82);
	--theme-link-hover-color: #C08975;
	--theme-icon-color: rgba(250, 246, 239, 0.75);
	--theme-icon-hover-color: #C08975;
}

footer.ct-footer .ct-menu-link {
	font-family: var(--ei-sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

footer.ct-footer [data-row] > .ct-container {
	padding-top: 34px;
	padding-bottom: 34px;
}

footer.ct-footer .ct-footer-copyright {
	font-size: 13px;
	letter-spacing: 0.04em;
	color: rgba(250, 246, 239, 0.55);
}


/* 10. MOBILE-SAFE ADJUSTMENTS
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
	h1, h2,
	h1.elementor-heading-title, h2.elementor-heading-title {
		line-height: 1.22 !important;
	}

	.elementor-button,
	.elementor-button-link {
		padding: 14px 28px !important;
		font-size: 14px !important;
	}

	div.wpforms-container-full .wpforms-form input[type="text"],
	div.wpforms-container-full .wpforms-form input[type="email"],
	div.wpforms-container-full .wpforms-form textarea {
		font-size: 16px !important; /* prevents iOS zoom-on-focus */
	}
}


/* 11. HEADER ROW GUTTER
   ------------------------------------------------------------------
   The header row is set to "fluid" in the Customizer so the logo and
   menu trigger reach out toward the screen edges on wide displays
   instead of being stranded by the 1502px site-width cap. Blocksy's
   fluid container derives its width from --theme-container-edge-spacing
   (default `100vw - 60px`, i.e. a 30px gutter), so retuning that one
   custom property is enough — no selector fighting, and nothing here
   touches the sticky or transparent header's background, which must
   stay Customizer-controlled.
   ------------------------------------------------------------------ */
.ct-header .ct-container-fluid {
	--theme-container-edge-spacing: calc(100vw - var(--ei-page-gutter) * 2);
}


/* 11. SIMPLE / LEGAL PAGES
   ---------------------------------------------------------------------
   Pages the plugin does not manage (currently just Privacy Policy) fall
   through to Blocksy's default hero. Out of the box that is a cold
   blue-grey band with the body text running the full container width —
   neither of which belongs on this site, and full-measure body text is
   particularly hard going for legal copy.

   The `ei-simple-page` body class comes from functions.php. Everything
   here is scoped to it so the six managed templates are untouched.
   ------------------------------------------------------------------ */

/* --- title band: warm, quiet, brand-consistent ---
   Blocksy's dynamic CSS sets the band with
   `[data-prefix="single_page"] .hero-section[data-type="type-2"]`
   — specificity (0,3,0), background-color #edeff2, a cold blue-grey that
   belongs to no palette on this site. A plain `.ei-simple-page
   .hero-section` is only (0,2,0) and loses, so the body element is named
   here to reach (0,3,1). That is one notch above Blocksy and nothing
   more, which is preferable to !important: the Customizer stays able to
   override it deliberately.

   Height and padding go through Blocksy's own custom properties rather
   than being fought with padding, so the two systems agree instead of
   stacking. */
body.ei-simple-page .hero-section[data-type="type-2"] {
	background-color: var(--ei-cream);
	background-image: linear-gradient(180deg, var(--ei-cream) 0%, var(--ei-ivory) 100%);
	border-bottom: var(--ei-border);
	--min-height: 0px;
	--container-padding: clamp(44px, 5.5vw, 76px) 0;
}

.ei-simple-page .hero-section .page-title {
	font-family: var(--ei-serif);
	font-weight: 600;
	color: var(--ei-ink);
	font-size: clamp(2rem, 4.2vw, 3rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-align: center;
	margin: 0;
}

/* --- the reading column ---
   Blocksy hands these pages `ct-container-full`, so the text would
   otherwise span the whole viewport. Legal copy is read line by line;
   ~68 characters is the comfortable limit. */
/* `width: min()` rather than max-width plus padding. The earlier version
   paired `max-width: 68ch` with `padding-inline: var(--ei-page-gutter)`,
   and because box-sizing is border-box site-wide the 80px gutters came
   out of the 68ch rather than sitting outside it — leaving roughly 430px
   of actual text on a wide display, which reads as a phone layout.
   min() states the measure and the small-screen inset separately, so the
   two cannot eat each other. */
.ei-simple-page .entry-content {
	width: min(76ch, 100% - 3rem);
	margin-inline: auto;
	color: var(--ei-taupe);
	font-size: 1.0625rem;
	line-height: 1.75;
}

.ei-simple-page .entry-content > * + * {
	margin-top: 1.15em;
}

/* --- headings: clear rhythm so the document can be scanned --- */
.ei-simple-page .entry-content h2 {
	font-family: var(--ei-serif);
	font-weight: 600;
	color: var(--ei-ink);
	font-size: clamp(1.35rem, 2.2vw, 1.6rem);
	line-height: 1.25;
	margin-top: 2.4em;
	margin-bottom: 0.1em;
}

/* h3 stays in the serif that section 3 enforces site-wide with
   !important — no point declaring a sans family here that would never
   apply. Separation from h2 comes from size and the absence of a rule
   beneath, not from a different typeface. */
.ei-simple-page .entry-content h3 {
	color: var(--ei-ink);
	font-size: 1.0625rem;
	margin-top: 1.9em;
	margin-bottom: 0.1em;
}

/* A rule under each h2 gives the eye a landing point in a long document
   without adding visual weight. */
.ei-simple-page .entry-content h2::after {
	content: "";
	display: block;
	width: 44px;
	height: 1px;
	margin-top: 0.55em;
	background: var(--ei-terracotta);
	opacity: 0.55;
}

/* --- lists --- */
.ei-simple-page .entry-content ul,
.ei-simple-page .entry-content ol {
	padding-left: 1.35em;
}

.ei-simple-page .entry-content li + li {
	margin-top: 0.5em;
}

.ei-simple-page .entry-content li::marker {
	color: var(--ei-terracotta);
}

/* --- links: underlined, because in a policy the link target matters --- */
.ei-simple-page .entry-content a {
	color: var(--ei-terracotta);
	text-decoration: underline;
	text-underline-offset: 0.16em;
	text-decoration-thickness: 1px;
}

.ei-simple-page .entry-content a:hover {
	color: var(--ei-terracotta-deep);
}

/* --- the "last updated" line, set as the first paragraph --- */
.ei-simple-page .entry-content .ei-legal-updated {
	font-family: var(--ei-sans);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ei-taupe);
	opacity: 0.8;
	margin-bottom: 2.2em;
}

/* --- closing contact block --- */
.ei-simple-page .entry-content .ei-legal-contact {
	margin-top: 2.6em;
	padding: 22px 26px;
	background: var(--ei-cream);
	border: var(--ei-border);
	border-radius: var(--ei-radius);
}

.ei-simple-page .entry-content .ei-legal-contact p { margin: 0; }
.ei-simple-page .entry-content .ei-legal-contact p + p { margin-top: 0.5em; }

@media (max-width: 600px) {
	.ei-simple-page .entry-content {
		font-size: 1rem;
	}
}