/*
 * Classified pages, "Como el sitio actual" setting.
 *
 * Rules inside the content use :where() so they weigh the same as
 * GeneratePress's own (plain "input", "h2", "a"): wherever AWPCP or
 * SP Estilos won over GeneratePress on the live site, they still win.
 *
 * The theme does NOT restyle AWPCP here. AWPCP's own stylesheet and
 * SP Estilos (including "Tus estilos") give the ads their look, as they
 * do on the live site. This file only supplies what GeneratePress used
 * to provide underneath them: the white content box, text sizes, and
 * the default look of fields, buttons and tables (GeneratePress 3
 * defaults). If the live site's Customizer changed those colors or
 * sizes, adjust the few values marked below or add CSS in SP Estilos.
 */

.spc-awpcp-live {
	--gp-text: #222222;
	--gp-link: #1e73be;       /* Customizer → Colors → Link */
	--gp-link-hover: #000000;
	--gp-button: #55555e;     /* Customizer → Colors → Button background */
	--gp-button-hover: #3f4047;
	--gp-field-bg: #fafafa;
	--gp-field-text: #666666;
	--gp-field-border: #cccccc;
}

/* ---------- Content ----------
   Live Houston shows the ads straight on the gray page background,
   with no white box. */

.spc-awpcp-live .spc-article {
	color: var(--gp-text);
	font-size: 17px;
	line-height: 1.5;
}

:where(.spc-awpcp-live .spc-article) a {
	color: var(--gp-link);
	text-decoration: none; /* live Houston: ad links aren't underlined */
}

:where(.spc-awpcp-live .spc-article) a:hover {
	color: var(--gp-link-hover);
}

/* ---------- Text ---------- */

.spc-awpcp-live .spc-pagetitle,
.spc.spc-awpcp-live .spc-pagetitle {
	margin: 0 0 20px;
	color: inherit;
	font-family: inherit;
	font-size: 31px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: normal;
}

@media (min-width: 769px) {
	.spc.spc-awpcp-live .spc-pagetitle {
		font-size: 42px;
	}
}

:where(.spc-awpcp-live .entry-content) p {
	margin: 0 0 1.5em;
}

:where(.spc-awpcp-live .entry-content) h1,
:where(.spc-awpcp-live .entry-content) h2,
:where(.spc-awpcp-live .entry-content) h3,
:where(.spc-awpcp-live .entry-content) h4,
:where(.spc-awpcp-live .entry-content) h5,
:where(.spc-awpcp-live .entry-content) h6 {
	margin: 0 0 20px;
	font-weight: 400;
	line-height: 1.2;
}

:where(.spc-awpcp-live .entry-content) h2 { font-size: 27px; }
:where(.spc-awpcp-live .entry-content) h3 { font-size: 24px; }
:where(.spc-awpcp-live .entry-content) h4 { font-size: 22px; }
:where(.spc-awpcp-live .entry-content) h5 { font-size: 19px; }

@media (min-width: 769px) {
	:where(.spc-awpcp-live .entry-content) h2 { font-size: 35px; }
	:where(.spc-awpcp-live .entry-content) h3 { font-size: 29px; }
	:where(.spc-awpcp-live .entry-content) h4 { font-size: 24px; }
	:where(.spc-awpcp-live .entry-content) h5 { font-size: 20px; }
}

:where(.spc-awpcp-live .entry-content) table {
	width: 100%;
	margin: 0 0 1.5em;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-width: 1px 0 0 1px;
}

:where(.spc-awpcp-live .entry-content) th,
:where(.spc-awpcp-live .entry-content) td {
	padding: 8px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-width: 0 1px 1px 0;
}

/* ---------- Ad page title box ----------
   AWPCP draws the gray box; live Houston shows its title in capitals. */

:where(.spc-awpcp-live) #showawpcpadpage .awpcp-title {
	text-transform: uppercase;
}

/* ---------- Fields and buttons (GeneratePress defaults) ----------
   Algolia's boxes and buttons (aes-*, ais-*) are skipped so they keep
   the plugin's and SP Estilos' look. */

:where(.spc-awpcp-live .entry-content) input[type="email"]:where(:not([class*="aes-"], [class*="ais-"])),
:where(.spc-awpcp-live .entry-content) input[type="number"]:where(:not([class*="aes-"], [class*="ais-"])),
:where(.spc-awpcp-live .entry-content) input[type="password"]:where(:not([class*="aes-"], [class*="ais-"])),
:where(.spc-awpcp-live .entry-content) input[type="search"]:where(:not([class*="aes-"], [class*="ais-"])),
:where(.spc-awpcp-live .entry-content) input[type="tel"]:where(:not([class*="aes-"], [class*="ais-"])),
:where(.spc-awpcp-live .entry-content) input[type="text"]:where(:not([class*="aes-"], [class*="ais-"])),
:where(.spc-awpcp-live .entry-content) input[type="url"]:where(:not([class*="aes-"], [class*="ais-"])),
:where(.spc-awpcp-live .entry-content) select:where(:not([class*="aes-"], [class*="ais-"])),
:where(.spc-awpcp-live .entry-content) textarea:where(:not([class*="aes-"], [class*="ais-"])) {
	box-sizing: border-box;
	max-width: 100%;
	padding: 10px 15px;
	border: 1px solid var(--gp-field-border);
	border-radius: 0;
	background-color: var(--gp-field-bg);
	color: var(--gp-field-text);
	font: inherit;
}

:where(.spc-awpcp-live .entry-content) input:where(:not([class*="aes-"], [class*="ais-"])):focus,
:where(.spc-awpcp-live .entry-content) select:where(:not([class*="aes-"], [class*="ais-"])):focus,
:where(.spc-awpcp-live .entry-content) textarea:where(:not([class*="aes-"], [class*="ais-"])):focus {
	border-color: #bfbfbf;
	background-color: #fff;
	color: var(--gp-field-text);
}

:where(.spc-awpcp-live .entry-content) textarea:where(:not([class*="aes-"], [class*="ais-"])) {
	width: 100%;
}

:where(.spc-awpcp-live .entry-content) button:where(:not([class*="aes-"], [class*="ais-"])),
:where(.spc-awpcp-live .entry-content) input[type="button"]:where(:not([class*="aes-"], [class*="ais-"])),
:where(.spc-awpcp-live .entry-content) input[type="reset"]:where(:not([class*="aes-"], [class*="ais-"])),
:where(.spc-awpcp-live .entry-content) input[type="submit"]:where(:not([class*="aes-"], [class*="ais-"])),
:where(.spc-awpcp-live .entry-content) a.button:where(:not([class*="aes-"], [class*="ais-"])) {
	padding: 10px 20px;
	border: 1px solid transparent;
	border-radius: 0;
	background: var(--gp-button);
	color: #fff;
	font: inherit;
	line-height: normal;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: button;
}

:where(.spc-awpcp-live .entry-content) button:where(:not([class*="aes-"], [class*="ais-"])):hover,
:where(.spc-awpcp-live .entry-content) input[type="button"]:where(:not([class*="aes-"], [class*="ais-"])):hover,
:where(.spc-awpcp-live .entry-content) input[type="reset"]:where(:not([class*="aes-"], [class*="ais-"])):hover,
:where(.spc-awpcp-live .entry-content) input[type="submit"]:where(:not([class*="aes-"], [class*="ais-"])):hover,
:where(.spc-awpcp-live .entry-content) a.button:where(:not([class*="aes-"], [class*="ais-"])):hover {
	background: var(--gp-button-hover);
	color: #fff;
}

/* Only change that isn't a look: stop wide dropdowns scrolling the page sideways */
:where(.spc-awpcp-live .entry-content) .select2-container {
	max-width: 100%;
}