/*
 Theme Name:   Podo Child
 Theme URI:    https://podologas.lt
 Description:  Astra child theme for Podologas.lt — professional podology & foot-care clinic in Vilnius, Lithuania.
 Author:       Podologas
 Author URI:   https://podologas.lt
 Template:     astra
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  podo-child
*/

/* ============================================================
   GOOGLE FONTS — Manrope
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap');

/* ============================================================
   DESIGN TOKENS — CSS Custom Properties
   ============================================================ */
:root {
	/* Colors */
	--color-primary:         #1B2BA8;
	--color-primary-dark:    #0C1E7A;
	--color-accent-blue:     #2740E0;
	--color-navy:            #15205A;
	--color-secondary:       #15205A;
	--color-bg:              #F7F7F6;
	--color-bg-warm:         #EDF0FC;
	--color-bg-dark:         #15205A;
	--color-text:            #5B5B5B;
	--color-text-light:      #8A8A90;
	--color-text-strong:     #0D0D0D;
	--color-text-on-dark:    #EAEEFC;
	--color-border:          #ECECEC;
	--color-accent:          #2740E0;
	--color-gold:            #F5A623;

	/* Typography */
	--font-primary:          'Manrope', sans-serif;
	--font-size-base:        18px;
	--line-height-base:      1.65;
	--letter-spacing-body:   0.02em;

	/* Heading sizes */
	--h1-size:   56px;
	--h2-size:   42px;
	--h3-size:   28px;
	--h4-size:   22px;
	--h5-size:   18px;

	/* Heading weights (design uses medium, not bold) */
	--h1-weight: 500;
	--h2-weight: 500;
	--h3-weight: 600;
	--h4-weight: 600;
	--h5-weight: 600;

	/* Layout */
	--container-max:      1280px;
	--container-narrow:   800px;
	--section-padding:    100px 0;
	--grid-gap:           40px;

	/* Misc */
	--radius-card:   16px;
	--radius-btn:    10px;
	--transition:    0.25s ease;
	--border-base:   1px solid var(--color-border);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: var(--font-size-base);
	-webkit-text-size-adjust: 100%;
}

body {
	font-family:    var(--font-primary);
	font-size:      var(--font-size-base);
	line-height:    var(--line-height-base);
	letter-spacing: var(--letter-spacing-body);
	color:          var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing:  antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
	font-family:  var(--font-primary);
	color:        var(--color-secondary);
	line-height:  1.2;
	margin-top:   0;
	margin-bottom: 0.5em;
}

h1 {
	font-size:   var(--h1-size);
	font-weight: var(--h1-weight);
	line-height: 1.15;
}

h2 {
	font-size:   var(--h2-size);
	font-weight: var(--h2-weight);
	line-height: 1.2;
}

h3 {
	font-size:   var(--h3-size);
	font-weight: var(--h3-weight);
	line-height: 1.3;
}

h4 {
	font-size:   var(--h4-size);
	font-weight: var(--h4-weight);
}

h5 {
	font-size:   var(--h5-size);
	font-weight: var(--h5-weight);
}

h6 {
	font-size:   16px;
	font-weight: 500;
}

/* Links */
a {
	color:           var(--color-primary);
	text-decoration: none;
	transition:      color var(--transition);
}

a:hover,
a:focus {
	color:           var(--color-primary-dark);
	text-decoration: underline;
}

/* Images */
img {
	max-width:    100%;
	height:       auto;
	display:      block;
	border-style: none;
}

/* Buttons — base reset */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	font-family:   var(--font-primary);
	cursor:        pointer;
	border:        none;
	border-radius: var(--radius-btn);
}

/* Paragraphs */
p {
	margin-top:    0;
	margin-bottom: 1.25em;
}

p:last-child {
	margin-bottom: 0;
}

/* Lists */
ul, ol {
	padding-left: 1.5em;
	margin-top:   0;
	margin-bottom: 1em;
}

/* ============================================================
   ASTRA OVERRIDES
   ============================================================ */

/* Override Astra container max-width to 1280px */
.ast-container,
.ast-grid-right-sidebar .ast-content-layout-wrap,
.ast-grid-left-sidebar .ast-content-layout-wrap {
	max-width: var(--container-max);
}

.elementor-section.elementor-section-boxed > .elementor-container,
.e-con-inner {
	max-width: var(--container-max);
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

/* Primary CTA button */
.btn-primary {
	display:         inline-block;
	background:      var(--color-primary);
	color:           #fff;
	font-family:     var(--font-primary);
	font-size:       15px;
	font-weight:     600;
	letter-spacing:  0.05em;
	text-transform:  uppercase;
	padding:         14px 32px;
	border-radius:   var(--radius-btn);
	border:          2px solid var(--color-primary);
	text-decoration: none;
	transition:      background var(--transition), border-color var(--transition), color var(--transition);
	cursor:          pointer;
}

.btn-primary:hover,
.btn-primary:focus {
	background:      var(--color-primary-dark);
	border-color:    var(--color-primary-dark);
	color:           #fff;
	text-decoration: none;
}

/* Outline button */
.btn-outline {
	display:         inline-block;
	background:      transparent;
	color:           var(--color-primary);
	font-family:     var(--font-primary);
	font-size:       15px;
	font-weight:     600;
	letter-spacing:  0.05em;
	text-transform:  uppercase;
	padding:         12px 30px;
	border-radius:   var(--radius-btn);
	border:          2px solid var(--color-primary);
	text-decoration: none;
	transition:      background var(--transition), color var(--transition);
	cursor:          pointer;
}

.btn-outline:hover,
.btn-outline:focus {
	background:      var(--color-primary);
	color:           #fff;
	text-decoration: none;
}

/* Section label — small uppercase text above headings */
.section-label {
	display:         block;
	font-size:       12px;
	font-weight:     600;
	letter-spacing:  0.14em;
	text-transform:  uppercase;
	color:           var(--color-primary);
	margin-bottom:   12px;
}

/* Text alignment */
.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

/* Narrow container — centered, max 800px */
.container-narrow {
	max-width:    var(--container-narrow);
	margin-left:  auto;
	margin-right: auto;
	width:        100%;
}

/* ============================================================
   RESPONSIVE SECTION PADDING
   ============================================================ */

/* Tablet — ≤ 1024px */
@media (max-width: 1024px) {
	:root {
		--h1-size: 44px;
		--h2-size: 34px;
		--h3-size: 24px;
	}

	.section-padding,
	.elementor-section.section-padding {
		padding-top:    64px;
		padding-bottom: 64px;
	}
}

/* Mobile — ≤ 768px */
@media (max-width: 768px) {
	:root {
		--font-size-base: 16px;
		--h1-size: 34px;
		--h2-size: 28px;
		--h3-size: 22px;
		--h4-size: 18px;
		--grid-gap: 24px;
	}

	.section-padding,
	.elementor-section.section-padding {
		padding-top:    48px;
		padding-bottom: 48px;
	}

	.btn-primary,
	.btn-outline {
		padding: 12px 24px;
		font-size: 14px;
	}
}