/* ==========================================================================
   SmallCrowd brand overrides for the CrowdSource theme.
   Loaded after the parent's main.css + inline dynamic-css, so these win.
   Paths are relative to this file (assets/css/).
   ========================================================================== */

/* ---- Loubag — brand display face (self-hosted) ---- */
@font-face { font-family:'Loubag'; src:url('../fonts/Loubag-Thin.ttf') format('truetype');       font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:'Loubag'; src:url('../fonts/Loubag-Light.ttf') format('truetype');      font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Loubag'; src:url('../fonts/Loubag-Regular.ttf') format('truetype');    font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Loubag'; src:url('../fonts/Loubag-Medium.ttf') format('truetype');     font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Loubag'; src:url('../fonts/Loubag-SemiBold.ttf') format('truetype');   font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Loubag'; src:url('../fonts/Loubag-Bold.ttf') format('truetype');       font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Loubag'; src:url('../fonts/Loubag-ExtraBold.ttf') format('truetype');  font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Loubag'; src:url('../fonts/Loubag-Black.ttf') format('truetype');      font-weight:900; font-style:normal; font-display:swap; }

/* --------------------------------------------------------------------------
   1. Token overrides — remap the theme's custom properties to the SmallCrowd brand
   -------------------------------------------------------------------------- */
:root {
	/* brand palette → theme color slots */
	--color-primary:   #2A9D8F;   /* persian green — buttons, links, accents   */
	--color-secondary: #E9C46A;   /* saffron gold  — secondary buttons / accents */
	--color-tertiary:  #E76F51;   /* coral         — callouts / tags            */
	--color-bg:        #FFFFFF;
	--color-surface:   #FEFAE0;   /* cream         — services band, blockquotes  */
	--color-text:      #4B6068;
	--color-heading:   #264653;   /* deep teal ink */

	/* type */
	--font-heading:    'Loubag', Georgia, 'Times New Roman', serif;
	--font-secondary:  'Loubag', Georgia, serif;
	--font-body:       'Arimo', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
	--heading-weight:  700;
	--radius:          16px;

	/* chrome */
	--header-bg:       #FFFFFF;
	--header-text:     #264653;
	--footer-bg:       #1B333D;
	--footer-text:     rgba(254,250,224,.70);
	--footer-heading:  #E9C46A;

	/* local brand tokens */
	--sc-teal: #264653;
	--sc-cream: #FEFAE0;
	--sc-green-dark: #1F7A6E;
}

body { line-height: 1.65; }

/* Headings carry Loubag's character — ease the parent's tight tracking */
h1, h2, h3, h4, h5, h6,
.hero-headline, .cta-title, .section-title, .site-title {
	font-family: var(--font-heading);
	letter-spacing: -0.005em;
}

/* --------------------------------------------------------------------------
   2. Hero — golden halftone over teal + radial protection gradient
   -------------------------------------------------------------------------- */
.hero-section {
	background-color: var(--sc-teal);
	background-image: url('../img/texture-halftone.jpg');
	background-size: 560px;
	background-position: top center;
	background-repeat: repeat;
}
/* protection gradient: radial teal wash keeps the headline readable over the dots */
.hero-section::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 82% 78% at 30% 50%,
		rgba(38,70,83,.93) 0%, rgba(38,70,83,.55) 46%, rgba(38,70,83,0) 80%);
	pointer-events: none;
	z-index: 0;
}
.hero-section .container { position: relative; z-index: 1; }
.hero-headline { color: var(--sc-cream); }
.hero-headline em, .hero-headline b, .hero-headline strong { color: var(--color-secondary); font-style: normal; }
.hero-subtext { color: rgba(254,250,224,.82); }

/* Hero primary button: solid white pill with green label (reads on teal) */
.btn-hero-primary { color: var(--color-primary); border-radius: 999px; }
.btn-hero-secondary { border-radius: 999px; }

/* --------------------------------------------------------------------------
   3. Buttons — neutralise the parent's hardcoded indigo states
   -------------------------------------------------------------------------- */
.btn { border-radius: var(--radius); font-family: var(--font-body); }
.btn-primary { background-color: var(--color-primary); color: #fff; box-shadow: 0 6px 18px rgba(42,157,143,.26); }
.btn-primary:hover {
	background-color: var(--sc-green-dark);
	color: #fff;
	box-shadow: 0 10px 26px rgba(42,157,143,.36);
}
.btn-secondary { background-color: var(--color-secondary); color: var(--sc-teal); }
.btn-secondary:hover { background-color: #DDB04A; color: var(--sc-teal); }
.btn-outline { border-color: var(--color-primary); color: var(--color-primary); }
.btn-outline:hover { background-color: var(--color-primary); color: #fff; }
.btn-cta, .btn-hero-primary:hover { color: var(--color-primary); }

/* pill-ify primary CTAs for the brand feel */
.hero-actions .btn, .cta-inner .btn { border-radius: 999px; }

/* --------------------------------------------------------------------------
   4. Cards & services
   -------------------------------------------------------------------------- */
.card, .service-card {
	border: 1px solid #E6E0C8;
	border-radius: 24px;
	box-shadow: 0 1px 2px rgba(38,70,83,.06);
}
.card:hover, .service-card:hover {
	box-shadow: 0 16px 40px rgba(38,70,83,.13);
	transform: translateY(-3px);
}
.services-section { background: var(--color-surface); }
.service-icon { color: var(--color-primary); }
.service-title { font-family: var(--font-heading); font-size: 1.375rem; }

/* blockquotes / links pick up the brand automatically via the tokens above */
a:hover { color: var(--sc-green-dark); }

/* --------------------------------------------------------------------------
   5. CTA band — teal + halftone + protection gradient (matches the hero)
   -------------------------------------------------------------------------- */
.cta-section {
	position: relative;
	background: var(--sc-teal);
	background-image: url('../img/texture-halftone.jpg');
	background-size: 520px;
	background-position: center;
	background-repeat: repeat;
	overflow: hidden;
}
.cta-section::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 70% 82% at 50% 50%,
		rgba(38,70,83,.93) 0%, rgba(38,70,83,.5) 48%, rgba(38,70,83,0) 80%);
	pointer-events: none;
	z-index: 0;
}
.cta-section .container { position: relative; z-index: 1; }
.cta-title { color: var(--sc-cream); }
.cta-title em, .cta-title strong { color: var(--color-secondary); font-style: normal; }
.cta-text { color: rgba(254,250,224,.85); }

/* --------------------------------------------------------------------------
   6. Footer — deep teal with a soft halftone wash along the bottom
   -------------------------------------------------------------------------- */
.site-footer {
	position: relative;
	background-image: url('../img/texture-halftone.jpg');
	background-size: 600px;
	background-position: bottom center;
	background-repeat: repeat-x;
	overflow: hidden;
}
.site-footer::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, #1B333D 28%, rgba(27,51,61,.55) 100%);
	pointer-events: none;
	z-index: 0;
}
.site-footer > * { position: relative; z-index: 1; }