/*
 * El Sur de Acapulco — Periódico Impreso
 * sur-impreso-v2.css — CSS variables + visual improvements
 * Loads after main.css, does not replace it.
 */

/* ============================================================
   CSS Variables
   ============================================================ */

:root {
	--sur-blue:        #0078B4;
	--sur-blue-dark:   #005a8e;
	--sur-blue-light:  #3399cc;
	--sur-green:       #2B942D;
	--sur-red:         #c0392b;
	--sur-text:        #231F20;
	--sur-text-muted:  #6f7071;
	--sur-text-mid:    #47484a;
	--sur-border:      #d8d8d8;
	--sur-bg-light:    #f6f5f5;
	--sur-serif:       'TheSerifBlack-Caps', Georgia, 'Times New Roman', serif;
	--sur-sans:        'GillSansMT', 'Gill Sans', 'Trebuchet MS', Arial, sans-serif;
	--sur-sans-bold:   'GillSansMT-Bold', 'Gill Sans', Arial, sans-serif;
	--sur-bask:        'baskerville', 'Palatino Linotype', Georgia, serif;
	--sur-radius:      3px;
	--sur-shadow:      0 2px 8px rgba(0,0,0,.08);
}

/* ============================================================
   Fix baskerville @font-face — add woff2/woff/ttf
   ============================================================ */

/* NOTA: el @font-face de 'baskerville' se eliminó a propósito.
   El webfont en fonts/custom-fonts/ tiene métricas rotas (glifos
   encimados). Los titulares usan el fallback del stack --sur-bask
   (Palatino/Georgia), igual que en producción. No reintroducir. */

/* ============================================================
   Typography — use CSS vars
   ============================================================ */

body {
	background: #fff; /* el tema no fija fondo; sin esto, dark mode lo pinta negro */
	font-family: var(--sur-sans);
	color: var(--sur-text);
	-webkit-font-smoothing: antialiased;
}

a { color: var(--sur-text); }
a:hover { color: var(--sur-blue); }

h1, h2, h3, h4, h5, h6 { color: var(--sur-text); }

p {
	font-size: 14px;
	line-height: 22px;
	color: var(--sur-text-muted);
}

/* ============================================================
   Header
   ============================================================ */

.header { padding: 9px 0 0; }

.logo-outer {
	border-top: 4px solid var(--sur-blue);
	padding-top: 22px;
}

.menu {
	border-bottom: 4px solid var(--sur-blue);
	margin-top: 38px;
	padding-bottom: 18px;
	position: relative;
}

.menu > ul > li > a {
	font-family: var(--sur-sans-bold);
	font-size: 15px;
	color: var(--sur-text-mid);
	transition: color .2s;
}

.menu > ul > li > a:hover { color: var(--sur-blue); }

.menu-toggle { background: var(--sur-green); }

.current-date p, .current-date span {
	font-family: var(--sur-sans);
	color: var(--sur-text-mid);
}

/* ============================================================
   Section / category headers
   ============================================================ */

.post-default h3 {
	background: var(--sur-green);
	font-family: var(--sur-serif);
	font-size: 22px;
	border-radius: var(--sur-radius) var(--sur-radius) 0 0;
}

.post-style-border h3 {
	border-top: 6px solid var(--sur-blue);
	background: none;
	color: var(--sur-text);
}

.post-style-thumb h3 {
	border-top: 6px solid var(--sur-blue);
	border-bottom: 2px dotted var(--sur-blue);
	background: none;
	color: var(--sur-text);
}

.post-style-border { border-bottom: 6px solid var(--sur-blue); }

/* ============================================================
   Post headlines
   ============================================================ */

.fes-content h4 {
	font-size: 32px;
	line-height: 36px;
	color: var(--sur-text);
	font-family: var(--sur-bask);
}

.fes-content h4 a { color: var(--sur-text); font-weight: bold; }
.fes-content h4 a:hover { color: var(--sur-blue); }

.post-default h4 {
	font-size: 20px;
	line-height: 24px;
	color: var(--sur-text-mid);
}

.post-default h4 a { color: var(--sur-text-mid); }
.post-default h4 a:hover { color: var(--sur-blue); }

.post-th-content h5 a {
	font-size: 16px;
	color: var(--sur-text-mid);
}
.post-th-content h5 a:hover { color: var(--sur-blue); }

/* ============================================================
   Sidebar
   ============================================================ */

.sidebar { border-left: 1px dotted var(--sur-border); }

/* Widget del clima: la API que lo alimentaba está muerta y solo
   muestra ciudades con °C vacíos. Oculto hasta tener fuente de datos. */
.sidebar .whether { display: none; }

.all-instant {
	background: #e8f2fb;
	border-radius: var(--sur-radius);
}

.all-instant h5 {
	color: var(--sur-blue);
	border-bottom: 1px dotted var(--sur-blue-light);
}

/* ============================================================
   Search
   ============================================================ */

.search_columna { background: var(--sur-blue); border-radius: var(--sur-radius); }

.search-feild {
	border-color: var(--sur-border);
	border-radius: 35px;
	box-shadow: none;
}

.search-feild:focus {
	outline: none;
	border-color: var(--sur-blue);
	box-shadow: 0 0 0 2px rgba(0,120,180,.15);
}

/* ============================================================
   Footer
   ============================================================ */

.footer { background: #1a1a1a; }

.footer-top { padding: 32px 0; }

.footer-top h3 {
	color: #fff;
	font-family: var(--sur-sans-bold);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .05em;
	border-bottom: 2px solid var(--sur-blue);
	padding-bottom: 8px;
	margin-bottom: 14px;
}

.footer-menu ul li a {
	color: #aaa;
	font-size: 13px;
	line-height: 26px;
	transition: color .2s;
}

.footer-menu ul li a:hover { color: #fff; }

.f-social ul li a {
	width: 34px;
	height: 34px;
	background: #333;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ccc;
	transition: background .2s, color .2s;
}

.f-social ul li a:hover {
	background: var(--sur-blue);
	color: #fff;
}

.f-policy p { color: #777; font-size: 12px; }

.footer-bottom {
	background: #111;
	text-align: center;
	padding: 12px 0;
}

.footer-bottom p {
	color: #666;
	font-size: 12px;
	margin: 0;
}

.footer-bottom span { color: var(--sur-blue); font-weight: bold; }

/* ============================================================
   Date picker widget
   ============================================================ */

.ui-datepicker {
	border: 1px solid var(--sur-border);
	border-radius: var(--sur-radius);
	box-shadow: var(--sur-shadow);
}

.ui-datepicker .ui-datepicker-header {
	background: var(--sur-blue);
	border: none;
	border-radius: var(--sur-radius) var(--sur-radius) 0 0;
	color: #fff;
}

.ui-datepicker .ui-state-highlight,
.ui-datepicker .ui-state-active {
	background: var(--sur-blue);
	border-color: var(--sur-blue-dark);
	color: #fff;
}

/* ============================================================
   Responsive improvements
   ============================================================ */

@media (max-width: 991px) {
	.left-panel { margin: 0; padding: 0; }
	.sidebar { border-left: none; border-top: 1px dotted var(--sur-border); padding: 20px 0 0; margin-top: 20px; }
	.fes-content h4 { font-size: 26px; line-height: 30px; }
}

@media (max-width: 767px) {
	.header-bottom { margin-top: 12px; }
	.menu { margin-top: 12px; }
	.menu > ul { display: none; }
	.menu > ul.open { display: block; text-align: left; }
	.menu > ul > li { display: block; padding: 6px 0; }
	.menu > ul > li:before { display: none; }
	.menu-toggle { display: block; }
	.current-date { padding-top: 8px; }
	.fes-content h4 { font-size: 22px; line-height: 26px; }
	.post-default h4 { font-size: 17px; }
	.footer-top .col-md-2,
	.footer-top .col-md-4,
	.footer-top .col-md-5 { margin-bottom: 24px; }
}

@media (max-width: 479px) {
	.container { padding-left: 12px; padding-right: 12px; }
	.fes-content h4 { font-size: 19px; line-height: 23px; }
}