/* =============================================================
   DEVYANI — acf-sections.css
   WordPress-specific additions that sit on top of theme.css:
   section builder utilities, container widths, colour schemes,
   product detail, search form, comments, WP alignments.
   ============================================================= */

/* ---- Flexible section base ---- */
.devyani-section{position:relative}
.devyani-section.has-bg-image{background-repeat:no-repeat}

/* ---- Container width variants ---- */
.container--full{max-width:none}
.container--wide{max-width:1440px}
.container--narrow{max-width:900px}

/* ---- Colour scheme: light text on dark sections ---- */
.color-scheme-light,
.color-scheme-light p,
.color-scheme-light li{color:#e7eef0}
.color-scheme-light .section-title,
.color-scheme-light .heading,
.color-scheme-light h1,.color-scheme-light h2,.color-scheme-light h3,.color-scheme-light h4{color:#fff}
.color-scheme-light .eyebrow{color:#f6d95c}
.color-scheme-light .section-head__sub{color:#c3e0e5}
.color-scheme-light .bg-word{-webkit-text-stroke-color:rgba(255,255,255,.12)}

/* ---- Services overlap (home) ---- */
.services--overlap{margin-top:-96px}
@media (max-width:768px){ .services--overlap{margin-top:0;padding-top:56px} }

/* ---- Icon-card column variants ---- */
.mv-grid--2{grid-template-columns:repeat(2,1fr)}
.mv-grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:992px){ .mv-grid--4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .mv-grid--2,.mv-grid--4{grid-template-columns:1fr} }

/* ---- Visibility toggles ---- */
@media (min-width:993px){ .hide-desktop{display:none !important} }
@media (min-width:641px) and (max-width:992px){ .hide-tablet{display:none !important} }
@media (max-width:640px){ .hide-mobile{display:none !important} }

/* ---- Reveal animation variants (JS toggles .in-view) ---- */
.js-ready [data-anim="zoom-in"].reveal{opacity:0;transform:scale(.94)}
.js-ready [data-anim="zoom-in"].reveal.in-view{opacity:1;transform:none}
.js-ready [data-anim="fade-in"].reveal{opacity:0;transform:none}
.js-ready [data-anim="fade-in"].reveal.in-view{opacity:1}

/* ---- Product single ---- */
.product-single{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.product-single__main{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--bg-alt)}
.product-single__main .media-img{width:100%;height:auto;border-radius:var(--radius)}
.product-single__thumbs{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.product-single__thumb{width:88px;height:88px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.product-single__body .section-title{margin:6px 0 14px}
.product-single__desc{margin-bottom:22px}
.spec-table{width:100%;border-collapse:collapse;margin:0 0 26px}
.spec-table th,.spec-table td{text-align:left;padding:12px 14px;border:1px solid var(--line);font-size:16px}
.spec-table th{background:var(--bg-alt);font-family:var(--font-head);font-weight:600;color:var(--navy);width:42%;text-transform:none}
.product-single__actions{display:flex;flex-wrap:wrap;gap:14px}
@media (max-width:900px){ .product-single{grid-template-columns:1fr;gap:30px} }

/* ---- Search form ---- */
.search-form{display:flex;max-width:460px;margin:22px auto 0;background:var(--bg-alt);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.search-form__input{flex:1;min-width:0;border:0;background:transparent;padding:13px 16px;font-family:var(--font-body);font-size:16px;outline:none;color:var(--ink)}
.search-form__btn{flex:none;width:54px;background:var(--red);color:#fff;font-size:16px}
.search-form__btn:hover{background:var(--red-dark)}

/* ---- Skip link / a11y ---- */
.screen-reader-text{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;left:16px;top:16px;z-index:1000;width:auto;height:auto;clip:auto;background:#fff;color:var(--navy);padding:12px 18px;border-radius:6px;box-shadow:var(--shadow-lg)}

/* ---- WP core content (legal pages, blog body) ---- */
.entry-content > *{margin-bottom:20px}
.entry-content h2{font-family:var(--font-head);font-weight:700;font-size:28px;color:var(--navy);margin:34px 0 12px}
.entry-content h3{font-family:var(--font-head);font-weight:700;font-size:21px;color:var(--navy);margin:24px 0 10px}
.entry-content ul,.entry-content ol{margin:0 0 22px 22px;display:flex;flex-direction:column;gap:10px}
.entry-content ul li{list-style:disc}
.entry-content ol li{list-style:decimal}
.entry-content a{color:var(--red);text-decoration:underline}
.entry-content img{border-radius:var(--radius);height:auto}
.entry-content blockquote{border-left:4px solid var(--red);background:var(--bg-alt);padding:18px 22px;border-radius:0 var(--radius) var(--radius) 0;font-size:18px}
.alignwide{max-width:1100px;margin-left:auto;margin-right:auto}
.alignfull{max-width:none}
.aligncenter{margin-left:auto;margin-right:auto;text-align:center}
.wp-caption-text,.entry-content figcaption{font-size:14px;color:var(--muted);text-align:center;margin-top:8px}

/* ---- Pagination (WP) ---- */
.pagination .nav-links{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.pagination .page-numbers{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:6px;font-family:var(--font-head);font-weight:600;font-size:17px;color:var(--navy)}
.pagination .page-numbers.current,.pagination .page-numbers:hover{background:var(--red);border-color:var(--red);color:#fff}

/* ---- Comments ---- */
.comments-area{margin-top:40px}
.comments-title{font-family:var(--font-head);font-weight:700;font-size:24px;color:var(--navy);text-transform:uppercase;margin-bottom:20px}
.comment-list{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:20px}
.comment-list .children{list-style:none;margin:20px 0 0 40px;padding:0;display:flex;flex-direction:column;gap:20px}
.comment-body{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.comment-form{display:grid;gap:16px}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%;background:var(--bg-alt);border:1px solid var(--line);border-radius:6px;padding:13px 15px;font-family:var(--font-body);font-size:16px}

/* ---- Empty builder notice ---- */
.devyani-empty{border:2px dashed var(--line);border-radius:var(--radius);margin:20px}

/* ---- ACF admin: nicer flexible layout titles ---- */