/*
Theme Name: LaraMol
Theme URI: https://laramol.com
Author: Lara Mol
Author URI: https://laramol.com
Description: Custom single-page WordPress theme for LaraMol.com, a freelance copywriter site. Built with Bootstrap 5 (CDN) for grid/layout and hand-tuned custom CSS for typography, color and spacing.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: laramol
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	--lm-ivory: #FAF6EF;
	--lm-olive: #9C6F62;
	--lm-olive-tint: #EFE1DA;
	--lm-terra: #9C6F62;
	--lm-terra-tint: #EFE1DA;
	--lm-ink: #342F28;
	--lm-muted: #8A8577;
	--lm-border: #E3DCCC;
	--lm-border-soft: #D6D9C9;
	--lm-dot-inactive: #D6CBB8;

	--lm-font-serif: 'Newsreader', Georgia, serif;
	--lm-font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--lm-eyebrow-size: 14px;
	--lm-eyebrow-tracking: 0.1em;

	--lm-radius-sm: 10px;
	--lm-radius-md: 14px;
	--lm-radius-pill: 999px;

	--lm-container-max: 1040px;
	--lm-section-space: 60px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	background: var(--lm-ivory);
	color: var(--lm-ink);
	font-family: var(--lm-font-sans);
	overflow-x: hidden;
}

a {
	color: inherit;
}

img {
	max-width: 100%;
	height: auto;
}

/* Bootstrap's .container is used for layout, but the design calls for a
   narrower 1040px reading column than Bootstrap's default breakpoints. */
.lm-container {
	max-width: var(--lm-container-max);
}

.lm-section {
	padding: var(--lm-section-space) 0;
	scroll-margin-top: 24px;
}

.lm-section-tint {
	background: var(--lm-olive-tint);
}

/* ==========================================================================
   3. Typography helpers
   ========================================================================== */
   
.logged-in .lm-header {
    margin-top: 32px;
}
.lm-header {
	background: var(--lm-ivory);
}
.lm-eyebrow {
	font-family: var(--lm-font-sans);
	font-size: var(--lm-eyebrow-size);
	font-weight: 500;
	letter-spacing: var(--lm-eyebrow-tracking);
	text-transform: uppercase;
	color: var(--lm-olive);
	opacity: .75;
	margin: 0 0 16px;
}

.lm-heading-lg {
	font-family: var(--lm-font-serif);
	font-weight: 500;
	font-size: 44px;
	line-height: 1.25;
	margin: 0 0 20px;
	white-space: pre-line;
}

.lm-heading-md {
	font-family: var(--lm-font-serif);
	font-weight: 500;
	font-size: 27px;
	margin: 0 0 28px;
}

.lm-heading-sm {
	font-family: var(--lm-font-serif);
	font-weight: 500;
	font-size: 20px;
	margin: 0;
}

.lm-body-serif {
	font-family: var(--lm-font-serif);
	font-size: 18px;
	line-height: 1.8;
	color: var(--lm-ink);
	opacity: .85;
}

.lm-body-serif-lg {
	font-family: var(--lm-font-serif);
	font-size: 20px;
	line-height: 1.8;
	color: var(--lm-ink);
	opacity: .85;
}

.lm-body-sans {
	font-family: var(--lm-font-sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--lm-ink);
	opacity: .75;
}

.lm-logo {
	font-family: var(--lm-font-serif);
	font-size: 28px;
	text-decoration: none;
	color: var(--lm-ink);
}

/* ==========================================================================
   4. Navigation
   ========================================================================== */

.lm-nav {
	padding: 20px 0;
}

.lm-nav-links {
	font-family: var(--lm-font-sans);
	font-size: 18px;
}

.lm-nav-links a,
.lm-nav-links button.lm-nav-link {
	text-decoration: none;
	color: var(--lm-ink);
	background: none;
	border: 0;
	font: inherit;
	padding: 0;
	cursor: pointer;
}

.lm-lang-switch {
	color: var(--lm-muted);
	font-size: 18px;
	white-space: nowrap;
}

.lm-lang-btn {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--lm-muted);
	text-decoration: none;
	cursor: pointer;
}

a.lm-lang-btn:hover {
	color: var(--lm-ink);
}

.lm-lang-btn[aria-current="page"] {
	color: var(--lm-ink);
	font-weight: 600;
	cursor: default;
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.lm-btn {
	font-family: var(--lm-font-sans);
	display: inline-block;
	background: var(--lm-olive);
	color: var(--lm-ivory);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.03em;
	padding: 16px 30px;
	border-radius: var(--lm-radius-pill);
	text-decoration: none;
	border: 0;
}

.lm-btn:hover {
	background: #86594e;
	color: var(--lm-ivory);
}

.lm-link-underline {
	font-size: 16px;
	color: var(--lm-ink);
	text-decoration: none;
	border-bottom: 1px solid rgba(156, 111, 98, .5);
	padding-bottom: 3px;
	background: none;
	border-left: 0;
	border-right: 0;
	border-top: 0;
	font-family: var(--lm-font-sans);
	cursor: pointer;
}

/* ==========================================================================
   6. Hero
   ========================================================================== */

.lm-hero {
	margin-top: 110px;
	padding: 20px 0 70px;
}

.lm-hero-photo img {
	border-radius: var(--lm-radius-md);
	width: 100%;
	height: 480px;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   7. Services accordion
   ========================================================================== */

.lm-accordion .accordion-item {
	background: transparent;
	border: 0;
	border-bottom: .5px solid var(--lm-border-soft);
	border-radius: 0;
}

.lm-accordion .accordion-item:last-child {
	border-bottom: 0;
}

.lm-accordion .accordion-button {
	font-family: var(--lm-font-serif);
	font-size: 20px;
	color: var(--lm-ink);
	background: transparent;
	padding: 18px 0;
	box-shadow: none;
}

.lm-accordion .accordion-button:not(.collapsed) {
	background: transparent;
	color: var(--lm-ink);
	box-shadow: none;
}

.lm-accordion .accordion-button::after {
	display: none;
}

.lm-accordion .accordion-symbol {
	font-family: var(--lm-font-sans);
	color: var(--lm-terra);
	font-size: 18px;
	margin-left: 14px;
}

.lm-accordion .accordion-body {
	font-family: var(--lm-font-sans);
	font-size: 18px;
	line-height: 1.6;
	color: var(--lm-ink);
	opacity: .75;
	padding: 0 0 18px;
}

.lm-language-note {
	font-family: var(--lm-font-sans);
	font-size: 16px;
	color: var(--lm-muted);
	margin: 24px 0 0;
}

/* ==========================================================================
   8. How-I-work split section
   ========================================================================== */

.lm-split {
	padding: 90px 0;
	scroll-margin-top: 24px;
}

.lm-split-photo img {
	border-radius: var(--lm-radius-md);
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   9. Portfolio carousel
   ========================================================================== */

.lm-portfolio-card {
	background: var(--lm-ivory);
	border: .5px solid var(--lm-border);
	border-radius: var(--lm-radius-sm);
	overflow: hidden;
}

.lm-portfolio-media {
	min-height: 300px;
	background-size: cover;
	background-position: center;
	background-color: var(--lm-olive-tint);
	display: flex;
	align-items: center;
	justify-content: center;
}

.lm-portfolio-media .lm-noimg {
	color: var(--lm-muted);
	font-family: var(--lm-font-sans);
	font-size: 14px;
}

.lm-portfolio-body {
	padding: 40px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	justify-content: center;
}

.lm-portfolio-tag {
	font-family: var(--lm-font-sans);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lm-terra);
	margin: 0;
}

.lm-portfolio-title {
	font-family: var(--lm-font-serif);
	font-weight: 500;
	font-size: 23px;
	margin: 0;
}

.lm-portfolio-desc {
	font-family: var(--lm-font-sans);
	font-size: 18px;
	line-height: 1.65;
	opacity: .75;
	margin: 0;
}

.lm-portfolio-link {
	font-family: var(--lm-font-sans);
	font-size: 18px;
	color: var(--lm-olive);
	text-decoration: none;
	border-bottom: 1px solid rgba(156, 111, 98, .4);
	align-self: flex-start;
	padding-bottom: 2px;
	margin-top: 8px;
}

/* Shared "dots + arrow" slider controls, used by both carousels */

.lm-slider-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 20px;
}

.lm-slider-dots {
	display: flex;
	gap: 8px;
}

.lm-slider-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	cursor: pointer;
	background: var(--lm-dot-inactive);
	display: inline-block;
}

.lm-slider-dot.is-active {
	background: var(--lm-olive);
}

.lm-slider-arrows {
	display: flex;
	gap: 14px;
}

.lm-slider-arrow {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: .5px solid #D6CBB8;
	background: var(--lm-ivory);
	color: var(--lm-ink);
	font-size: 16px;
	cursor: pointer;
	line-height: 1;
}

/* ==========================================================================
   10. Testimonials carousel
   ========================================================================== */

.lm-testimonial {
	max-width: 640px;
	margin: 44px auto 0;
	text-align: center;
}

.lm-testimonial-quote {
	font-family: var(--lm-font-serif);
	font-style: italic;
	font-size: 20px;
	line-height: 1.65;
	color: var(--lm-ink);
	margin: 0 0 6px;
}

.lm-testimonial-more p {
	font-family: var(--lm-font-serif);
	font-size: 15px;
	line-height: 1.75;
	color: var(--lm-ink);
	opacity: .8;
	text-align: left;
	margin: 0 0 16px;
}

.lm-testimonial-author {
	font-family: var(--lm-font-sans);
	font-size: 18px;
	color: var(--lm-muted);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.lm-testimonial-toggle {
	font-family: var(--lm-font-sans);
	font-size: 18px;
	font-weight: 500;
	color: var(--lm-olive);
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
	text-decoration: underline;
	margin-top: 10px;
}

.lm-testimonial .lm-slider-controls {
	justify-content: center;
	gap: 20px;
}

.lm-testimonial .lm-slider-arrow {
	width: 34px;
	height: 34px;
	border: .5px solid #C9AF9F;
	background: transparent;
	font-size: 15px;
}

/* ==========================================================================
   11. About / Contact split sections
   ========================================================================== */

.lm-page-heading {
	font-family: var(--lm-font-serif);
	font-weight: 500;
	font-size: 33px;
	margin: 0 0 24px;
}

.lm-page-heading-lg {
	font-family: var(--lm-font-serif);
	font-weight: 500;
	font-size: 30px;
	line-height: 1.35;
	margin: 0 0 24px;
	white-space: pre-line;
}

.lm-about-photo img,
.lm-contact-photo img {
	border-radius: var(--lm-radius-md);
	width: 100%;
	object-fit: cover;
	display: block;
}

.lm-about-photo img {
	height: 560px;
}

.lm-contact-photo img {
	height: 340px;
}

.lm-contact-email {
	font-family: var(--lm-font-serif);
	font-size: 20px;
	margin: 0 0 10px;
}

.lm-contact-email a {
	color: var(--lm-olive);
	text-decoration: none;
	border-bottom: 1px solid rgba(156, 111, 98, .4);
}

.lm-contact-location {
	font-family: var(--lm-font-sans);
	font-size: 16px;
	color: var(--lm-muted);
	margin: 0 0 24px;
}

.lm-contact-rates {
	font-family: var(--lm-font-sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--lm-muted);
	margin: 0;
	max-width: 380px;
}

/* ==========================================================================
   12. Footer
   ========================================================================== */

.lm-footer {
	background: var(--lm-ink);
	color: var(--lm-ivory);
	padding: 76px 0 32px;
}

.lm-footer h3 {
	font-family: var(--lm-font-sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--lm-ivory);
	opacity: .9;
	margin: 0 0 18px;
}

.lm-footer .lm-flinks {
	font-family: var(--lm-font-sans);
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.lm-footer .lm-flinks a,
.lm-footer .lm-flinks button {
	color: var(--lm-ivory);
	opacity: .85;
	font-size: 16px;
	text-decoration: none;
	background: none;
	border: 0;
	padding: 0;
	text-align: left;
	font-family: var(--lm-font-sans);
	cursor: pointer;
}

.lm-footer .lm-flinks span {
	font-size: 16px;
	opacity: .7;
}

.lm-footer-logo {
	font-family: var(--lm-font-serif);
	font-size: 20px;
	margin-bottom: 6px;
}

.lm-footer-kicker {
	font-size: 14px;
	letter-spacing: 2px;
	color: var(--lm-terra);
	text-transform: uppercase;
	margin-bottom: 6px;
}

.lm-footer-tagline {
	font-family: var(--lm-font-serif);
	font-style: italic;
	font-size: 18px;
	line-height: 1.6;
	opacity: .85;
	margin: 18px 0 0;
}

.lm-footer-bottom {
	font-family: var(--lm-font-sans);
	border-top: 1px solid rgba(250, 246, 239, .18);
	margin-top: 40px;
	padding-top: 18px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	font-size: 14px;
	opacity: .6;
}

/* ==========================================================================
   13. Responsive tweaks (mirrors the original template's mobile behaviour)
   ========================================================================== */

@media (max-width: 767.98px) {
	.lm-heading-lg {
		font-size: 30px;
	}

	.lm-hero-photo img {
		height: 320px;
	}

	.lm-section {
		padding: 40px 0;
	}

	.lm-split {
		padding: 50px 0;
	}

	.lm-about-photo img {
		height: 340px;
	}

	.lm-contact-photo img {
		height: 260px;
	}

	.lm-portfolio-media {
		min-height: 0;
		height: 220px;
	}

	.lm-footer-row {
		text-align: center;
		justify-content: center !important;
	}
}

@media (max-width: 575.98px) {
	.lm-nav-links {
		gap: 16px !important;
	}
}