/* sobearad.ro */

@import url("../fonts/source-sans-3.css");

:root {
	--max-width: 1024px;
	--max-width-medium: 960px;
	--max-width-small: 768px;
	
	--padding: 1.2rem;
	
	--text-color: #232323;
	--accent-color: #5e0000;
	--accent-color-hover: #a82828;
	
	--color-primary: #793218;
	
	--bg-primary: #faf6f3;
	--bg-light: #f0f2eb;
	
	--font-size: 16px;
	
	--font-family-default: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
	--font-family-source-sans-3: 'Source Sans 3';
	--font-in-use: var(--font-family-source-sans-3);
}

:root {
	/* --- Paletă principală (teracotă / sobă) --- */
	--color-primary-700: #8A3D22;    /* variantă închisă */
	--color-primary-300: #D18C6E;    /* variantă deschisă */
	--color-on-primary: #FFFFFF;     /* text pe fundal primary */

	/* --- Accente și variante naturale --- */
	--color-secondary: #553E2C;      /* lemn / cadru */
	--color-accent: #D9B44A;         /* auriu cald - accente: butoane, linkuri */
	--color-accent-700: #B58E35;

	/* --- Neutrale / fundaluri --- */
	--color-bg: #FBF7F3;             /* fundal principal, crem deschis */
	--color-surface: #F2ECE7;        /* carduri / blocuri */
	--color-muted: #E6DED6;          /* linii, borduri subtile */
	--color-text: #222222;           /* text principal (contrast bun) */
	--color-text-muted: #6B6B6B;     /* text secundar / meta */

	/* --- Funingine / elemente închise --- */
	--color-dark: #111111;           /* aproape negru pentru footer, header */
	--color-dark-700: #222222;

	/* --- Culori semantice --- */
	--color-success: #2F9A58;        /* succes / confirmare */
	--color-warning: #D97706;        /* atenționare / alert */
	--color-danger:  #C0392B;        /* eroare / pericol */
	--color-info:    #1E90FF;        /* informație / link secundar */

	/* --- Accente suplimentare / microinteracțiuni --- */
	--color-focus: #FCCB6B;          /* outline focus (vizibil, cald) */
	--color-hover: rgba(166,75,42,0.08); /* hover subtil pe elemente */

	/* --- Gradiente opționale --- */
	--gradient-primary: linear-gradient(135deg, #A64B2A 0%, #D18C6E 100%);
	--gradient-accent: linear-gradient(90deg, #D9B44A 0%, #B58E35 100%);
}


/* --RESET */

*, *::before, *::after {
	box-sizing: border-box;
}

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

html {
	padding: 0;
	margin: 0;
	font-size: var(--font-size);
}

body {
	font-family: var(--font-in-use);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--text-color);
	background-color: #fff;
	padding: 0;
	margin: 0;
}

.wrap {
	max-width: var(--max-width);
	margin-inline: auto;
	padding: var(--padding);
}

/* --TYPOGRAPHY  */

h1, .like-h1 {
	font-size: clamp(2.2rem, 1.545rem + 3.273vw, 4rem);
	line-height: 1;
	letter-spacing: -2px;
	margin: 1em 0 1em 0;
}

h2, .like-h2, h3, .like-h3 {
	font-weight: 600;
	letter-spacing: -1px;
	margin: 1em 0 1em 0;
	line-height: 1.1;
}

h2, .like-h2 {
	font-size: clamp(2rem, 1.636rem + 1.818vw, 3rem);
	letter-spacing: -2px;
}

h3, .like-h3 {
	font-size: clamp(1.2rem, 1rem + 1.091vw, 1.8rem);
	color: var(--accent-color);
}

/* --HEADER */

header.top-header {
	background: var(--bg-primary);
}

.header-wrap {
	max-width: var(--max-width);
	margin-inline: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

/* Page header */

header.page-header {
	padding-block: 2.5rem;
}

.before-title {
	text-transform: uppercase;
	font-size: 1rem;
	opacity: .8;
}

.header-title {
	margin: 0;
	line-height: 1.1;
	text-wrap: balance;
}

.breadcrumb {
	margin-block: 1rem;
}

.breadcrumb a {
	text-decoration: none;
	color: inherit;
}

.breadcrumb a:hover {
	text-decoration: underline;
}

.curent-item {
	opacity: .5;
}

/* Logo */

.logo {
	font-size: 1.6rem;
	font-weight: 700;
	margin-inline: var(--padding);
	margin-block: var(--padding);
}

.logo a {
	text-decoration: none;
	color: inherit;
}

/* --NAVIGATION */

ul.main-menu {
	list-style: none;
	padding-left: 0;
	display: flex;
	padding-inline: var(--padding);
}

ul.main-menu a {
	text-decoration: none;
	color: inherit;
	text-transform: uppercase;
	padding: 1rem .8rem;
}

ul.main-menu a.active {
	color: red;
}

/* Submeniu */

ul.main-menu li.has-submenu {position: relative;}

ul.submenu {
	display: none;
}

ul.main-menu li.has-submenu:hover ul.submenu {
	display: block;
	position: absolute;
	/* left: -1rem; */
	list-style: none;
	padding: 0;
	padding-top: 10px;
}

ul.submenu li {
	background: var(--color-primary);
	display: block;
	width: 250px;
	max-width: 250px;
	border-bottom: 1px solid rgba(250, 250, 250, .1);
}

ul.submenu li a {
	display: block;
	line-height: 1.2;
	width: 100%;
	color: #FFF;
	text-decoration: none;
	padding: .8rem 1rem;
}

ul.submenu li a.active,
ul.submenu li a:hover {
	color: #FFF;
	background: rgba(0, 0, 0, .3);
}

.ham {
	text-indent: -9999px;
	width: 32px;
	height: 32px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' fill='%23444444'%3E%3Cpath d='M4.792 30.292v-3.125h30.416v3.125Zm0-8.709v-3.166h30.416v3.166Zm0-8.75V9.667h30.416v3.166Z'/%3E%3C/svg%3E");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	transform: scale(1, 1);
	transition: all .3s;
	margin-inline: var(--padding);
}

.ham:hover {
	transform: scale(1.1, 1.1);
}

.ham.ham-close {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='40' fill='%23444444'%3E%3Cpath d='M10.458 31.75 8.25 29.542 17.792 20 8.25 10.458l2.208-2.208L20 17.792l9.542-9.542 2.208 2.208L22.208 20l9.542 9.542-2.208 2.208L20 22.208Z'/%3E%3C/svg%3E");
}

.ham {display: none;}

@media only screen and (max-width: 800px) {
	.ham {display: block;}
	ul.main-menu {display: none;}
	ul.main-menu.is-visible {
		display: flex;
		flex-direction: column;
		width: 100%;
		/* background: rgba(0, 0, 0, .1); */
	}
	
	ul.submenu {
		display: flex;
		flex-direction: column;
		position: relative;
		width: 100%;
		padding-top: 0;
	}
}/* 800px */

/* CARDS */

.section-servicii {
	padding-block: 2rem;
	background: var(--bg-light);
}

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	gap: 30px;
	align-content: center;
}

.card {
	max-width: 500px;
	background: #FFF;
	padding-bottom: 2rem;
}

.card-img {
	display: block;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.card-content {
	padding: 0 1.2rem 1.2rem;
}

.card a.card-button {
	text-decoration: none;
	color: #FFF;
	background: var(--accent-color);
	padding: .5rem 1.2rem;
	transition: all .3s;
	margin-left: 1.2rem;
	margin-bottom: 1.2rem;
}

.card a.card-button:hover {
	background: var(--accent-color-hover);
}