/*
Theme Name: Angelica Divine
Theme URI: https://angelicadivine.com
Author: Astris
Description: The Angelica Divine theme. Same structure as Leo Fortune: header picture, menu, one letter column, footer. Soft pink and lilac, frosted rounded panels.
Version: 1.2
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: All rights reserved
Text Domain: angelica-divine
*/

/* ---- colours, all in one place ------------------------------------------ */
:root {
  --ad-bg-top:      #fbe4ee;
  --ad-bg-mid:      #f3e3f4;
  --ad-bg-bottom:   #e4dcf5;
  --ad-pic-bg:      #f4e1ec;
  --ad-panel:       rgba(255,255,255,0.60);
  --ad-panel-line:  rgba(255,255,255,0.85);
  --ad-bar:         rgba(255,255,255,0.55);
  --ad-box:         #fceef3;
  --ad-box-line:    #f1d3e0;
  --ad-head:        #5b3a5e;
  --ad-sub:         #7b5aa6;
  --ad-text:        #4a3a4c;
  --ad-soft:        #7a6680;
  --ad-menu:        #6d4a70;
  --ad-rose:        #b0457a;
  --ad-button:      #d987b0;
  --ad-button-dark: #c8709d;
  --ad-line:        #e6d3ea;
  --ad-field-line:  #dcc3e0;
  --ad-gold:        #d4af6a;
}

* { box-sizing: border-box; }
html { background: var(--ad-bg-bottom); }
body { margin:0; padding:0; color:var(--ad-text);
       background: linear-gradient(180deg, var(--ad-bg-top) 0%, var(--ad-bg-mid) 50%, var(--ad-bg-bottom) 100%) fixed;
       min-height:100vh;
       font-family: Georgia, "Times New Roman", Times, serif; font-size:17px; line-height:1.7; }

/* One column holds everything: the picture, the menu and the panel share the
   same width, the way Leo's page does. The text inside the panel keeps a
   comfortable reading width. */
.wrap { max-width:1080px; margin:0 auto; padding:0 16px 10px; }

/* ---- header picture, full width of the column ----------------------------- */
.banner { display:block; margin:0; padding:0; line-height:0; background:var(--ad-pic-bg);
          border-radius:0 0 24px 24px; overflow:hidden; }
.banner img { display:block; width:100%; height:auto; }

/* ---- menu, a frosted bar under the picture, same width ---------------------- */
.nav { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 44px;
       margin:16px 0 0; padding:13px 22px;
       background:var(--ad-bar); border:1px solid var(--ad-panel-line); border-radius:999px;
       font-size:17px; }
.nav a { color:var(--ad-menu); text-decoration:none; }
.nav a:hover { color:var(--ad-rose); }
.nav a.current { color:var(--ad-rose); }

/* ---- the letter, in one frosted panel ----------------------------------- */
.main { margin:16px 0 30px; padding:44px max(48px, calc((100% - 760px) / 2)) 46px;
        background:var(--ad-panel); border:1px solid var(--ad-panel-line); border-radius:24px; }

h1 { font-size:31px; color:var(--ad-head); font-weight:normal; line-height:1.25; margin:0 0 18px; text-align:center; }
h2 { font-size:21px; color:var(--ad-sub); font-weight:normal; margin:32px 0 10px;
     border-bottom:1px solid var(--ad-line); padding-bottom:5px; }
h3 { font-size:17px; color:var(--ad-head); margin:22px 0 6px; }
p { margin:0 0 15px; }
a { color:var(--ad-rose); }
b, strong { color:var(--ad-head); }
.kicker { font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:#a07aa8; margin:0 0 12px; text-align:center; }
.em, .red { color:var(--ad-rose); }
.lead { font-size:19px; }
ul { margin:0 0 16px; padding-left:22px; }
li { margin-bottom:7px; }
.box { background:var(--ad-box); border:1px solid var(--ad-box-line); border-radius:18px; padding:22px 26px; margin:24px 0; }
.note { font-size:14px; color:var(--ad-soft); }

/* ---- buttons -------------------------------------------------------------- */
.cta { text-align:center; margin:28px 0 12px; }
.cta a, input.cta-btn, button.cta-btn {
  display:inline-block; background:var(--ad-button); color:#ffffff; text-decoration:none;
  font-family: Georgia, "Times New Roman", serif; font-size:18px; letter-spacing:.02em; line-height:1.3;
  padding:15px 32px; border:0; border-radius:999px; cursor:pointer; }
.cta a:hover, input.cta-btn:hover, button.cta-btn:hover { background:var(--ad-button-dark); }
.cta .under { display:block; font-size:14px; color:var(--ad-soft); margin-top:10px; }

/* ---- shop pieces ---------------------------------------------------------- */
.seal { text-align:center; margin:8px 0 2px; }
.seal svg { display:inline-block; }
.mock { border:2px dashed #d9b8d8; background:rgba(255,255,255,.5); border-radius:16px; text-align:center;
        padding:70px 20px; margin:6px auto 0; max-width:340px; color:#a07aa8;
        font-family: Arial, Helvetica, sans-serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.mock-img { text-align:center; margin:6px 0 0; }
.main .mock-img img { max-width:340px; width:100%; height:auto; border-radius:16px; }
.price { text-align:center; margin:18px 0 0; }
.price .was { font-size:19px; color:#9a8aa0; text-decoration:line-through; margin-right:10px; }
.price .now { font-size:30px; color:var(--ad-rose); }

/* ---- pictures of her -------------------------------------------------------- */
.photo { text-align:center; margin:22px 0 24px; }
.main .photo img { display:inline-block; width:100%; max-width:440px; height:auto; border-radius:22px;
             border:6px solid rgba(255,255,255,.75); box-shadow:0 8px 26px rgba(91,58,94,.12); }

/* ---- signature ------------------------------------------------------------ */
.sig { text-align:center; margin:30px 0 0; }
.sig .a { font-style:italic; color:var(--ad-head); margin:0 0 2px; }
.sig img { display:block; margin:0 auto; width:300px; max-width:80%; height:auto; }
.sig .name { font-style:italic; font-size:30px; color:var(--ad-head); margin:0; }

/* ---- the free reading form ------------------------------------------------ */
.free { text-align:center; color:var(--ad-rose); font-size:24px; letter-spacing:.06em;
        text-transform:uppercase; margin:2px 0 16px; }
table.form { width:100%; border-collapse:collapse; }
table.form td { padding:7px 6px; vertical-align:middle; }
table.form td.lbl { width:34%; text-align:right; color:var(--ad-menu); font-size:15px; }
input[type=text], input[type=email], select, textarea {
  font-family: Georgia, "Times New Roman", serif; font-size:15px; color:var(--ad-text);
  border:1px solid var(--ad-field-line); background:#ffffff; padding:7px 9px; border-radius:10px; }
input[type=text], input[type=email], textarea { width:96%; }
select { padding:6px 5px; }
.consent { font-size:14px; margin:14px 4px 0; }
.consent label { display:block; margin-bottom:9px; }
.form-msg { text-align:center; border-radius:14px; padding:14px 18px; margin:0 0 16px; font-size:16px; }
.form-msg.ok { background:#ffffff; color:var(--ad-head); border:1px solid var(--ad-box-line); }
.form-msg.bad { background:#fff4f6; color:#9b2f5f; border:1px solid #f0c3d3; }
.hp { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* ---- footer --------------------------------------------------------------- */
.foot { text-align:center; font-size:13px; color:var(--ad-soft); line-height:1.8; padding:6px 20px 26px; }
.foot-links { display:inline-block; background:var(--ad-bar); border:1px solid var(--ad-panel-line);
              border-radius:999px; padding:8px 22px; }
.foot a { color:var(--ad-menu); text-decoration:none; }
.foot a:hover { color:var(--ad-rose); text-decoration:underline; }
.foot .cop { margin-top:10px; color:#9a86a0; }

/* ---- cookie question ------------------------------------------------------ */
#ad-cookies { position:fixed; left:0; right:0; bottom:0; z-index:9999; padding:14px;
              font-family: Georgia, "Times New Roman", serif; color:var(--ad-text); }
#ad-cookies .in { max-width:760px; margin:0 auto; background:rgba(255,255,255,.92); border:1px solid var(--ad-box-line);
                  border-radius:20px; padding:16px 20px; box-shadow:0 6px 24px rgba(91,58,94,.14); }
#ad-cookies p { margin:0 0 10px; font-size:15px; line-height:1.5; }
#ad-cookies label { display:block; margin:4px 0; font-size:15px; }
#ad-cookies button { font-family:inherit; font-size:15px; cursor:pointer; border-radius:999px; padding:9px 20px; margin:4px 6px 0 0; }
#ad-cookies .yes { background:var(--ad-button); color:#fff; border:0; }
#ad-cookies .no { background:#fff; color:var(--ad-text); border:1px solid var(--ad-field-line); }
#ad-cookies .pick { background:none; border:0; color:var(--ad-rose); text-decoration:underline; padding:9px 6px; }

/* ---- phones ---------------------------------------------------------------- */
@media (max-width:640px) {
  body { font-size:16px; }
  .wrap { padding:0 10px 8px; }
  .banner { border-radius:0 0 16px 16px; }
  .nav { margin:10px 0 0; gap:2px 18px; padding:9px 16px; border-radius:22px; font-size:15px; }
  .main { margin:10px 0 22px; padding:26px 18px 28px; border-radius:20px; }
  h1 { font-size:25px; }
  h2 { font-size:19px; }
  .lead { font-size:17px; }
  .box { padding:18px 16px; }
  .cta a, input.cta-btn, button.cta-btn { font-size:16px; padding:14px 24px; }
  .sig img { width:230px; }
  table.form td.lbl { width:auto; text-align:left; display:block; padding-bottom:0; }
  table.form td { display:block; }
  input[type=text], input[type=email], textarea { width:100%; }
  .foot-links { border-radius:18px; }
}

/* ---- WordPress bits ----------------------------------------------------------- */
.screen-reader-text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }
.main img { max-width:100%; height:auto; }
.wp-block-image { margin:0 0 16px; }
.wp-block-image img { border-radius:16px; }
.wp-block-image figcaption { font-size:13px; color:var(--ad-soft); text-align:center; }
blockquote { margin:0 0 16px; padding:0 0 0 16px; border-left:3px solid var(--ad-box-line); color:var(--ad-soft); }
hr, .wp-block-separator { border:0; border-top:1px solid var(--ad-line); margin:26px 0; }
.post-list { list-style:none; padding:0; }
.post-list li { margin-bottom:18px; }

/* ---- no page title, ever ----------------------------------------------------
   The theme does not print one. These rules catch the ones Elementor, the
   block editor or a plugin can add, so a title cannot come back by itself. */
.page .entry-title,
.page .page-title,
.page .elementor-page-title,
.page .elementor-widget-theme-page-title,
.page .wp-block-post-title,
.page header.entry-header,
.page .page-header { display: none !important; }