/*
 Theme Name:   Tripster Child – Romania DualSport
 Theme URI:    /
 Description:  Child theme for Tripster with the Romania DualSport look: warm sand, slate and ember colors, Archivo + IBM Plex Mono, square monospace buttons.
 Author:       Dragos Barascu
 Template:     tripster
 Version:      1.1
 Text Domain:  tripster
*/

/* =========================================================
   1. DESIGN TOKENS  – change colors/fonts here only
   ========================================================= */
:root {
	--rds-paper:    #f1ebe0;  /* page background        */
	--rds-paper-2:  #e5ddcf;  /* cards, alt sections    */
	--rds-ink:      #14181c;  /* text, headings         */
	--rds-slate:    #1d2a30;  /* dark sections, header  */
	--rds-lichen:   #56634f;  /* muted green            */
	--rds-stone:    #a49e92;  /* muted text             */
	--rds-ember:    #e2601a;  /* accent / buttons       */
	--rds-ember-dk: #b94c12;  /* accent hover           */
	--rds-glacier:  #3d7f9a;  /* dates, meta            */

	--rds-sans: "Archivo", system-ui, sans-serif;
	--rds-mono: "IBM Plex Mono", ui-monospace, monospace;
}

/* =========================================================
   2. BASE
   ========================================================= */
body.scheme_default,
.scheme_default body,
.scheme_default .page_wrap,
.scheme_default .content_wrap,
.scheme_default .page_content_wrap {
	background-color: var(--rds-paper) !important;
}
body,
body.scheme_default {
	font-family: var(--rds-sans) !important;
	color: var(--rds-ink);
	-webkit-font-smoothing: antialiased;
}
body p, body li, body input, body textarea, body select {
	font-family: var(--rds-sans);
}

/* Headings – heavy, tight, like Baldinger */
body h1, body h2, body h3, body h4, body h5, body h6,
body .elementor-heading-title,
body .post_title, body .entry-title, body .sc_item_title {
	font-family: var(--rds-sans) !important;
	font-weight: 900 !important;
	letter-spacing: -0.035em !important;
	line-height: 1.02 !important;
	color: var(--rds-ink);
}
body h4, body h5, body h6 { font-weight: 800 !important; letter-spacing: -0.02em !important; }

/* Light italic word inside a heading: wrap it in <em> in Elementor
   e.g.  Remote roads. <em>Wild Carpathians</em>  */
body h1 em, body h2 em, body h3 em,
body .elementor-heading-title em {
	font-style: italic;
	font-weight: 200 !important;
	letter-spacing: -0.03em;
}
/* Orange full stop: wrap a "." in <span class="rds-dot">.</span> */
.rds-dot { color: var(--rds-ember) !important; }

/* Links */
body a { color: inherit; }
body .post_content a:not(.sc_button):not(.elementor-button):not(.button),
body .entry-content a:not(.sc_button):not(.elementor-button):not(.button) {
	color: var(--rds-ember);
}
body .post_content a:hover, body .entry-content a:hover { color: var(--rds-ember-dk); }

/* =========================================================
   3. HEADER & MENU – monospace uppercase
   ========================================================= */
body .top_panel,
body .sc_layouts_row_type_compact,
body .sc_layouts_row_type_normal {
	background-color: var(--rds-paper) !important;
}
body .sc_layouts_menu_nav > li > a,
body .menu_main_nav > li > a,
body .sc_layouts_menu_nav > li > a > span {
	font-family: var(--rds-mono) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: var(--rds-ink) !important;
	transition: color .2s;
}
body .sc_layouts_menu_nav > li > a:hover,
body .sc_layouts_menu_nav > li.current-menu-item > a,
body .sc_layouts_menu_nav > li.current-menu-ancestor > a {
	color: var(--rds-ember) !important;
}
body .sc_layouts_menu_nav > li ul {
	background-color: var(--rds-slate) !important;
	border-radius: 0 !important;
}
body .sc_layouts_menu_nav > li li > a {
	font-family: var(--rds-mono) !important;
	font-size: 11px !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	color: var(--rds-paper) !important;
}
body .sc_layouts_menu_nav > li li > a:hover { color: var(--rds-ember) !important; }

/* =========================================================
   4. BUTTONS – square, mono, uppercase, sliding arrow
   ========================================================= */
body .sc_button,
body .sc_button_default,
body .theme_button,
body .elementor-button,
body .wp-block-button__link,
body .more-link,
body .post_item .more-link,
body .nav-links-more a,
body a.button, body button.button, body input.button,
body .woocommerce a.button, body .woocommerce button.button,
body .woocommerce input.button, body .woocommerce #respond input#submit,
body .woocommerce a.button.alt, body .woocommerce button.button.alt,
body form button:not(.components-button):not(.search_submit):not(.menu_mobile_close),
body input[type="submit"],
body input[type="button"],
body .wpcf7-submit {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--rds-mono) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	line-height: 1.2 !important;
	padding: 15px 24px !important;
	border: 1.5px solid var(--rds-ember) !important;
	border-radius: 0 !important;
	background: var(--rds-ember) !important;
	color: var(--rds-paper) !important;
	box-shadow: none !important;
	text-decoration: none !important;
	transition: background-color .2s, border-color .2s, color .2s !important;
}
body .sc_button:hover,
body .sc_button_default:hover,
body .theme_button:hover,
body .elementor-button:hover,
body .wp-block-button__link:hover,
body .more-link:hover,
body .nav-links-more a:hover,
body a.button:hover, body button.button:hover, body input.button:hover,
body .woocommerce a.button:hover, body .woocommerce button.button:hover,
body .woocommerce input.button:hover, body .woocommerce #respond input#submit:hover,
body form button:not(.components-button):not(.search_submit):not(.menu_mobile_close):hover,
body input[type="submit"]:hover,
body input[type="button"]:hover,
body .wpcf7-submit:hover {
	background: var(--rds-ember-dk) !important;
	border-color: var(--rds-ember-dk) !important;
	color: var(--rds-paper) !important;
}

/* Arrow after link-style buttons */
body .more-link::after,
body .elementor-button .elementor-button-text::after,
body .sc_button .sc_button_title::after {
	content: "→";
	display: inline-block;
	margin-left: 10px;
	transition: transform .2s;
}
body .more-link:hover::after,
body .elementor-button:hover .elementor-button-text::after,
body .sc_button:hover .sc_button_title::after {
	transform: translateX(4px);
}
/* Hide arrow on a specific button: add CSS class  rds-no-arrow  */
body .rds-no-arrow .elementor-button-text::after,
body .rds-no-arrow.more-link::after { content: none; }

/* --- Button variations: add the CSS class on the Elementor Button widget
       (Advanced → CSS Classes) --- */

/* Dark  →  rds-btn-dark */
body .rds-btn-dark .elementor-button,
body a.rds-btn-dark {
	background: var(--rds-slate) !important;
	border-color: var(--rds-slate) !important;
}
body .rds-btn-dark .elementor-button:hover,
body a.rds-btn-dark:hover {
	background: var(--rds-ember) !important;
	border-color: var(--rds-ember) !important;
}

/* Outline  →  rds-btn-outline  (on light background) */
body .rds-btn-outline .elementor-button,
body a.rds-btn-outline {
	background: transparent !important;
	border-color: var(--rds-ink) !important;
	color: var(--rds-ink) !important;
}
body .rds-btn-outline .elementor-button:hover,
body a.rds-btn-outline:hover {
	background: var(--rds-ink) !important;
	color: var(--rds-paper) !important;
}

/* Outline light  →  rds-btn-outline-light  (on photos / dark sections) */
body .rds-btn-outline-light .elementor-button,
body a.rds-btn-outline-light {
	background: transparent !important;
	border-color: var(--rds-paper) !important;
	color: var(--rds-paper) !important;
}
body .rds-btn-outline-light .elementor-button:hover,
body a.rds-btn-outline-light:hover {
	background: var(--rds-paper) !important;
	color: var(--rds-ink) !important;
}

/* Text link  →  rds-btn-link  (orange mono text + arrow, no box) */
body .rds-btn-link .elementor-button,
body a.rds-btn-link {
	background: transparent !important;
	border-color: transparent !important;
	color: var(--rds-ember) !important;
	padding: 0 !important;
	font-size: 11px !important;
	letter-spacing: 0.16em !important;
}
body .rds-btn-link .elementor-button:hover,
body a.rds-btn-link:hover {
	background: transparent !important;
	color: var(--rds-ember-dk) !important;
}

/* =========================================================
   5. LABELS / TAGS / META
   ========================================================= */
.rds-pill,
body .post_meta .post_meta_item.post_categories a,
body .post_category, body .post_categories a {
	display: inline-block;
	font-family: var(--rds-mono) !important;
	font-size: 10.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
}
.rds-pill {
	padding: 5px 10px;
	background: var(--rds-ember);
	color: var(--rds-paper) !important;
}
body .post_categories a { color: var(--rds-ember) !important; }
body .post_meta, body .post_meta_item, body .post_date {
	font-family: var(--rds-mono) !important;
	font-size: 11px !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase;
	color: var(--rds-glacier) !important;
}
/* Small orange label above headings: Heading widget with class rds-eyebrow */
.rds-eyebrow, .rds-eyebrow .elementor-heading-title {
	font-family: var(--rds-mono) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	color: var(--rds-ember) !important;
	line-height: 1.4 !important;
}

/* =========================================================
   6. CARDS / POSTS – flat, square, sand background
   ========================================================= */
body .post_item,
body .post_layout_excerpt,
body .post_layout_classic,
body .sc_blogger_item,
body .woocommerce ul.products li.product {
	border-radius: 0 !important;
	box-shadow: none !important;
}
body .post_layout_excerpt,
body .post_layout_classic,
body .sc_blogger_item {
	background: var(--rds-paper-2) !important;
	border: 0 !important;
}
body .post_featured img { border-radius: 0 !important; }

/* =========================================================
   7. FORMS
   ========================================================= */
body input[type="text"], body input[type="email"], body input[type="tel"],
body input[type="search"], body input[type="password"], body textarea, body select {
	border-radius: 0 !important;
	border: 1.5px solid var(--rds-paper-2) !important;
	background: #fff !important;
	color: var(--rds-ink) !important;
	font-family: var(--rds-sans) !important;
}
body input:focus, body textarea:focus, body select:focus {
	border-color: var(--rds-ember) !important;
	outline: none;
}

/* =========================================================
   8. FOOTER
   ========================================================= */
body .footer_wrap,
body .footer_wrap .sc_layouts_row,
body .footer_copyright_inner {
	background-color: var(--rds-ink) !important;
	color: var(--rds-stone) !important;
}
body .footer_wrap,
body .footer_wrap p,
body .footer_copyright_inner {
	font-family: var(--rds-mono) !important;
	font-size: 11px !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase;
}
body .footer_wrap a:hover { color: var(--rds-ember) !important; }

/* =========================================================
   9. WooCommerce store notice (purple bar) – match the palette
   ========================================================= */
body .woocommerce-store-notice, body p.demo_store {
	background: var(--rds-slate) !important;
	font-family: var(--rds-mono) !important;
	font-size: 11px !important;
	letter-spacing: .08em;
}
body .woocommerce-store-notice a { color: var(--rds-ember) !important; }

/* =========================================================
   10. FIXES – theme colors that override the new style
   ========================================================= */
/* Headings: near-black instead of the theme's navy */
body.scheme_default h1, body.scheme_default h2, body.scheme_default h3,
body.scheme_default h4, body.scheme_default h5, body.scheme_default h6,
body.scheme_default h1 a, body.scheme_default h2 a, body.scheme_default h3 a,
body.scheme_default h4 a, body.scheme_default h5 a, body.scheme_default h6 a {
	color: var(--rds-ink);
}
body.scheme_default h1 a:hover, body.scheme_default h2 a:hover, body.scheme_default h3 a:hover,
body.scheme_default h4 a:hover, body.scheme_default h5 a:hover, body.scheme_default h6 a:hover {
	color: var(--rds-ember);
}

/* Category tag above post titles: solid ember label instead of peach */
body .post_meta_item.post_categories a {
	background: var(--rds-ember) !important;
	color: var(--rds-paper) !important;
	padding: 5px 10px !important;
	border-radius: 0 !important;
}
body .post_meta_item.post_categories a:hover { background: var(--rds-ember-dk) !important; }

/* Footer: keep the inner wrapper transparent (no light box) */
body .footer_wrap .content_wrap,
body .footer_copyright_wrap,
body .footer_copyright_inner .content_wrap {
	background-color: transparent !important;
}
body .footer_copyright_inner .copyright_text { color: var(--rds-stone) !important; }

/* =========================================================
   11. BLOG – post list, sidebar widgets, page title bar
   ========================================================= */
/* Page title bar (blog, archives, posts) */
body .top_panel_title .sc_layouts_title_caption {
	font-size: clamp(40px, 6vw, 72px) !important;
	font-weight: 900 !important;
	letter-spacing: -0.04em !important;
	line-height: .95 !important;
}

/* Post cards in lists */
body .post_layout_excerpt {
	transition: transform .25s;
	margin-bottom: 28px !important;
}
body .post_layout_excerpt:hover { transform: translateY(-4px); }
body .post_layout_excerpt .post_featured { border-radius: 0 !important; overflow: hidden; }
body .post_layout_excerpt .post_featured img { transition: transform .5s; }
body .post_layout_excerpt:hover .post_featured img { transform: scale(1.04); }
body .post_layout_excerpt .post_header,
body .post_layout_excerpt .post_content { padding-left: 28px; padding-right: 28px; }
body .post_layout_excerpt .post_content { padding-bottom: 28px; font-size: 15.5px; color: #4a4f52; }
body .post_layout_excerpt .post_title {
	font-size: clamp(22px, 2.4vw, 30px) !important;
	letter-spacing: -0.025em !important;
}

/* Sidebar widgets: flat sand boxes, mono labels */
body .sidebar .widget {
	background: var(--rds-paper-2) !important;
	background-image: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 28px !important;
}
body .sidebar .widget_title {
	font-family: var(--rds-mono) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: .16em !important;
	text-transform: uppercase !important;
	color: var(--rds-ember) !important;
	display: flex; align-items: center; gap: 8px;
	padding-bottom: 14px !important;
}
body .sidebar .widget_title::before {
	content: ""; width: 7px; height: 7px; border-radius: 50%;
	background: var(--rds-ember); flex: none;
}
body .sidebar .widget_title::after { display: none !important; }
body .sidebar .widget ul li a { color: var(--rds-ink) !important; font-weight: 600; }
body .sidebar .widget ul li a:hover { color: var(--rds-ember) !important; }
body .sidebar .wp-calendar-table {
	border-radius: 0 !important;
	font-family: var(--rds-mono) !important;
	font-size: 12px !important;
}
body .sidebar .wp-calendar-table td#today,
body .sidebar .wp-calendar-table td a { color: var(--rds-ember) !important; }
body .sidebar .search_form,
body .sidebar .search_field { border-radius: 0 !important; }
body .sidebar .search_submit {
	background: var(--rds-ember) !important;
	border-radius: 0 !important;
	color: var(--rds-paper) !important;
}

/* =========================================================
   12. MENU SIZE – bigger, easier-to-read top menu
   ========================================================= */
body .top_panel .sc_layouts_menu_nav > li > a,
body .top_panel .sc_layouts_menu_nav > li > a > span {
	font-size: 14.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em !important;
}
body .top_panel .sc_layouts_menu_nav > li > a {
	padding-left: 12px !important;
	padding-right: 12px !important;
}
body .sc_layouts_menu_nav > li li > a { font-size: 13px !important; }
/* mobile menu */
body .menu_mobile .menu_mobile_nav_area > ul > li > a {
	font-family: var(--rds-mono) !important;
	font-size: 20px !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
}

/* ==========================================================
   13. MENU FIT (small laptops, 7 items)
   ========================================================== */
@media (min-width:1025px) and (max-width:1279px){
  body .top_panel .sc_layouts_menu_nav > li > a, body .top_panel .sc_layouts_menu_nav > li > a > span { font-size: 13px !important; letter-spacing: 0.07em !important; }
  body .top_panel .sc_layouts_menu_nav > li > a { padding-left: 8px !important; padding-right: 8px !important; }
}

/* =========================================================
   16. FOLDABLES & TABLETS (Oct 12 2026)
   Galaxy Z Fold8 / foldable iPhone: cover screens ~410–480px wide,
   inner screens ~640–960px (portrait & landscape).
   ========================================================= */
/* Desktop menu on 768–1024px screens (unfolded phones in landscape, tablets): keep it on one line */
@media (min-width: 768px) and (max-width: 1024px) {
  body .top_panel .sc_layouts_menu_nav > li > a,
  body .top_panel .sc_layouts_menu_nav > li > a > span { font-size: 11.5px !important; letter-spacing: 0.05em !important; }
  body .top_panel .sc_layouts_menu_nav > li > a { padding-left: 6px !important; padding-right: 6px !important; }
}
/* Currency / store notice: a slim bar at the bottom instead of covering the logo and menu */
body p.woocommerce-store-notice, body p.demo_store {
  position: fixed !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
  margin: 0 !important; z-index: 99998; padding: 10px 16px !important; width: auto !important; box-sizing: border-box !important;
  background: #14181c !important; color: #f1ebe0 !important;
  font: 500 12px/1.5 'IBM Plex Mono', monospace !important; text-align: center; box-shadow: none !important;
}
body p.woocommerce-store-notice a { color: #e2601a !important; text-decoration: underline; }
body p.woocommerce-store-notice a.woocommerce-store-notice__dismiss-link { float: none !important; margin-left: 10px; }
/* Home hero: keep the small intro text readable over the bright sky on narrow and short screens */
.elementor-element-1487485 p, .elementor-element-1487485 .rds-eyebrow { text-shadow: 0 1px 10px rgba(0,0,0,.6); }