/*
Theme Name: OceanWP Child Theme
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme. Sample child theme.
Author: OceanWP
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */

/* -------------------------------------------------
   1. Brand variables
   ------------------------------------------------- */
:root {
	--sp-ink: #1E3F91;      /* primary blue, from the logo */
	--sp-accent: #C6472F;   /* terracotta accent */
	--sp-cream: #EFE5CF;    /* warm background */
	--sp-paper: #FBF6EA;    /* near-white surface */
	--sp-text: #2A2A28;     /* body text, soft black */
	--sp-border: #E3D8BE;   /* hairline borders on cream */
	--sp-radius: 6px;
	--sp-max-width: 1180px;
}

/* -------------------------------------------------
   2. Base / typography
   ------------------------------------------------- */
body {
	background: var(--sp-cream);
	color: var(--sp-text);
	font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 17px;
	line-height: 1.7;
	letter-spacing: 0.1px;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title {
	font-family: 'Playfair Display', Georgia, serif;
	color: var(--sp-ink);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

h1, .entry-title { font-weight: 700; }

a {
	color: var(--sp-ink);
	text-decoration: none;
	transition: color 0.15s ease;
}

a:hover,
a:focus {
	color: var(--sp-accent);
}

::selection {
	background: var(--sp-accent);
	color: #fff;
}

/* -------------------------------------------------
   3. Layout — strip visual noise, add breathing room
   ------------------------------------------------- */
#wrap,
.container {
	max-width: var(--sp-max-width);
}

.content-area,
#content {
	padding-top: 60px;
	padding-bottom: 60px;
}

.entry-content,
.widget,
.woocommerce ul.products li.product,
.comment-form,
#comments {
	box-shadow: none !important;
	border: none !important;
}

.entry-content hr,
#footer-widgets {
	border-top: 1px solid var(--sp-border);
}

/* -------------------------------------------------
   4. Header
   ------------------------------------------------- */
#site-header,
.header-bottom,
.header-top {
	background: var(--sp-paper) !important;
	border-bottom: 1px solid var(--sp-border);
}

.site-logo-img,
#logo {
	max-height: 44px;
}

.main-nav ul li a {
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.02em;
	color: var(--sp-ink);
}

.main-nav ul li a:hover {
	color: var(--sp-accent);
}

/* -------------------------------------------------
   5. Buttons
   ------------------------------------------------- */
.button,
button,
input[type="submit"],
.wp-block-button__link {
	background: var(--sp-ink);
	border: none;
	border-radius: var(--sp-radius);
	color: #fff;
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 12px 26px;
	transition: background 0.15s ease, transform 0.15s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
	background: var(--sp-accent);
	color: #fff;
	transform: translateY(-1px);
}

/* -------------------------------------------------
   6. Cards / post grid
   ------------------------------------------------- */
.blog-entry,
.ocean-post-item {
	background: var(--sp-paper);
	border-radius: var(--sp-radius);
	overflow: hidden;
}

.blog-entry img,
.ocean-post-item img {
	border-radius: var(--sp-radius) var(--sp-radius) 0 0;
}

/* -------------------------------------------------
   7. Footer
   ------------------------------------------------- */
#footer,
#footer-widgets,
#footer-bottom,
#footer-bottom-inner,
#copyright {
	background-color: var(--sp-ink) !important;
	color: var(--sp-cream) !important;
}

#footer-bottom,
#footer-bottom-inner,
#copyright {
	background-color: #17306e !important;
}

#footer a,
#footer-widgets a,
#copyright a {
	color: var(--sp-cream) !important;
}

#footer a:hover,
#footer-widgets a:hover,
#copyright a:hover {
	color: var(--sp-accent) !important;
}

/* -------------------------------------------------
   8. Small screens
   ------------------------------------------------- */
@media (max-width: 768px) {
	.content-area,
	#content {
		padding-top: 36px;
		padding-bottom: 36px;
	}
	body {
		font-size: 16px;
	}
}