/*
Theme Name: McCulloch Journal
Theme URI: https://mccullochjewellers.co.uk/blog/
Author: McCulloch Jewellers
Description: The journal for mccullochjewellers.co.uk. Matches the shop's look: Italiana headings, Instrument Sans body, warm paper ground, ink footer and gold accents.
Version: 1.1.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mcculloch-journal
*/

/* Small details theme.json can't express. */

.mj-eyebrow {
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* Header: a copy of the shop's NavigationV2 (solid state) and TrustBarV2. */
.mj-logo a { text-decoration: none; color: inherit; display: block; line-height: 1; }
.mj-logo .mj-logo-word { font-family: var(--wp--preset--font-family--display); font-size: 25px; letter-spacing: 0.16em; }
.mj-logo .mj-logo-sub { font-size: 8.5px; letter-spacing: 0.44em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin-top: 5px; padding-left: 3px; }

/* The shop runs at 16px / 1.5; match it so the bars come out the same height. */
.mj-nav { position: sticky; top: 0; z-index: 60; font-family: var(--wp--preset--font-family--body); font-size: 16px; line-height: 1.5; color: #4A4741; }
.admin-bar .mj-nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .mj-nav { top: 46px; } }
.mj-nav a { color: inherit; text-decoration: none; }

.mj-trust { background: #1C1A17; color: #B0A798; }
.mj-trust-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: 8px 20px; }
.mj-trust-row span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #D8CFC0; }
.mj-trust-row i { font-style: normal; padding: 0 20px; color: #4A443B; }
.mj-trust-one { display: none; position: relative; height: 32px; overflow: hidden; }
.mj-trust-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 20px; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #E8E0D2; text-align: center; line-height: 1.2; }
.mj-trust-msg.is-rising { animation: mjTrustRise .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes mjTrustRise { from { opacity: 0; transform: translateY(85%); } to { opacity: 1; transform: none; } }

.mj-bar { background: #F8F6F0; border-bottom: 1px solid #E3DDD0; }
.mj-bar-desktop { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(20px, 3vw, 48px); padding: 16px clamp(24px, 3vw, 52px); }
.mj-brand { display: block; line-height: 1; }
.mj-brand-word { display: block; font-family: var(--wp--preset--font-family--display); font-size: 25px; letter-spacing: 0.16em; color: #332F2A; }
.mj-brand-sub { display: block; font-size: 8.5px; letter-spacing: 0.44em; text-transform: uppercase; color: #6E6A60; margin-top: 5px; padding-left: 3px; }
.mj-links { display: flex; justify-content: center; gap: clamp(14px, 2vw, 32px); font-size: 12.5px; letter-spacing: 0.02em; color: #332F2A; }
.mj-links a { position: relative; padding: 6px 0; border-bottom: 1px solid transparent; white-space: nowrap; transition: border-color .25s ease, color .25s ease; }
.mj-links a:hover { border-bottom-color: #1C1A17; }
.mj-utils { display: flex; justify-content: flex-end; align-items: center; gap: clamp(12px, 1.4vw, 20px); font-size: 11px; color: #6E6A60; }
/* The shop renders these as buttons, which drop the uppercase and tracking. */
.mj-utils a { transition: color .25s ease; letter-spacing: 0.08em; }
.mj-utils a:hover { color: #A8813C; }

.mj-bar-mobile { display: none; align-items: center; justify-content: space-between; padding: 12px 20px; }
.mj-menu-btn, .mj-drawer-close { background: none; border: 0; padding: 0; cursor: pointer; display: flex; color: #332F2A; }
.mj-brand-mobile { font-family: var(--wp--preset--font-family--display); font-size: 19px; letter-spacing: 0.15em; color: #332F2A; text-align: center; }
.mj-bag-mobile { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #6E6A60; }

@media (max-width: 1023px) {
	.mj-bar-desktop, .mj-trust-row { display: none; }
	.mj-bar-mobile, .mj-trust-one { display: flex; }
	.mj-trust-one { display: block; }
}

/* Mobile drawer */
.mj-drawer { position: fixed; inset: 0; z-index: 100000; background: #F8F6F0; display: flex; flex-direction: column; animation: mjDrawerIn .34s cubic-bezier(.22,1,.36,1); }
.mj-drawer[hidden] { display: none; }
.mj-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #E3DDD0; flex: none; }
.mj-drawer-word { font-family: var(--wp--preset--font-family--display); font-size: 20px; letter-spacing: 0.15em; color: #1C1A17; }
.mj-drawer-close { color: #1C1A17; }
.mj-drawer-body { flex: 1; overflow-y: auto; padding: 8px 20px 28px; }
.mj-drawer nav { display: flex; flex-direction: column; }
.mj-drawer nav a { display: block; padding: 16px 0; border-bottom: 1px solid #E3DDD0; font-size: 15px; letter-spacing: 0.02em; color: #332F2A; animation: mjItemIn .4s cubic-bezier(.22,1,.36,1) both; animation-delay: var(--d, 0s); }
.mj-drawer nav a:first-child { color: #1C1A17; }
.mj-drawer-actions { margin-top: 24px; animation: mjItemIn .4s cubic-bezier(.22,1,.36,1) both; animation-delay: .28s; }
.mj-drawer-cta { display: block; text-align: center; padding: 15px 0; background: #1C1A17; color: #F8F6F0 !important; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.mj-drawer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.mj-drawer-grid a { display: block; text-align: center; padding: 13px 0; border: 1px solid #CFC4B2; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #1C1A17; }
.mj-drawer-grid .mj-span2 { grid-column: span 2; }
@keyframes mjDrawerIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes mjItemIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mj-drawer, .mj-drawer *, .mj-trust-msg { animation: none !important; } }

/* Footer */
.mj-footer a { color: var(--wp--preset--color--on-dark-soft); text-decoration: none; transition: color .2s ease; }
.mj-footer a:hover { color: #fff; }
.mj-footer .mj-footer-col p { margin: 0 0 10px; font-size: 13.5px; }
.mj-footer .mj-footer-title { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; margin-bottom: 18px !important; }
.mj-footer .mj-legal { font-size: 11.5px; color: var(--wp--preset--color--on-dark-muted); }
.mj-footer .mj-legal a { color: var(--wp--preset--color--on-dark-muted); }

/* Post cards */
.mj-card .wp-block-post-featured-image { overflow: hidden; background: var(--wp--preset--color--tint); }
.mj-card .wp-block-post-featured-image img { transition: transform .6s cubic-bezier(.22,1,.36,1); }
.mj-card:hover .wp-block-post-featured-image img { transform: scale(1.03); }
.mj-card .wp-block-post-title a { text-decoration: none; }
.mj-card .wp-block-post-title a:hover { color: var(--wp--preset--color--gold); }
.mj-card .wp-block-post-terms a { text-decoration: none; }

/* Article body */
.mj-article .wp-block-post-content > p:first-of-type::first-letter {
	font-family: var(--wp--preset--font-family--display);
	float: left;
	font-size: 4.2em;
	line-height: .85;
	padding: 6px 12px 0 0;
	color: var(--wp--preset--color--heading);
}
.wp-block-post-content blockquote { border-left: 1px solid var(--wp--preset--color--gold); }
.wp-block-post-content img { height: auto; }

/* Pagination */
.wp-block-query-pagination a, .wp-block-query-pagination .page-numbers { text-decoration: none; padding: 4px 10px; }
.wp-block-query-pagination .page-numbers.current { border-bottom: 1px solid var(--wp--preset--color--gold); }

/* Search field */
.wp-block-search__input { border: 1px solid var(--wp--preset--color--rule-strong); border-radius: 0; padding: 12px 14px; background: #fff; }

:where(.wp-site-blocks) *:focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 2px; }

.wp-block-post-terms a { text-decoration: none; }
.mj-postnav a { text-decoration: none; font-family: var(--wp--preset--font-family--display); font-size: 20px; }
.mj-postnav a:hover { color: var(--wp--preset--color--gold); }

/* Tables: clean, readable comparison style. No vertical rules, airy rows,
   quiet uppercase column labels, the first column reads as the row label. */
.wp-block-table { margin: 40px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wp-block-table table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; background: #fff; border: 1px solid var(--wp--preset--color--rule); }
.wp-block-table th, .wp-block-table td { border: 0; border-bottom: 1px solid var(--wp--preset--color--rule); padding: 16px 20px; text-align: left; vertical-align: top; }
.wp-block-table thead { border-bottom: 0; }
.wp-block-table thead th { background: var(--wp--preset--color--tint); border-bottom: 1px solid var(--wp--preset--color--rule-strong); font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 19px; color: var(--wp--preset--color--heading); padding-top: 18px; padding-bottom: 16px; }
.wp-block-table tbody tr:last-child td { border-bottom: 0; }
.wp-block-table tbody tr { transition: background .2s ease; }
.wp-block-table tbody tr:hover { background: #FBFAF6; }
.wp-block-table tbody td:first-child { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--muted); width: 34%; padding-top: 19px; }
.wp-block-table tbody td { color: var(--wp--preset--color--body); }
.wp-block-table figcaption { font-size: 12px; color: var(--wp--preset--color--muted); margin-top: 10px; }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: #FBFAF6; }
@media (max-width: 600px) {
	.wp-block-table table { font-size: 14.5px; }
	.wp-block-table th, .wp-block-table td { padding: 13px 14px; }
	.wp-block-table thead th { font-size: 17px; }
	.wp-block-table tbody td:first-child { font-size: 10px; letter-spacing: 0.1em; width: 36%; padding-top: 15px; }
}

/* FAQ (Details block) in the house style. */
.wp-block-details { border-top: 1px solid var(--wp--preset--color--rule); padding: 18px 0; margin: 0 !important; }
.wp-block-details + :not(.wp-block-details) { border-top: 1px solid var(--wp--preset--color--rule); padding-top: 24px; }
.wp-block-details summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; font-weight: 500; color: var(--wp--preset--color--heading); }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; color: var(--wp--preset--color--gold); font-size: 20px; line-height: 1; transition: transform .25s ease; }
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details > :not(summary) { margin-top: 10px; color: var(--wp--preset--color--muted); }