/* Daily Anytime - DateTime Pages
 *
 * Layout, headings, links and tables come from the theme and the site's own CSS
 * (these pages sit inside Kadence's .entry-content, like any page built in the editor).
 * This file only styles the calculator, the result box and the link chips.
 * Colours: the site's brand variables (--navy #1A365D, --teal #2C9C9C, --orange #F5A623, defined in the
 * site CSS) with Kadence's palette for neutrals. Change the block below to restyle the calculator.
 */
.dadt-wrap,
.dadt-calc {
	--dadt-accent:       var(--navy, #1a365d);
	--dadt-accent-hover: #12294a;
	--dadt-heading:      var(--navy, #1a365d);
	--dadt-text:         var(--global-palette4, #2d3748);
	--dadt-muted:        var(--global-palette5, #4a5568);
	--dadt-border:       var(--global-palette7, #edf2f7);
	--dadt-surface:      var(--global-palette8, #f7fafc);
	--dadt-white:        var(--global-palette9, #ffffff);
	--dadt-link:         var(--teal, #2c9c9c);
	--dadt-radius:       12px;
}

/* Small spacing helpers (headings keep the site's own style) */
.dadt-wrap .dadt-section { margin-top: 8px; }
.dadt-wrap .dadt-copy p { margin: 0 0 14px; }
.dadt-wrap .dadt-note { font-size: .92rem; color: var(--dadt-muted); }

.dadt-wrap .dadt-breadcrumb { font-size: .875rem; color: var(--dadt-muted); margin: 0 0 18px; }

/* Calculator card */
.dadt-card {
	background: var(--dadt-surface);
	border: 1px solid var(--dadt-border);
	border-radius: var(--dadt-radius);
	padding: 24px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .06);
}
.dadt-card .dadt-card__title { margin: 0 0 16px; text-align: center; font-size: 1.35rem; }

.dadt-form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.dadt-input, .dadt-select {
	height: 46px; padding: 0 12px; font-size: 1rem;
	border: 1px solid var(--dadt-border); border-radius: 8px;
	background: var(--dadt-white); color: var(--dadt-text);
}
.dadt-input { width: 120px; }
.dadt-select { min-width: 190px; }
.dadt-select--small { height: 38px; min-width: 190px; font-size: .9rem; }
.dadt-btn {
	height: 46px; padding: 0 28px; font-size: 1rem; font-weight: 600; cursor: pointer;
	border: 0; border-radius: 8px; background: var(--dadt-accent); color: #fff;
}
.dadt-btn:hover, .dadt-btn:focus { background: var(--dadt-accent-hover); color: #fff; }

.dadt-tzrow { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 12px; font-size: .9rem; color: var(--dadt-muted); }

.dadt-result { text-align: center; margin-top: 18px; min-height: 120px; }
.dadt-result p { margin: 0; }
.dadt-result__label { font-size: 1.15rem; font-weight: 700; color: var(--dadt-heading); }
.dadt-result__time { font-size: 2.4rem; line-height: 1.3; color: var(--dadt-accent); font-weight: 600; }
.dadt-result__date { font-size: 1.15rem; color: var(--dadt-text); }
.dadt-result__tz { margin-top: 6px !important; font-size: .85rem; color: var(--dadt-muted); }

/* Tables: the site's .entry-content table styles apply; only allow sideways scroll on small screens */
.dadt-table-wrap { overflow-x: auto; }

/* Editorial content (hand-written per page) follows the site's .entry-content styles */
.dadt-editorial ul, .dadt-editorial ol { margin-bottom: 14px; }

/* Link chips */
.entry-content .dadt-chips, .dadt-chips { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.entry-content .dadt-chips li, .dadt-chips li { margin: 0; padding: 0; }
.entry-content .dadt-chips a, .dadt-chips a {
	display: inline-block; padding: 7px 13px; font-size: .9rem; text-decoration: none;
	border: 1px solid var(--dadt-border); border-radius: 999px;
	background: var(--dadt-white); color: var(--dadt-link);
}
.entry-content .dadt-chips a:hover, .dadt-chips a:hover { border-color: var(--dadt-link); background: var(--dadt-surface); }

/* Optional manual ad slot: sits below the content, never above the calculator */
.dadt-ad { margin: 32px auto; text-align: center; clear: both; overflow: hidden; }

@media (max-width: 600px) {
	.dadt-card { padding: 18px 14px; }
	.dadt-input, .dadt-select, .dadt-btn { width: 100%; }
	.dadt-result__time { font-size: 2rem; }
}